플러터(Flutter) 입문 2. MaterialApp과 Scaffold

1. 앱 구동의 시작 main 함수

 

메인함수

main.dart 라는 다트 파일 제일 상단에 보시면

 

void main() {
runApp(MyApp());
}

 

라고 적혀있는걸 보실수 있습니다.

이 함수가 플러터 앱실행의 시초입니다.

 

main 이라는 것은 함수의 이름인데

이건 우리가 지은것도 아니고, 플러터에서 이렇게 지정한겁니다.

내장함수라고 하죠. 

앱을 실행하면 main 이라는 함수를 찾아 실행합니다.

 

 

어쨋든 main 함수의 내부를 보시면 runApp이라는 또다른 내장함수가 나옵니다.

main이라는 함수가 실행되면 runApp이라는것이 실행되는거죠,

그안에보면 MyApp() 이라고 적혀있습니다.

여기서 MyApp() 은 클래스 이름입니다. 이건 바꿔줄수 있습니다.

 

(클래스는 하나의 개념덩어리 입니다. 클래스라는 개념을 몰라도 일단 따라오시면됩니다.

 

수학 화학 기계 이런 오래된학문들은 차례차례 이해를 해가는 커리큘럼이라던지 그런게 있겠지만 프로그래밍,

특히 어플리케이션은 그 산업이 발달한지아직 몇년 안됩니다. 제대로된 커리큘럼이 없을테고,계속 바뀌는 특성상

커리큘럼으로 모르는것부터 하나하나 밟아 가야지 이런식으로 개발을 접근하면 안될것 같습니다.

그래서 모르면 모르는데로 답답하겠지만 그냥 받아들이는게 좋을거 같습니다.

 

처음에는 아무것도 모르는 하얀 도화지 상태이지만, 지식의 퍼즐이 하나 둘씩 쌓일때마다 자연스럽게 이해가 될것입니다.

이런식으로 개발이 이루어 집니다.)

 

2.MaterialApp

 

MyApp 이라는 클래스를 찾으려고하니 마침 바로 아래에 있네요.

 

거기 내용을 보니 

 

return MaterialApp 이라고 적혀있고 무슨 내용들이 적혀있습니다.

 

무슨내용인지 몰라도 대략 영어를 보면

MyApp 이라는 클레스는 MaterialApp 이라는 형태가 된다. 라고 이해할수 있습니다.

 

MaterialApp 이라는 것은 우리가 앞으로 짜게될 모든 하위 페이지나 구성요소를 최 상단에서 담는 그릇 입니다.

 

마치 어떤 봉지에 

장난감, 공책, 시계 등등을 다 담아두고

봉지 앞면에 '내물건' 이라고 적어두는 겁니다.

 

 

MaterialApp은 여러가지 옵션을 가지고있습니다.

내물건 이라고 이름을 지을수있는 title

그리고 내용물 옵션이 home 

이런것들이 있는데

필수가 내용물입니다.

 

예제앱에서는 MaterialApp에 3가지 옵션이 들어가 있습니다.

 

title

theme

home 

 

이렇게 들어있네요.

여기서 필수적으로 필요한 옵션이 내용물인 home 입니다.

 

home에 들어갈 내용은 페이지 입니다. 제일 먼저나오는 페이지 이죠.

 

 

이 페이지 라는것은 Scaffold 라는 형태를 가집니다.

 

예제앱에 home 옵션 부분을 보면 MyHomePage 라고 적혀있습니다.

 MyHomePage라는 클래스를 home으로 쓰겠다는 겁니다.

제일 첫페이지 인것이죠. 페이지는 Scaffold 라는 형태를 가진다고 했으니,

한번 확인해보겠습니다.

 

맨 아래에 보니 return Scaffold 라고 적혀 있는게 보입니다.

그런데 이상합니다. 맨아래에 return Scaffold 라고 적혀있긴하지만

 

이 return Scaffold 를 가지고 있는 클래스의 이름은 MyHomePage 가 아니라 _MyHomePageState 라는 놈인것이죠.

하지만 MyHomePage 라는 class의 내용을 보면  _MyHomePageState라는 놈이랑 무슨 관계가 있다 라는 이해하기 힘들지만 어쨋든 그런내용들이 있습니다.

 

