flutter & dart - Stateless Widget , Stateful Widget , Scaffold , Children 매개변수와 Child 매개변수 차이 , 위젯 위에 위젯

플러터 위젯 (Flutter Widget)

• 플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있다. 
• 플러터 프레임워크는 많은 기본 위젯을 제공하며, 앱 개발자가 직접 위젯을 만들 수도 있다.
• 위젯은 현재 주어진 상태(State)를 기반으로 어떤 UI를 구현할 지를 정의한다.
• 위젯의 상태(State)가 변경되면 기존 상태의 위젯과 비교해 최소한의 변경사항을 산출해 UI를 화면에 다시 그려준다.
• 위와 같이 최소한의 리소스를 이용해 UI 변경을 함으로 최대 120FPS까지 높은 퍼포먼스를 산출할 수 있다.
•  

플러터 위젯 (Flutter Widget) 을 크게 나뉘어 보자

대표적으로 다음과 같은 기본 위젯들이 있다.

• 레이아웃 : Row, Column, Scaffold, Stack
• 구조 : Button, Toast, MenuDrawer
• 스타일 : TextStyle, Color, Padding
• 애니메이션 : FadeInPhoto, Transform
• 위치 & 정렬 : Center, Padding

<이미지 출처 : https://stackoverflow.com/questions/49164817/what-is-an-element-in-flutter>

 

Widget은 크게 두 가지로 나눌 수 있다.

1. Stateless Widget
2. Stateful Widget

이름에서 알 수 있듯이, 둘의 차이점은 "State"를 가지는지의 여부이다.
State는 Widget의 lifecycle(생명주기)의 상태를 나타내는 값이다.

Stateless Widget

먼저 Stateless Widget은 앱이 동작하면서 변하지 않는 Widget을 말한다.
가장 기본적인 Widget의 형태이며, 많은 기본 Widget들이 이 형태를 가진다.

예를 들어 Text Widget, Image Widget, Row, Column 등의 기본 위젯들이 전부 Stateless Widget이다.

이 위젯들은 처음 할당 받은 모습대로 UI가 그려진다.
이후에 앱 생명주기 동안 변경되지 않는다.

<이미지 출처 : https://labs.flinters.vn/frontend-developer/flutter-rules-the-world-widget-stateful-widget-and-stateless-widget/>

Stateful Widget

Stateful Widget은 State라는 변경사항을 통해 생명주기를 갖는 Widget을 말한다.
동적으로 변경되는 값에 따라 UI를 변경 시켜주기 때문에, 개발에 필수적인 위젯이다.

Stateful Widget을 정확히 이해하기 위해서는 Widget의 생명 주기를 먼저 정확히 이해해야한다.

Widget 생명 주기

State를 갖는 Widget의 생명주기를 일련의 과정으로 나타내면 다음과 같다.

1. 상태 클래스의 생성자가 호출된다. (상태 초기화 전)
2. 위젯이 마운트 된다.
3. initState가 호출된다. 이 method은 최초 한 번만 실행되며, 초기화는 역할을 한다.
4. didChangeDependencies가 호출된다. 여기서 InheritedWidget과 관련된 초기화가 진행된다.
5. 이때 위젯이 dirty 상태가 되기 때문에 다시 빌드하고 clean 상태가 된다. (dirty, clean은 State 객체가 다시 빌드 되야하는지 여부를 나타내는 상태 이름이다.)
6. 새로운 이벤트가 일어날 때까지 대기한다.
7. 앱을 사용하다가 setState method가 호출되면 다시 dirty 상태가 된다.
   setState가 호출 되지 않았더라도, dirty가 되는 경우가 2가지 있다.

• 부모 위젯에서 해당 위젯을 다시 빌드하도록 요청한 경우
  이러면 didUpdateWidget이 호출 되고, 이때에도 동일하게 dirty 상태가 된다.
• 부모위젯이 아닌 InheritedWidgetdp dependency가 있는 경우에는 4번과 같이 didChangeDependencies가 호출되어 dirty 상태가 된다.

1. dirty 상태가 된 위젯을 5번과 동일하게 다시 build가 되어 clean으로 돌아오면서 변경된 값을 UI에 반영한다.
2. 마지막으로 위젯이 더 이상 사용되지 않게 되면 dispose 되면서 생명 주기가 마무리 된다.

 

<이미지 출처 : https://www.flutterclutter.dev/flutter/basics/statelesswidget-vs-statefulwidget/2020/1195/>

