Flutter- Widget Life Cycle

Stateful widget 라이프 사이클

initState, build, dispose

 stateful 위젯에는 총 세개의 상태가 존재한다. 일반적으로 우리가 위젯을 실행하는 경우에는, build() 메서드를 통해서 위젯이 빌드되어 기능을 사용할 수 있게된다.

 그리고 initState()라는 메서드는 build() 이전에 호출되며, 주로 API 구독등에 사용된다,

 stateful widget이 위젯 트리에서 벗어날 때 실행되는 메서드로는 dispose()가 있다. dispose는 위젯트리를 벗어나기 전에 무언가를  취소하는 기능을 정의하며, 주로 API 업데이트, form, 이벤트 리스너로 부터 벗어날 때 사용한다.

 

실행 순서	메서드	기능
1	initState()	해당 위젯이 빌드되기 이전에 실행될 기능을 정의함. 주로 API 구독이나 변수 초기화를 담당.
2	buid()	위젯의 기능, 상태등 빌드 될 위젯을 정의함.
3	dispose()	위젯이 위젯트리에서 제거되는 경우에 실행됨. 주로 이벤트 리스너 구독을 취소등을 담당.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// 인터렉티브한 페이지 만들기
class MyApp extends StatefulWidget {
  // StatefulWidget 선언
  const MyApp({super.key});

  @override
  State<StatefulWidget> createState() => _AppState();
}

class _AppState extends State<MyApp> {
  // State 안에 UI 관련 코드 작성

  // 클래스 프로퍼티 선언
  /*int counter = 0;
  List<int> numbers = [];

  void onClicked() {
    setState(() {
      // setState로 데이터가 변경되는 경우 UI를 새로고침 하도록 설정함(== build 메서드 재실행)
      counter += 1;
      numbers.add(counter);
    });
  }*/

  bool showTitle = false;
  void toggleTitle() {
    setState(() {
      showTitle = !showTitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        //theme을 통하여 여러 스타일을 미리 정의해 둘 수 있다.
        textTheme: const TextTheme(
          // titleLarge에 theme
          titleLarge: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              showTitle ? const MyLargeTitle() : const Text("nothing"),
              IconButton(
                onPressed: toggleTitle,
                icon: const Icon(Icons.remove_red_eye),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class MyLargeTitle extends StatefulWidget {
  const MyLargeTitle({
    super.key,
  });

  @override
  State<MyLargeTitle> createState() => _MyLargeTitleState();
}

class _MyLargeTitleState extends State<MyLargeTitle> {
  // 대부분의 초기화는 이렇게 상태변수를 초기화 하는 방식으로 진행함
  int count = 0;


  /* 
    Widget Life Cycle
    호출순서 
    initState 
    -> build 
    -> dispose 
    */

  // initState를 이용한 초기화는 API를 구독할 때 사용한다. initState는 항상 build 메서드보다 먼저 호출된다.
  // 위젯이 사용되어 초기화 되는 경우에 initState 메서드가 호출된다.
  @override
  void initState() {
    super.initState();
    print('initState!');
  }

  // dispose는 API 업데이트나 이벤트 리스터, form 리스너로 부터 벗어날 때 사용한다.
  // 위젯이 위젯 트리에서 벗어나기 전에 무언가를 취소하는 기능
  @override
  void dispose() {
    super.dispose();
    print("disponse!");
  }

  @override
  Widget build(BuildContext context) {
    print('build!');
    // context를 이용하여 부모 요소들에 접근한다. => MyLargeTitle에서 MyApp에 정보에 접근가능
    return Text(
      "My Large Title",
      style: TextStyle(
        color: Theme.of(context)
            .textTheme
            .titleLarge!
            .color, // context를 이용하여 theme의 데이터를 가져옴.
        fontSize: 30,
      ),
    );
  }
}