(설명을 보고있어도 이해가 안될거 압니다. 저도 이게 뭐냐 하면서 넘어갔던 내용들입니다.

하지만 이 내용이 처음엔 이해가 안됬는데 계속개발하다보니 무슨내용인지 그냥 자연스럽게 받아들여지게 됩니다.)

 

어쨋든 우리가 알아야 하는 내용은

 

1. 앱을 가장 상단에서 감싸고 있는 봉지는 MaterialApp 이다.

2. MaterialApp에서 가장먼저 나오는 페이지는 home 이다.

3. 페이지는 Scaffold 라는 형태를 가진다.

 

라는 것입니다.

 

그리고 앞으로 우리는 이런것들을 위젯 이라고 부릅니다.

뭘요?

MaterialApp 

Scaffold 

뭐 이런것들이요.

하나의 개념덩어리 들이죠.

 

3. MaterialApp 처음부터 작성해보기

예제앱을 싹 정리하고 가도록하겠습니다.

MyApp 부분만 남기고 나머지는 지워주세요.

아래처럼만 남겨주시면 됩니다.

 

예제앱도 아주 기초적이긴하지만, 조금더 기초적인 모습으로 바꿀게요

먼저 MaterialApp의 home 부분에 위젯을 넣어줘야합니다.

FirstBackSu() 라고 적었습니다.

 

(MaterialApp을 받는 MyApp 은 그냥 나뒀습니다.

이거는 바꿔도 되는데 바꿀필요가 없습니다.

뭐 원하시는분은 Good으로 바꾸던지 자기이름으로 바꾸던지 하시면됩니다)

 

그러면 빨강색으로 경고가 뜨게됩니다.

이렇게 되면 빌드도 할수 없습니다.

 

빨강색으로 뜨는 이유는 FirstBackSu 라는 위젯을 만든적이 없기 때문입니다.

세상에 아직 태어나지 않았죠.

그래서 FirstBackSu 라는 위젯을 만들어 줄겁니다.

 

아래에 class 라고 적은뒤에 FirstBackSu {} 이렇게 했습니다.

풀네임으로는

class FirstBackSu{} 죠

 

그런데 아직 경고가 뜹니다.

그 이유는 home 이라는 옵션에는 위젯을 넣어줘야하는데,

class FirstBackSu{} 이렇게 적으면 FirstBackSu 라는 하나의 개념덩어리 class는 탄생했지만, 이게 위젯이 아닙니다.

그래서 이걸 위젯으로 바꿔줄겁니다.

 

FirstBackSu 라는 내가 마음대로 지은 이름뒤에 extends StatelessWidget 을 붙여주었습니다.

 

이뜻은 FirstBackSu 라는 class가 StatelessWidget 처럼된다. 뭐 이런거라고 받아들이면됩니다.

Widget이라고 적혀있는걸로 보아서 아 위젯화 시켜주는구나 뭐 이런느낌이 들겁니다.

 

위에 home : 쪽을 보면 경고가 사라진것을 볼수있습니다.

그걸보면 위젯화가 됬다는것을 알수있습니다.

 

그런데 FirstBackSu 라는곳에 경고가 뜹니다.

 

그이유는 extends StatelessWidget 이라고하면,

어떤걸 좀더 적어줘야 하기때문입니다.

 

(extends의 규칙으로 override를 반드시 해줘라 

라는 외계규칙들이 있습니다.)

 

@override
Widget build(BuildContext context) {
return Container();
}

 

안에 이것을 적어줬습니다.

 

그러면 FirstBackSu 라는 녀석은 위젯이 된것입니다.

위젯에는 2가지 종류가 있는데 그중에 스테이트레스 위젯(StatelessWidget)이 된겁니다.

 

이 두가지 위젯의 차이는 나중에..

-스테이트레스 위젯(StatelessWidget)

-스테이트풀 위젯(StateFulWidget)

 

그러면 경고가 사라진것을 볼수가 있습니다.

그래서 빌드를 해보았습니다.

깜깜하게 아무것도 뜨지가 않습니다.

뭐 이상하다 싶어서 보니 return Container 라고 적혀있습니다.

 

FirstBackSu 라는 위젯을 만든 이유는 home : 여기에 주기 위함이었습니다.

