build

build는 위젯에서 UI를 만든다.

Widget build(BuildContext context) {
    print("Build!"); 
    return Text(
      'My Large Title',
      style: TextStyle(
          fontSize: 30,
          color:
              Theme.of(context).textTheme.titleLarge?.color), // null safety 적용
    );
  }

InitState

initState는 항상 build 메서드 전에 실행된다. initState는 상태를 초기화 하기 위한 메서드다.(변수를 초기화) int count = 0; 와 같이 초기화할 수 도 있다. 따라서 대부분의 상황에서는 이 메서드가 필요 없지만 종종 부모 요소에 의존하는 데이터를 초기화해야하 하는 경우가 있다.

상태를 초기화 하기 위한 메서드로 오직 단 한번만 호출되며 initState는 build메서드보다 먼저 호출되어야 한다.

@override
  void initState() {
    super.initState();
    print('initState!');
  }

dispose

dispose 메서드는 API 업데이트나 이벤트 리스너로부터 구독을 취소하거나 form의 리스너로부터 벗어나고 싶을 때 사용할 수 있다. dispose는 무언가를 취소하는 곳이다.

우리의 위젯이 위젯트리에서 제거될 때 dispose 메서드가 실행된다.

@override
  void dispose() {
    super.dispose();
    print("dispose!");
    // dispose 메서드는 API 업데이트나 이벤트 리스너로부터 구독을 취소하거나
    // form의 리스너로부터 벗어나고 싶을 때 사용할 수 있다.
    // dispose는 무언가를 취소하는 곳이다.
  }

종합 예시

import 'package:flutter/material.dart';

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

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

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

class _AppState extends State<App> {
  bool showTile = true;

  void toggleTitle() {
    setState(() {
      showTile = !showTile;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              showTile ? const MyLargeTitle() : const Text('nothing'),
              IconButton(
                onPressed: toggleTitle,
                icon: const Icon(Icons.remove_red_eye),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyLargeTitle extends StatefulWidget {
  // MyLargeTitle에서 부모 요소의 theme의 값에 접근하길 원한다.
  // 부모 요소와 대화할 수 있길 원한다.
  const MyLargeTitle({
    super.key,
  });

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

class _MyLargeTitleState extends State<MyLargeTitle> {
  @override
  void initState() {
    super.initState();
    print('initState!');
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose!");
  }

  @override
  Widget build(BuildContext context) {
    print("Build!"); // build 메서드는 initState 이 후에 실행된다.
    // context는 Text 이전에 있는 모든 상위 요소들에 대한 정보이다.
    // BuildContext 덕분에 아주 먼 곳의 요소에 접근할 수 있다.
    // BuildContext는 위젯 트리에서 위젯의 위치를 제공하고 이를 통해 상위 요소 데이터에 접근할 수 있다.
    return Text(
      'My Large Title',
      style: TextStyle(
          fontSize: 30,
          color:
              Theme.of(context).textTheme.titleLarge?.color), // null safety 적용
    );
  }
}