Flutter Stateless와 Stateful Widget 개념과Life Cycle, 대표 Widget(MaterialApp, Scaffold)

Widget의 종류: Stateless Widget vs Stateful widget

Flutter를 사용하다 보면 화면에 무엇인가 표시하는 경우 모든 것을 Widget으로 처리합니다. Flutter의 Widget은 React의 Component DOM tree와 유사한 개념이며, 상태 관리에 따라서 상태 변경이 가능한 Stateful Widget과 상태 변경이 불가능한 Stateless Widget으로 구분할 수 있습니다.

Statless widget: State 변경이 불 가능한 위젯, 화면을 Rendering 후 데이터의 변경이 없음, React Props와 유사 개념
Stateful widget: State 변경이 가능한 위젯, 화면을 Rendering 후 데이터에 의해서 Data를 표시행 하는 경우. 사용자와 상호 작용 React State와 유사 개념

프로젝트 생성하는 기본 코드를 예를 들면, 중간에 Text Widget은 Stateless Widget이고 하단의 숫자는 Stateful Widget입니다. Text Widget의 String은 한번 렌더링 후에는 값을 변경하지 않지 않아 Stateless Widget이고, 숫자 6은 하단 FAB의 '+' 버튼을 누를 때마다 값이 하나씩 증가하고, 이를 _counter 변수에 저장하여 표시하기 때문에 StateFulWidget입니다.

IDE에서 Stateless / Stateful Widget 코드 자동 생성 및 설명

Android Studio와 Visual Code에서 'st'를 입력하면 code snippet을 생성할 수 있습니다. 자동 코드를 생성 후에 Class 이름을 입력하면 관련된 코드와 함께 업데이트됩니다.

StatelessWidget은 StatelessWidget을 상속하고, build() 함수를 @override 하고 있습니다. build() 함수는 parameter로 context (context = 부모 Wiget의 정보임)를 받고 있, Wiget 형을 return하게 되어 있습니다. build() 함수에서 다양한 Widget을 사용해서 각 App 고유의 GUI를 구성하게 됩니다. React로 비유하자면, React Component의 return 함수를 JSX 형식으로 return하는 것과 동일하다고 보면 됩니다.

StatefulWidget은 StatefulWidget 을 상속 받아서 _createState() 함수를 @override하고 있습니다. _createState() 함수는 _StatefulWidgetSampleState() Class를 생성하고, 이는 State<StatefulWidgetSampleState>을 상속 받아 build() 함수를 @override 합니다. 실질적으로 State를 관리는 _StatefulWidgetSampleState class에서 진행합니다. 즉, StateWidget은 State 변수를 StatefulWidgetSampleState() 에서 선언하고 SetState() 함수를 호출해서 State를 업데이트 합니다. 즉, 특정 변수가 변경 시 해당 Widget을 다시 Rendering 하는 역할을 합니다.

Stateless / Stateful Widget 코드 자동 생성 및 설명

이미 생성한 StatelessWidget을 Stateful Widget으로 변경하는 방법은 Wiget 이름을 선택하고 "Convert to StatefulWidget" 메뉴를 실행하여 자동으로 변경할 수 있습니다.

Stateless Widget을&nbsp; Stateful Widget으로 코드 자동 생성

출처: https://www.youtube.com/watch?v=pDzQGolJayE

Widget Life Cycle

Flutter에서 Widget의 Life Cycle은 아래 잘 설명되어 있습니다. (출처1, 출처2) Youtube 동영상도 잘 설명되어 있으니 참고하세요.

Stateless Widget에서는 Constructor 호출 후 build() 함수를 호춣하여 UI 를 구성합니다. StatefulWidget은 Constructor에서 createState() 호출하고 이후에 initState() 호출 후 build() 함수를 호출합니다. 만일 State를 변경하면 setState()에서 build()를 다시 호출하고 didUpdateWidget()의 return에 따라서 build() 호출 여부를 결정합니다. didUpdateWidget() 함수를 사용해서 rendering여부를 결정할 수 있어, 성능 최적화하를 진행하는 경우 didUpdateWidget() 함수를 @override 함수를 구현할 수 있습니다.

Widget Life cycle: (출처: https://flutter-lifecycle-widgets.medium.com/life-cycle-of-widgets-in-flutter-618b72a7f3f1)

createState(): When the Framework is instructed to build a StatefulWidget, it immediately calls createState()
mounted is true: When createState creates your state class, a buildContext is assigned to that state. buildContext is, overly simplified, the place in the widget tree in which this widget is placed. Here's a longer explanation. All widgets have a bool this.mounted property. It is turned true when the buildContext is assigned. It is an error to call setState when a widget is unmounted.
initState(): This is the first method called when the widget is created (after the class constructor, of course.) initState is called once and only once. It must call super.initState().
didChangeDependencies(): This method is called immediately after initState on the first time the widget is built.
build(): This method is called often. It is required, and it must return a Widget.
didUpdateWidget(Widget oldWidget): If the parent widget changes and has to rebuild this widget (because it needs to give it different data), but it's being rebuilt with the same runtimeType, then this method is called. This is because Flutter is re-using the state, which is long lived. In this case, you may want to initialize some data again, as you would in initState.
setState(): This method is called often from the framework itself and from the developer. Its used to notify the framework that data has changed
deactivate(): Deactivate is called when State is removed from the tree, but it might be reinserted before the current frame change is finished. This method exists basically because State objects can be moved from one point in a tree to another.
dispose(): dispose() is called when the State object is removed, which is permanent. This method is where you should unsubscribe and cancel all animations, streams, etc.
mounted is false: The state object can never remount, and error will be thrown if setState is called.

대표 Widget - MaterialApp vs CupertinoApp

Flutter에서 Entry 함수는 main()이고, runApp() 함수에서 Widget layout을 화면에 필치고 screen에 layout을 canvas에 그리는 함수 입니다. MyApp()은 App 전체를 감싸는 Widget으로 build() 함수에서는MaterialApp() Widget을 사용합니다.

MaterialApp은 Google의 Material UI Component 를 구현한 것입니다. Android UI가 Google Material UI를 구현한 것이고, Google이 Flutter에도 동일한 UI Component lib로 구현한 것입니다.

main.dart파일에서 import 'package:flutter/material.dart';
pubspec.yaml 파일에서 uses-material-design: true 로 설정

CupertinoApp은 Flutter에서 I-OS UI를 구현할 때 사용할 수 있습니다. 소스 코드는 Google Code Lab의 "Create Cupetino App"을 확인해주세요.

main.dart파일에서 import 'package:flutter/cupertino.dart';
참고 소스: https://codelabs.developers.google.com/codelabs/flutter-cupertino#0

대표 Widget - Scaffold

Scaffold widget은 Material UI의 대표적인 Layout입니다. 화면 최 상단위 App Bar, 본문 body, 하단의 Menu, Float Action Button 으로 구성할 수 있습니다. Scaffold에서는 appBar, body, floatingActionButton에 관련된 Widget을 설정할 수 있습니다.