[ FLUTTER ] 플러터 시작, 따라하며 Widget 개념 익히기

 

플러터의 가장 기본인 StatelessWidget과 StatefulWidget 클래스,
그리고 Widget에 대해서 알아보겠습니다.

 

---

1. StatelessWidget, StatefulWidget

Widget을 들어가기에 앞서 StatelessWidget을 사용하여 위젯을 그려낼 지, 아니면
StatefulWidget을 사용하여 위젯을 그려낼지 결정한 후에 extends하면
Widget을 사용할 수 있으며, 레이아웃을 그려낼 수 있는 틀이 만들어집니다.

StatelessWidget과 StatefulWidget의 차이는
화면 갱신이 필요하냐 안하냐에 따라 결정이 되는데
버튼 클릭에 의해서 어떠한 값이 변경된다고 가정했을 때,
변경된 값을 화면에 다시 보여주어야하기 때문에 StatefulWidget을 사용해야하며
변경이 필요하지 않고 단순히 보여지는 역할이 전부라고 한다면 StatelessWidget을 쓰는 것이 적절합니다.)

 

main.dart를 직접 만들어보면서 구조를 익히기 위해
test.dart라는 파일을 만들고 여기에 StatelessWidget을 생성해보도록 하겠습니다.

예시 이미지처럼 빈 화면에 stl이라고 입력하면 자동완성을 통해 StatelessWidget을 생성할 수 있습니다.

이렇게 import가 되어있지 않을 때에는
단축키 Command + . 키를 통해 import를 시켜줄 수 있으며
위에 3가지 항목 중에서 cupertino, widgets의 기능을 모두 포함하고 있는 material.dart를 import 합니다.

---

2. 앱의 시작과 함께 MaterialApp 위젯 사용하기

void main()함수를 선언하여 앱의 시작을 MyWidget으로 지정합니다.
MyWidget에 있는 build메소드 부분이 처음으로 앱을 열었을 때 보여지는 화면 부분입니다.
이제 앱의 기본적인 세팅을 해야하는데 MaterialApp위젯을 사용합니다.

MaterialApp Widget?
MaterialApp위젯은 조금 특별하게도 레이아웃이 아닌 앱의 기본적인 설정들을 잡아주는 역할이므로
메인이 되는 부분에 최초로 1회만 선언해두면 다른 페이지에서 재사용할 필요가 없습니다.

만약 GetX Controller의 플러그인을 사용할 것이라고 한다면
GetX를 import하여 MaterialApp -> GetMaterialApp 위젯으로 변경하여 사용합니다.

MaterialApp위젯의 속성 중
title 속성에는 앱의 이름을, theme에는 앱의 메인 Color 또는 Font 등을 지정하며
home 속성부터 화면을 그려내는 위젯을 추가합니다.

저처럼 home을 Container위젯으로 감싸고 color: Colors.blue를 주게 되면
왼쪽 이미지처럼 화면 전체가 파란색으로 보여질 것입니다.

그런데 여기서 두가지 변경할 점이 있는데요
우측 상단에 DEBUG배너를 지우기 위해 MaterialApp의 속성을 추가해야 하는데
debugShowCheckedModeBanner: false,  속성을 추가합니다.

 

---

3. Widget으로 레이아웃 표현하기

레이아웃을 표현하는데 사용하는 위젯은 Container, Padding, Align, Center, SizedBox, Column, Row, Stack, Position ... 등 다양하게 있는데
위젯들을 하나씩 살펴보겠습니다.

Padding은 하위 속성으로 padding과 child 속성을 사용할 수 있는데 한마디로 표현하자면 padding 값을 줄 때 사용합니다.

Align은 alignment와 child 속성이 있는데 왼쪽, 중앙, 오른쪽 정렬을 할 때 사용하며

Center위젯은 child 위젯을 가운데 정렬할 때 사용합니다. (Align위젯과 비슷하여 취향에 맞게 사용합니다.)

SizedBox위젯은 width, height, child 속성이 있어 위젯의 크기를 지정할 때 사용합니다.

그리고 이 모든 위젯의 속성을 한번에 담고 있는 Container 위젯이 있으며 color 속성을 이 위젯에서 추가로 사용할 수 있습니다.

Container위젯에는 모든 속성이 포함되어 있기 때문에 사실은 위에 설명드린
Padding, Align, Center, SizedBox 위젯에 대해서 따로 공부할 필요는 없을 것 같습니다.
다만 Container위젯을 사용하다보면 자연스럽게 터득하게 될 것이고
HTML의 시멘틱 태그인 section article figure를 사용하냐, div를 사용하냐 정도로 이해하면 될 것 같습니다.


그리고 이제부터는 child가 아닌 children 속성이 들어간 위젯에 대해서 알아보겠습니다.
children 속성을 담고 있는 위젯은 대표적으로 Column, Row, Stack 위젯이 있는데

Column은  위에서 아래로 배치할 때 사용하는 위젯이며
Row는 가로로 배치할 때,

Stack위젯은 위에 겹칠 때 사용합니다.