근데 home은 페이지를 받아야된다고 했고, 페이지는 Scaffold 형태가 되어야 된다고 했었습니다.

그러니 저기 보이는 Container를 Scaffold 라고 고쳐줍니다.

 

 

이렇게 고치니 흰색페이지가 나옵니다.

 

그래도 검은색보다는 흰색이 나오니까 뭐라도 나온거 같습니다.

흰색이 나온건 그냥 페이지가 나온거기 때문입니다.

아무것도 안적힌 흰색 도화지죠.

 

그럼 여기서부터 좀 꾸며보겠습니다.

이제 Scaffold 를 알아볼 차례입니다.

4.Scaffold -appbar

Scaffold 는 기본적으로

 

1.appbar 와

2.body 라는 옵션을 가집니다.

 

물론 옵션들이 겁나게 많이 있습니다. 근대 지금 이야기할것은 아닙니다.

 

 

 

저기

appBar :

body : 

이라고 적어두었습니다.

 

먼저 appBar에 대한 이야기를 해보려고 합니다.

 

appBar는 우리가 앱을 실행하면 흔히 볼수 있는 이런 형태입니다.

 

인터넷에서 사진 한장을 퍼왔습니다.

맨위 바로 아래에 app bar 라고 적힌거 저겁니다.

그리고 그아래는 내용물들이고 그게 body 입니다.

 

페이지는 앱바를 가질수있지만 앱바 없는 페이지도 있습니다.

 

어쨋든 지금은 appBar라는 옵션을 살펴 보고 있습니다.

body부분은 일단 삭제해주시고 아래처럼 적어주세요.

 

 

appBar 라는 옵션에 AppBar() 라는 무엇인가를 적었습니다 그러니 저렇게 파랗게 나오네요

 appBar 옵션이 잘 들어간것입니다.

여기서 저기 노란색으로 AppBar() 라고 적힌것은 위젯입니다.

 

AppBar() 라는 플러터 내부 위젯이죠.

 

AppBar() 라는 위젯은 또 title 이라는 옵션을 가집니다.

title이라는 옵션에 뭔가 좀 적어볼려고 글씨를 치니 오류가 뜹니다.

 

 

아! 글씨를 적을때는 "text" 또는  'text' 이렇게 따옴표 같은거 넣어야된다는걸 어디서 어렴풋이 들은거 같습니다.

그래서 "text" 이런형식으로 한번 적어봤습니다. 

 

 

그래도 오류가 뜹니다.

 

결론부터 말씀드리자면 글씨를 쓰기위해서는 Text() 라는 위젯을 사용해야합니다.

Text() 위젯안에 "" 이 따옴표안에 글씨넣으니 저렇게 hello 라는것이 반영됩니다.('text' 이렇게 한개짜리 따옴표도 가능)

 

 

색상을 바꾸고 싶을때는

Text 위젯의 style 이라는 옵션을 사용합니다.

그 style이라는 옵션은 TextStyle이라는 위젯을 넣어줘야합니다.

그 TextStyle이라는 위젯은 color라는 옵션이 있는데 그 옵션은 또 Colors라는 위젯을 사용합니다. (그대로 믿지말기)

이렇게 플러터는

위젯을 계속해서 사용하고 그 위젯의 옵션이 위젯을 사용하고 그 사용된 위젯이 또 옵션이 있고 그 옵션으로 위젯을 사용하고..

그냥 쭉 내려가는 구조입니다.

그런데 

 

title: Text("hello",style: TextStyle(color: Colors.red),),

 

이 부분에서 color라는 옵션에 Colors 라는 위젯을 사용할줄 알았는데 좀 모양이 다릅니다.

지금까지 쭉 타고 내려오는 방식이면 Colors() 뭐 이런식으로 써야할텐데 말이죠.

 

그이유는

 

TextStyle() 위젯안에 color 라는 옵션은 Colors라는 위젯을 받는게 아니라 Colors라는 위젯화가 안된 일반 클래스를 받기 때문입니다.

 

그러면 이때되면 맨붕이 옵니다.

아 내가 어떤게 무슨 옵션이 있고, 이게 클래스를 받는지 위젯을 받는지 어떻게 아냐고!!

 

