Flutter로 프로젝트 폴더는 어떻게 구성되어 있는가? main은 무엇을 담고 있지? Scaffold는 무엇인데?
이제 드디어 무언가를 해보는 날이다. 먼저 new flutter project를 해본다.
프로젝트 생성을 해보았는가? 이 복잡한 구성은 무엇인지 알아보자.
그리고 두 번째로는 main widget을 파헤치며 마지막으로 scaffold에 대해서 알아보도록 한다.
Project
새로운 프로젝트를 작성하면
main.dart라는 파일에 기본적으로 숫자를 카운팅 해주는 애플리케이션이 포함되어 나온다.
우리가 앱을 만들 때 lib폴더의 main.dart 에서 하기에 기억해두자.
그리고 'pubspec.yaml'. 이놈도 앱을 만들 때 자주 사용하기에 알아보자.
pubspec.yaml은 프로젝트의 메타데이터를 정의하고 관리한다.
프로젝트의 버전, 사용 환경, 다트의 버전이나 디펜던시나 서드파티의 라이브러리를 정의한다.
잘 모르겠지 않는가? 나중에 이 부분을 사용할 때 다시 설명할 테니 이번엔 그렇구나 하고 넘어간다. 걱정하지 말아라.
'앱을 만들 때 여러 가지 중요한 내용을 등록한다' 정도로만 알고 넘어가자.
main.dart
이제 main.dart를 열어보자. 아 뭔가 심란하다. 알 수 없는 내용들이 너무 많다.
모두 지워주고 dartpad처럼 무의 상태에서 하나하나 만들어가며 알아봐도 된다.
먼저 futter앱을 만들 때는 flutter material이라는 라이브러리를 가져와야 flutter framework 즉, sdk에 포함된, 기본 위젯과 material 테마, 디자인들을 사용할 수 있다.
material design이란 모바일, 데스크톱 그 외 다양한 디바이스를
아우르는 일관된 디자인을 위해서 구글이 제공한 가이드라인이다.
그럼 material 라이브러리를 추가해보자.
쉽다 쉬워.
dart에서와 같이 main() 함수로부터 시작한다. fat arrow(=>)을 통해 간결하게 함수를 호출할 수 있다.
'runApp()'는 반드시 widget을 argument로 가져와야 한다.
간단히 말하면 runApp은 () 안에 widget을 argument로 가져와야 한다.
const MyApp()이라는 widget을 집어넣어 보자.
flutter 2.5 버전 이후로는 static widget앞에 const 키워드를 붙여줘야 한다.
아래 사진은 const를 넣지 않았기에 빨간 밑줄로 에러가 나온 것이다.
MyApp은 flutter에서 지정한 게 아니고
custom widget이기에 이름은 바꿔도 된다.
MyApp이라는 이름을 봤을 때 첫 문자가 대문자이니 Class란 것을 알 수 있다.
최상위 widget이 될 MyApp widget은 최초로 레이아웃을 빌드하는 역할, 즉 뼈대를 만드는 역할만을 하기에 어떠한 변화가 없는 정적인 widget이다. 그렇다면? statelesswidget인 것이다.
이놈을 쉽게 부르려면? 'stl' 입력 후 나오는 놈을 선택해보자.
이 화면이
짠! 이렇게 간단하게 나온다. ㅠ 감동
첫 번째 빨간 박스에 무언가 쓰고 싶다는 생각이 들지 않는가? 난 아니었다.
그곳에 Class 이름인 MyApp을 쓰라는 이야기다.
모든 custom widget은 또 다른 widget을 리턴하는 build라는 함수를 갖고 있다.
여기선 Container()라는 widget을 리턴하고 있다.
이제 최소한의 틀을 만들었으니 본격적으로 디자인을 해야 한다.
앱을 만들기 위해서 material lib를 추가했었는데 이를 활용하기 위해 materialApp을 불러와야 한다.
Container()를 대치해서 넣어주자.
이로써 futter가 제공하는 디자인을 이용할 기반을 닦았다.
이 MaterialApp widget안에 모든 widget을 넣어주면 된다.
이제 몇 가지 세팅을 해보자. flutter의 모든 widget은 argument를 가져야 한다.
먼저 app을 총칭하는 기본 타이틀을 만들어보자.
타이틀과 테마를 지정해주고 기본 테마색을 blue로 지정해줬다. 'blue' 글자 위에 마우스를 올려두니 견본 색을 보여준다.
진짜 너무 똑똑해 감동이야 ㅠ
// ThemeData라고 쓰여있는 거 보이는가? 자동으로 widget의 끝을 알리는 기능이다.
최고다... 진짜 개발자 형들 최고야. 세심해
이제 home을 만들어 본다.
home은 앱이 실행됐을 때 가장 먼저 보이는 곳이다. 나는 MyHomePage()로 만들었다.
이제 MyHomePage widget을 만들어보자
이렇게 custom widget을 만들 때는 stateless 인지 stateful로 할 것인지 결정하고 해야 한다.
MyHomePage() 내에 data를 받거나 터치를 하거나 했을 때 변화가 생겨야 하는 게 하나라도 있다?
그러면 stateful로 가는 거다. 쉽다.
하지만 오늘은 간단한 문자만 출력할 것이니 stl로 간다.
Scaffold()
두 번째 줄 Key부분은 쓰지 않을 것이니 지워줘도 된다.
Scaffold()는 목을 메다는 교수대의 의미도 있지만
https://terms.naver.com/entry.naver?docId=621056&cid=42322&categoryId=42322
비계
공사 시공상 설치하는 가설물의 일종. 작업 바닥이나 작업원 통로로서 사용한다. 목적에 따라 외부 비계 · 천장 비계 · 철골 달비계 등이 있고, 이동식과 고정식이 있다. 구성에 따라 쌍줄비계
terms.naver.com
Scaffold : 앱 화면에 다양한 요소들을 배치하고 그릴 수 있도록
도와주는 도화지 혹은 기초가 되는 구조물이라고 생각하라.
우리가 app을 생각했을 때 가장 먼저 나타나는 게 상단에 appbar다. 당연히 scaffold도 appbar에 관한 argument가 있다.
이렇게 appbar widget을 써줬다. 이제 우리는 Appbar내에서 appbar만을 위한 기능과 디자인들을 구성할 수 있다.
이번에는 타이틀만 만들어 보겠다.
잠깐! MaterialApp의 타이틀과 헷갈리는 사람? 나야 나
MaterialApp의 title은 앱을 총칭하는 이름이고 appBar의 title은 AppBar에 출력되는 title이라는 것.
스마트폰 화면에 뜨니까 이제 좀 할만하지 않은가?
이전에는 dartPad에 결과물만 출력되는 것만 봐서 지치는 감도 있었는데 이제 앱 개발자 같다.
우린 화면 중앙에 정렬할 것이니 Center()를 사용하고 이 놈은 child widget을 갖고 있다.
그 child에 Column() Widget을 불러와서 자기 안에 존재하는 모든 놈들을 세로로 배치할 수 있게 한다.
이제 생각해보자. Column을 하나만 하진 않을 거 아닌가? 그렇다면 이 Column 내에서 ch를 입력하면 children이 나온다.
거기까지 해보자.
이제 세로 정렬할 children에 Text widget을 넣을 것이다. 3개를 넣어봤다.
그런데 빨간 밑줄이 뜨면서 오류가 생긴다. flutter에서는 widget이 끝날 때마다 ', ' 쉼표로 알려줘야만 한다.
마무리
오늘은 project 폴더의 구성, main widget, scaffold를 알아보았다.
완전 기본 중의 기본을 알아보았는데 이런 것들에 대해 알아보지 않고 넘어갔으면
결국 또 이걸 하러 오게 될 것이다 라는 생각이 든다.
다음 시간에는 뭔가 색상도 들어가고 기능도 더 알아보는 시간이다.
오늘보다는 더 재밌을 거 같다.
확실히 dart보다는 재미있다.
틀린 점이나 궁금한 점이 있으면 댓글로 알려달라.
입문자라 아무것도 모르고 이상한 소리를
썼을 가능성이 매우 매우 농후하다.
궁금한 점은 댓글로 토론하며 정답을 찾아보자.
코딩 셰프님의 강의를 보고 공부 중입니다.