Flutter 강좌 02 - Flutter에서 StatefulWidget과 StatelessWidget의 차이 정리

Flutter에서 StatefulWidget과 StatelessWidget의 차이를 정리 했습니다. 

2022. 5. 21  최초작성

2022. 6. 6  StatefulWidget과 State 역할 관련 내용 설명 수정

다음 웹문서들을 참고하여 작성했습니다.

 

https://www.geeksforgeeks.org/what-is-widgets-in-flutter/?ref=lbp

 

https://itwise.tistory.com/29

 

https://docs.flutter.dev/development/ui/interactive 

 

https://www.geeksforgeeks.org/flutter-stateful-vs-stateless-widgets/

 

https://www.geeksforgeeks.org/difference-between-stateless-and-stateful-widget-in-flutter/

 

https://flutterbyexample.com/lesson/stateful-widget-lifecycle 

관련 포스트

 

MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경 만들기

https://webnautes.tistory.com/2027

 

Windows에서 Flutter 개발환경 만들기

https://webnautes.tistory.com/2057

Flutter에서 위젯(Widget)

플러터(Flutter)는 하나의 코드로 iOS와 Android 앱을 만들기 위한 Google의 프레임워크(framework)로 알려져있지만 실제론 Web, Desktop(Window, Linux, MacOS), Embedded까지 지원하는 멀티 플랫폼(multi-platform) 프레임워크입니다.

플러터는 위젯(Widget)를 기본 구성요소로  트리구조를 만들어 유저인터페이스(UI)를 구성합니다.

위젯은 구성(configuration) 및 상태(state)가 주어질 때 화면에 보여지는 뷰(view)가 어떤 모습이어야 하는지를 기술합니다.

플러터 애플리케이션의 각 요소는 위젯입니다. 화면에 보여지는 뷰는 앱을 만드는데 사용되는 위젯의 종류와 어떻게 위젯을 배치하는지 등 에 따라 달라집니다. 

 

Flutter 위젯은 제공하는 기능에 따라 14가지 카테고리로 나뉩니다. 

 

• Accessibility : 플러터 애플리케이션에 더 쉽게 액세스할 수 있도록 합니다. 
• Animation, Motion : 위젯에 애니메이션을 추가합니다.
• Assets, Images, Icons : 이미지 및 아이콘 표시를 담당합니다. 
• Async : 비동기 기능(async functionality)을 제공합니다.  
• Basics : 모든 플러터 애플리케이션을 만들시 필수적으로 필요한 위젯들입니다. 
• Cupertino : iOS에서 디자인을 담당하는 위젯입니다.
• Input : 입력 기능을 제공합니다.
• Interaction Models : 터치 이벤트 관리 및 사용자에게 다른 뷰로 전환을 제공합니다. 
• Layout : 위젯의 배치 구성을 담당합니다.
• Material Components : 구글의 머티리얼 디자인을 따르는 위젯 모음입니다.
• Painting, effects: 레이아웃이나 모양을 변경하지 않고 자식 위젯에 시각적 변경 사항을 적용하는 위젯 모음입니다. 
• Scrolling :  위젯에 스크롤 기능을 추가합니다. 
• Styling : 앱의 테마, 응답성, 크기를 다룹니다.
• Text : 스타일이 적용된 텍스트를 출력합니다.

State

State는 위젯의 상태를 저장하며 위젯이 생성될 때(위젯이 화면에 그려질 때)  위젯의 속성을 유지하는 객체입니다. 

예를 들어 CheckBox 위젯을 클릭하여 체크박스의 상태를 변경하면  변경된 상태는 State 객체에 유지됩니다. 

 

stateful 위젯과 stateless 위젯

플러터에서 위젯은 상태를 저장하는 stateful 위젯 또는 상태를 저장하지 않는 stateless 위젯 중 하나입니다.  예를 들어 사용자가 위젯과 상호 작용할 때 위젯의 상태가 변경되면 stateful 위젯이며 위젯의 상태가 변경되지 않으면 stateless 위젯입니다.  

 

Icon, IconButton, Text 같은 stateless 위젯은 사용자의 입력이나 데이터 수신 등에 의해 발생하는 이벤트에 의해서 상태가 변경되지 않으며 StatelessWidget의 하위 클래스입니다.

 

Checkbox, Radio, Slider, InkWell, Form, TextField 같은 stateful 위젯은 사용자의 입력이나 데이터 수신 등에 의해 발생한 이벤트에 의해서  위젯의 모양이 변경될 수 있으며 StatefulWidget의 하위 클래스입니다.

 