이런 생명 주기를 갖는 위젯을 Stateful Widget이라고 한다.
동적으로 변하는 값을 나타내야할 때 사용한다.

기본 위젯 중 애니메이션 관련 위젯, TextField, ... 등이 Stateful Widget이다.

Scaffold

기본 위젯 중 오늘은 Scaffold 위젯에 대한 설명을 간략하게 하고자 한다.

앱의 구조는 기본적으로 대부분 비슷하다.
OS에 따라 기본 디자인이 달라지긴 하지만, 기본적을 가지고 있어야 하는 요소는 비슷하다.

이렇게 매번 필요한 요소를 화면&앱마다 개발하기에는 번거롭다.
이런 번거로움을 줄이기 위해서 기본으로 제공하는 Widget이 Scaffold다.

또한 스타일을 커스마이즈 할 수 있기 때문에, 다양한 앱에서 사용이 가능하다.
기본적인 스타일은 구글 스타일(안드로이드)적인 모습이다.

*대표적으로 다음과 같은 내용이 있다.

1. AppBar
화면 상단의 고정 되어 있고, 현재 화면의 기본 상태와 이름을 알려주는 용도로 사용된다.

2. Body
화면의 주요 내용을 담는다.

3. 플로팅 액션 버튼
화면 위에 떠있는 버튼으로 사용자가 엄지로 컨트롤하기 쉬운 위치에 있어 조작하기 편하다.

4. drawer
좌우 미끄러지 듯 등장하는 UI. 설정 및 정보 관련 화면에 많이 사용된다.

이외에도 endDrawer, persistentFotterButtons, bottomNavigationBar, bottomSheet, ... 등등 많은 프로퍼티가 있다.

이 프로퍼티들은 전부 @required가 아니며, 원하는 부분만 커스텀해서 사용이 가능하다.
원하는 프로퍼티를 생성자에서 지정해주면 된다.


이런 Scaffold와 같은 미리 지정된 위젯을 잘 활용하면 편리하게 UI 개발을 진행할 수 있다.

<링크 출처 : https://livebook.manning.com/concept/flutter/scaffold>

 

대표적인 플러터 위젯(Widget)

자식을 하나만 받는 child 매개변수를 사용하는 위젯

Container 위젯

자식을 담는 컨테이너 역할을 하며 배경색, 너비, 높이, 테두리 등의 디자인을 설정할 수 있다.

 

GestureDetector 위젯 

자식 위젯을 통해 제스처 기능을 인식하는 위젯으로, 탭이나 드래그, 더블클릭과 같은 제스처 기능을 자식 위젯에서 인식되었을 때 함수를 실행할 수 있다.

 

SizeBox 위젯

높이와 너비를 지정하는 위젯으로 디자인적 요소를 적용할 수는 없다. const 생성자로 선언할 수 있어 퍼포먼스 측면에서 효율적이다.

 

 

다수의 자식을 입력받는 children 매개변수를 사용하는 위젯

Column 위젯

children 매개변수로 입력받은 모든 위젯들을 세로로 배치한다.

 

Row 위젯

children 매개변수로 입력받은 모든 위젯들을 가로로 배치한다

 

ListView 위젯

children 매개변수로 입력받은 다수의 위젯이 화면을 벗어나게 되면 스크롤을 가능하게 한다. 리스트를 구현할 때 사용

출처 : https://jaceshim.github.io/

 

---

 

Children 매개변수와 Child 매개변수 차이

플러터는 위젯을 트리의 형태로 하위에 계속 추가하며 UI를 구성한다.

 

children 매개변수와 child 매개변수는 위젯에 하위 위젯을 추가할 때 사용하며, 이름에서 단수형과 복수형을 알 수 있듯이, children은 위젯을 여러 개를 추가할 수 있고, child는 위젯을 한 개 추가할 수 있다. 

 

대부분 위젯에서 매개변수로 children 또는 child 중 하나를 선택해서 사용한다.

 

 

children 매개변수는 위젯들을 리스트로 입력할 수 있다. 리스트에 입력된 순서로 화면에 생성되며 리스트 안에는 원하는 만큼 위젯을 추가할 수 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('나는'),
              Text('children이야')
            ],
          ),
        ),
      ),
    ),
  );
}

 

위젯 위에 위젯 : ALT + ENTER (Wrap the widget)

위젯 안에 위젯을 쌓을 수 있다.

위와 같이 여러 위젯이 있는것을 확인할 수 있다.