[Flutter] Widget LifeCycle - initState(), build(), dispose()

• 모든 widgetd은 lifecycle(생명주기)가 존재한다.
• statefulWidget에는 생명주기와 관련된 3가지 메소드가 존재한다.
  • initState() : 속성 초기화하는 메소드
  • build() :위젯의 UI를 만드는 메소드
  • dispose() : 위젯이 스크린에서 제거될 때 호출되는 메소드

 

[ initState() ]

: 속성을 초기화하는 메소드 

 

• 보통 클래스 상단에서 할 수 있기 때문에 필요하지 않다 (아래 코드)

class MyLargeTitle extends StatefulWidget{
	int counter = 0;
    ...
}

 

-> 부모 요소에 의존하는 데이터를 초기화 해야할 때 사용

ex) API 업데이트 구독 등

• 단 한번만 호출된다
• build보다 먼저 호출된다

---

[ dispose() ]

: 위젯이 스크린에서 제거될 때 호출되는 메소드

-> 위젯이 위젯 트리에서 제거되기 전에 무언가 취소하고 싶을 때 사용

ex) 이벤트 리스너 같은 것들 구독 취소

 

---

[문제]

: 다음 영상과 동일하게 작동하도록 코드를 작성하시오

 

 

• toggle 버튼을 누르면, text가 변경됨
• Text('My Large Title')은 분리된 MyLargeTitle 위젯에 작성됨
• MyLargeTitle의 build(), initState(), dispose()가 호출될 때 로그 출력될 수 있게

---

[정답]

import 'package:flutter/material.dart';

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

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

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

//데이터를 저장하고, state를 확인해서 UI를 변형하는 클래스
class _AppState extends State<App> {
  bool showtitle = true;

  //toggleTitle메소드
  void toggleTitle() {
    setState(() {
      showtitle = !showtitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          textTheme: const TextTheme(
            headlineLarge: TextStyle(
              color: Colors.blue,
            ),
          ),
        ),
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                showtitle ? const MyLargeTitle() : const Text('nothing'),
                IconButton(
                  onPressed: toggleTitle,
                  icon: const Icon(
                    Icons.toggle_off_outlined,
                    size: 40,
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

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

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

class _MyLargeTitleState extends State<MyLargeTitle> {
  @override
  Widget build(BuildContext context) {
    print('build');
    return Column(
      children: [
        Text(
          'My Large Title',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Theme.of(context).textTheme.headlineLarge?.color,
          ),
        ),
      ],
    );
  }

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

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