StatefulWidget를 상속받은 클래스는 화면이 바뀔때마다 재생성되기 때문에 위젯의 상태는 State를 상속받은 클래스가 담당하도록 합니다. 위젯의 상태는 슬라이더의 현재 값이나 체크박스 선택 여부와 같이 변경할 수 있는 값으로 구성됩니다. 

 

state 클래스에는 위젯  상태와 build() 메서드가 포함됩니다.  사용자의 입력이나 데이터 수신 등에 의해 발생한 이벤트로 위젯의 상태가 변경되면 상태 객체는 setState()를 호출하여 프레임워크가 위젯을 다시 그리도록 합니다.

첫번째 Flutter 강좌에서 실행시켜보았던 간단한 예제 프로그램을 잠시 살펴보겠습니다.

 

Flutter 강좌 01 - 개발환경 만들기 및 앱 실행하는 방법

https://webnautes.tistory.com/2060

 

오른쪽 아래의 원형 버튼을 클릭하면 숫자가 증가하는 예제였습니다.

문자열을 출력하고 있는 Text 위젯은 한번 화면에 출력되면 변경되지 않으므로 stateless 위젯입니다. 숫자를 출력하는 부분은 오른쪽 하단의 원형 버튼을 클릭할 때마다 값이 증가하므로 stateful 위젯입니다. 

 

Stateless Widget

 

Icon이나 Text처럼 일단 생성되어 화면에 보여지고 나면 위젯의 상태를 변경할 수 없는 위젯을 stateless 위젯이라고 합니다. 

이벤트나 사용자와의 상호작용에 따라 위젯의 상태를 변경할 필요가 없습니다. 따라서 위젯의 상태를 따로 저장할 필요가 없습니다.

Stateless 위젯의 기본 구조입니다. build() 메서드에서 화면에 보여줄 위젯을 리턴합니다. 

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container();   } }

stateless 위젯의 클래스 이름은 runApp 함수에서 호출되는 MyApp입니다. StatelessWidget 클래스를 상속받습니다.

 

MyApp 클래스 내에서 build 함수가 재정의되고 BuildContext를 파라미터로 사용합니다.

BuildContext는 위젯 트리에서 위젯을 찾는 데 사용되므로 모든 위젯마다 고유합니다..

 

build 메소드는 Container 위젯안에 화면에 보여줄 위젯을 포함시켜 리턴합니다.  Stateless 위젯에서 build 함수는 한 번만 호출되어 화면에 위젯을 출력합니다. 

Stateful Widgets

 

CheckBox, RadioButton 처럼 생성되어 화면에 보여진 후에도 위젯 상태를 변경할 수 있는 위젯을 stateful 위젯이라고 합니다. 위젯의 상태는 여러 번 변경가능합니다. 

이벤트나 사용자와의 상호작용에 따라 위젯의 상태를 변경할 수 있습니다. 따라서 위젯의 상태를 따로 저장할 필요가 있습니다.

 

플러터는 StatefulWidget 위젯을 생성할 때 위젯 상태를 저장할 State 객체도 생성합니다.

StatefulWidget 위젯은 State 객체를 이용하여 위젯을 변경합니다. State 객체는 해당 위젯에 대한 모든 변경 가능한 상태가 유지되는 곳입니다. 

 

Stateful 위젯의 기본 구조입니다. createState()를 재정의하고 State 객체를 리턴합니다. 

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget {   @override   _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> {   @override   Widget build(BuildContext context) {     return Container();   } }

Stateful 위젯의 클래스 이름은 runApp 함수에서 호출되는 MyApp입니다. StatefulWidget 클래스를 상속받습니다. 

 

MyApp 클래스에서 createState 함수를 재정의합니다. createState() 함수는 트리의 주어진 위치에서 해당 위젯을 변경 가능한 상태로 만드는 데 사용됩니다. 이 메서드는 state를 상속받은 클래스에 대한 인스턴스를 리턴합니다.

 

_MyAppState 클래스는 State 클래스를 상속받습니다. 위젯의 모든 변경 사항을 관리합니다. BuildContext를 파라미터로 사용하는 build 메소드가 재정의됩니다. build 메소드는 화면에 보여줄 위젯을 Container 위젯에 담아 리턴합니다. 

 

stateful 위젯이기 때문에 build 메소드가 여러 번 호출될 수 있으며, 호출 될때마다 위젯 상태의 변경사항을 반영하기 위해 위젯을 다시 생성하여  화면에  출력합니다.