#4.4 Widget Lifecycle

Stateful Widget에겐 싸이클이 있다.

이 싸이클은

initState -> build -> dispose 순으로 진행된다.

 

Stateless Widget 이었던 MyLargeTitle을 Stateful Widget으로 바꾸어보자.

 

 

Stateful Widget이 된 MyLargeTitle은 build 메서드 이외에 initState()도 가질 수 있다. (직접 추가해야함)

 

State 초기화라.. 

함수들 밖에서도 가능하지 않았냐?

그냥 맨 위에 

int num = 1; 쓰면 초기화 되는 거 아니었냐?

 

맞다. 대부분의 상황에 initState()는 필요가 없다. 

 

그렇지만, 종종 부모 요소에 의존하는 데이터를 초기화해야하는 경우가 있다.

즉, 가끔 context를 이용해서 데이터를 초기화해야될 때도 있을 것이다. 

 

initState는 항상 build 보다 먼저 호출된다.

따라서, 구독하고 있는 Api로부터 매번 최신 정보를 받아와야할 경우 쓴다.

 

참고로 super.initState()를 호출하고 난 뒤에 불러야한다!

 

dispose()는 뭐냐?

dispose는 위젯이 사라질 때 호출되는 함수다.

Api 업데이트로부터 구독 취소하는 경우 쓸 수 있다. 

해당 위젯이 위젯트리에서부터 제거 될 때 호출되는 함수다.

 

 

 

 

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 showTitle = true;
  //here, write the data and ui.
  List<int> numbers = [];
  void onToggle() {
    setState(() {
      //setState() makes build method to run again.
      showTitle = !showTitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          textTheme: const TextTheme(
            titleLarge: TextStyle(color: Colors.red),
          ),
        ),
        home: Scaffold(
            backgroundColor: Colors.white,
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  showTitle ? const MyLargeTitle() : const Text('nothing'),
                  IconButton(
                    onPressed: onToggle,
                    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> {
  @override
  void initState() {
    //when the Stateful Widget become alive
    // TODO: implement initState
    super.initState();
    print('initState');
  }

  @override
  void dispose() {
    //when the Stateful Widget gets killed
    // TODO: implement dispose
    super.dispose();
    print('dispose');
  }

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

 

 

https://nomadcoders.co/flutter-for-beginners/lectures/4153

All Courses – 노마드 코더 Nomad Coders