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,
),
);
}
}
'Flutter' 카테고리의 다른 글
Flutter- 필수 Widget 정리 (0) | 2024.04.14 |
---|---|
Flutter- Widget (0) | 2024.03.31 |
Flutter- 공부#1 (0) | 2024.03.31 |