Flutter 의 위젯에 대한 개념과 StatefulWidget 생명주기, 컨트롤러, 빌더

Flutter 프로젝트를 생성하면 아래 같은 기본 코드를 볼 수가 있다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Flutter는 위젯 기반 아키텍처를 갖춘 프레임워크로, 모든 것은 위젯으로 구성된다.

Flutter 애플리케이션의 UI는 작은 위젯들의 조합으로 만들어지고,

위젯은 간단한 버튼이나 텍스트와 같은 기본 구성 요소부터 복잡한 레이아웃 구조까지 다양하다.

Flutter 위젯의 기본 개념

위젯의 계층 구조

• Flutter 앱은 위젯 트리로 구성된다. 위젯 트리는 부모 위젯과 자식 위젯의 계층 구조를 형성.

  
  

위젯의 유형

• StatelessWidget: 상태가 없는 위젯으로, 생성된 후 상태가 변하지 않는 위젯.

• StatefulWidget: 상태를 가지며, 상태가 변경될 때마다 다시 렌더링되는 위젯.

위젯의 종류

위젯의 종류가 상당히 많다.

Widgets | Flutter

• Text, ElevatedButton, Image, Icon 등.

• Row, Column, Stack, GridView, Container, Padding, Align, Card 등

• GestureDetector, InkWell 등.

• Navigator, Scafflod, FadeTransition, TextField, Switch, CheckBox

StatefulWidget의 생명주기

StatefulWidget은 상태를 가지며, State 객체가 이 상태를 관리한다.

State 객체는 특정 생명주기 메서드를 통해 위젯의 상태 변화를 처리한다.

생명주기 메서드들

createState

• StatefulWidget이 처음 생성될 때 호출되어 State 객체를 생성

• StatefulWidget의 서브클래스는 이 메서드를 오버라이드하여 상태를 생성

initState

• State 객체가 처음 생성될 때 호출

• 상태 초기화 작업을 수행합니다. 예를 들어, 애니메이션 컨트롤러를 초기화하거나 스트림을 구독할 때 사용

didChangeDependencies

• initState가 호출된 직후, 그리고 이 객체의 BuildContext가 변경될 때마다 호출

• 예를 들어, InheritedWidget이 변경되었을 때 호출

  
  

build

• 위젯 트리를 구성합니다. 이 메서드는 위젯이 화면에 표시될 때마다 호출

• 이 메서드는 항상 위젯의 현재 상태를 기반으로 UI를 다시 빌드

didUpdateWidget

• 부모 위젯이 새로고침되어 이 위젯의 인스턴스가 새로운 구성 요소로 대체될 때 호출됩니다.

• 위젯의 상태가 변경되었을 때, 이를 처리합니다.

setState

• 상태가 변경되었음을 Flutter 프레임워크에 알림

• 이 메서드를 호출하면 build 메서드가 다시 호출되어 UI가 다시 갱신된다.

  
  

deactivate

• State 객체가 위젯 트리에서 제거될 때 호출.

• 일반적으로 dispose가 호출되기 전에 호출

  
  

dispose

• State 객체가 영구적으로 제거될 때 호출

• 리소스를 정리하고, 타이머나 스트림을 취소하는 데 사용

컨틀롤러(Controller)

Flutter에서 "컨트롤러(controller)"는 위젯의 상태를 관리하고 조작하는 데 사용되는 객체이다.

컨트롤러는 특정 위젯의 동작을 제어하거나 데이터를 관리할 수 있다.

주요 컨트롤러

TextEditingController

텍스트 필드의 내용을 관리하고 제어하는 데 사용됩니다. 텍스트 필드의 초기 값을 설정하거나, 텍스트 변경을 감지하고 처리하는 데 유용합니다.

ScrollController

스크롤 가능한 위젯(예: ListView, SingleChildScrollView 등)의 스크롤 동작을 제어하고 관리하는 데 사용됩니다. 스크롤 위치를 가져오거나 설정할 수 있습니다.

AnimationController

애니메이션을 제어하고 관리하는 데 사용됩니다. 애니메이션의 시작, 정지, 반복 등의 동작을 제어할 수 있습니다.

빌더(Builder)

Flutter에서 "빌더(builder)"는 동적인 UI 생성을 위해 사용되는 콜백 함수입니다. 빌더 함수는 필요한 데이터를 기반으로 UI를 생성하거나 재구성하는 데 사용됩니다. Flutter에는 여러 유형의 빌더가 있으며, 각각의 빌더는 특정 상황에 맞게 설계되었습니다. 주요 빌더 유형과 그 사용 예를 살펴보겠습니다.

주요 빌더 유형

Builder

Builder 위젯은 새로운 BuildContext를 생성하여, 이 컨텍스트를 통해 트리의 다른 위치에서 호출할 수 있도록 합니다. Builder는 특정 컨텍스트가 필요한 경우에 유용합니다

StreamBuilder

StreamBuilder는 스트림을 구독하고, 스트림의 데이터가 변경될 때마다 UI를 업데이트합니다. 비동기 데이터 스트림을 처리할 때 유용합니다.

FutureBuilder

FutureBuilder는 미래의 비동기 작업 결과를 처리하고, 해당 결과에 따라 UI를 업데이트합니다.

LayoutBuilder

LayoutBuilder는 부모 위젯의 크기에 따라 레이아웃을 동적으로 조정할 수 있도록 합니다.

AnimatedBuilder

AnimatedBuilder는 애니메이션을 사용하여 위젯을 생성하거나 업데이트합니다. 애니메이션 상태에 따라 UI를 빌드합니다.

ListView.builder

ListView.builder는 스크롤 가능한 목록을 동적으로 생성합니다. 필요한 만큼만 아이템을 렌더링하여 성능을 최적화합니다.

ValueListenableBuilder

ValueListenableBuilder는 ValueNotifier와 함께 사용하여 값의 변화를 감지하고, 이에 따라 UI를 업데이트합니다.