[노마드코더: Flutter 로 웹툰 앱 만들기] #4.4 Widget Lifecycle

statefulWidget에 대해서 한 가지 더 알아야 할 점은 Live cycle라는 것이다.

한 번 씩 확인하는 게 좋은 것

 

initState는 state를 initialize하기 위함이다. 하지만 
그냥 int count = 0; 쓰듯이 state를 initialize할 수도 있다. 
대부분의 경우 initState()를 사용하지 않아도 된다.
하지만 가끔 위젯은 initilaitze some datas depends on the paretns, ocontext를 사용해야 할 수도 있다. 

context/subscribe를 사용해야할 수도 있다. 
initState method build 메서드 전에 호출되며 오직 한 번만 호출된다. 

initState()를 사용할 때는 super.initState()가 필요하다.

 

---

위젯이 화면에서 사라질 때 호출되는 메서드
void dispose() {} 

a widget life cycle

지난 시간에 한 부분 함수 내에 그냥 실행 함수를 넣는게 아니라
setState(); 를 꼭 추가해야 한다.

 

import 'package:flutter/material.dart';

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

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          textTheme: const TextTheme(
              titleLarge: TextStyle(
            color: Colors.red,
          )),
          backgroundColor: const Color(0xFFF4EDDB)),
      home: Scaffold(
        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({
    Key? key,
  }) : super(key: key);

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

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

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    print('dispose');
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    return Text(
      'My Large Title',
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context).textTheme.titleLarge!.color,
      ),
    );
  }
}

 

---

정리하자면

initState
dispose
build

we know about the build
- build makes UI that your widget output

initState is a method that gets called before build.
in initState how we can initalize,  some variables and we can subscribe some API update.

when our widget is gonna be removed from widget tree.
dispose method runs.
cancel subscription event listeners ...etc...

They exist 
Widget life cycle

later we will use dispose