위젯위에다가 마우스를 올리고 command키를 눌러보시면

그 위젯이 가지고 있는 옵션들이 나오게 됩니다.

 

그리고 옵션에다가 또 마찬가지로 마우스 올리고 command를 누르면 이 옵션이

어떤 위젯을 받는지 나옵니다.(

특정 위젯을 지칭하는 경우도 있고 그냥 Widget이라고 적혀있는경우도 있고 그렇습니다.

어쨋든 Widget적혀 있다고 나오면 Widget형태의 어떤것을 넣어줘야겠죠

)

클래스를 받는지 위젯을 받는지는 안나오네요. 그건 경험치인듯

 

어째됬던 하는 도중에 Text위젯 까지 알게 되었습니다.

지금까지것을 정리해보면

 

MaterialApp(위젯)

 -home(옵션)

 

Scaffold(위젯)

 -appbar(옵션)

 

AppBar(위젯)

 -title(옵션)

 

Text(위젯)

 -style(옵션)

 

TextStyle(위젯)

 -color(옵션)

   -Colors(일반클래스)

 

5개의 위젯과

5개의 옵션

1개의 일반클래스

를 알게되었네요.

 

이렇게 초 기초적 설명에도 위젯과 옵션이 이렇게 많네요.

즉 이거는 뭐 따로 공책마련해서 공부하거나 외우는것이 아니라는 겁니다.

그냥 앱을 조금씩 제작하면서 모르는 옵션이나 필요한 옵션있으면 그때그때 구글에 검색해서 알아내시면됩니다.

예를들어 지금은 우리나 글자 굵기 같은 옵션을 안배웠는데,

 

그런것을 알고싶다. 이러면 구글에

flutter font굵기 나 flutter fontweight 라던지 그럴듯한 키워드를 검색하면 나오는데 그렇게 쓰시면 됩니다.

그런데 이거는 대략 느낌적인 느낌으로 글자 굵기는 대략 TextStyle위젯의 옵션으로 있겠구나 라는 생각을 할수 있습니다.

그럴때 TextStyle위젯에 마우스 올리고 그럴듯한 옵션찾아서 사용해보시면됩니다.

개발이 이런식으로 진행됩니다.

 

어쨋든 이렇게  Scaffold 의 기초 2가지 옵션인

appbar옵션과 body 옵션중에

appbar 옵션의 기초에 대해 알아보았습니다.

기초만 한것은, 기초까지만 하면 나머지는 검색으로 해결하고 알아가야되기때문이죠.

만약 강의로 한다면 appbar 그거하나만 해도 몇십개는 나오겠지만, 숙련되면 1분이면 이해할것 괜히 강의로 10분날릴필요가 없습니다.

color 주는 방법알았으면 fontWeight 주는 방법은 스스로 알아낼수 있다 이말이죠.

5.Scaffold - body

 

body 옵션을 보겠습니다.

body 옵션위에 마우스를 올리고 commend를 누르니(윈도우 컴퓨터는 컨트롤) Widget을 받는다고 나오네요.

그래서 Container 라는 위젯을 주고

Container위젯의 color라는 옵션에 초록색을 주었습니다.

그러니 appbar 이하의 모든공간의 색깔이 초록색이 되었습니다.

 

Container 는 하나의 봉지입니다.

 

이것도 하나의 개념덩어리 입니다.

웹에서는 div 개념과 같습니다.

 

Container 는 개념덩어리 이지만 크기를 지정할수 있습니다.

가로와 세로 넓이죠

 

이렇게 자기 공간을 차지 하게 되었습니다.

 

근데 봉지는 내용물이 있을때 그 의미를 가집니다.

봉지크기가 얼마든 색깔이 뭐든간에 뭘 담아야 의미가 있지 않겠습니까?

그래서 그 내용물이 child 라는 옵션을 통해 주게 됩니다.

child 라는 옵션은 Widget을 받습니다.

Text 위젯을 넣어줬습니다.

 

이렇게 내용물이 담기게 되었네요.

 

이렇게 이번포스팅을 마무리하고,

다음포스팅부터 Container 위젯을 좀더 알아본뒤 다른 기본 위젯들을 알아보도록 하겠습니다.