- build() 메서드는 -> 화면에 UI를 새로 그리는 역할을 하기 때문에 앱 성능에 지장을 주는 코드는 작성하면 안된다.
- stack 구조로 메모리에 쌓인다. (나중에 들어간 것이 먼저 나오는 구조임)
- stack에서 모든 화면이 제거되면 앱이 종료된다.
- 화면이 표시되면서(화면이 생성될 때마다) -> build() 메서드가 호출 된다. (stack에 남아 있다면 호출 되지 않음)
initState, didChangeDependencies, didUpdateWidget, dispose
- 생명주기 메서드 : 특정 타이밍에 실행되는 메서드
- createState()함수가 호출 되면 -> mounted == true 가 됨. (위젯을 화면에 장착한 경우 true가 됨)
- initState() -> 위젯을 초기화할 때 한 번만 호출됨 (주로 데이터 목록을 만들거나, 처음 필요한 데이터 주고 받을 때 호출)
위젯이 생성될 때 호출 (StatefulWidget 클래스가 생성 될 때)
총 10개의 페이지가 있는 경우 -> 10번째에 있는 페이지를 표시할 경우 ->
아래의 9개 페이지 모두 buld() 메서드가 호출될 수 있으므로 계산이나, 네트워크 요청 등은 -> initState()를 추천 - didChangeDependencies() -> initState() 함수가 호출된 후에 이어서 바로 호출 됨.
데이터에 의존하는 위젯이라면 화면에 표시하기 전에 꼭 호출 해야함.
상속받은 위젯을 상용할 때 피상속자가 변경되면 호출 함. - didUpdateWidget() -> 부모 위젯이나 데이터가 변경되어 위젯을 갱신해야 할 때 호출함.
initState() 함수는 위젯을 초기화할 때 한 번만 호출되므로 위젯이 변경되었을때 호출하는
didUpdateWidget() 같은 함수가 필요함. - setState() -> 데이터가 변경된 것을 알려주고, 변경된 데이터를 이용해 화면의 UI를 다시 구성
- deactivate() -> State 객체가 플러터의 구성트리로부터 제거될 때 호출 됨. (메모리에는 남아 있음)
dispose()함수를 호출하기 전까지는 State객체 사용 가능. - dispose() -> 위젯이 완전히 종료될 때 호출 (pop될 때)
import 'dart:math';
import 'package:flutter/material.dart';
// 앱 시작 부분
void main() {
runApp(MyApp());
}
// 시작 클랙스, 머티리얼 디자인 앱 생성!
class MyApp extends StatelessWidget {
// StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스.
// (상태를 가지지 않는 다는 것은-> 한 번 그려진 후 다시 그리지 않는 경우이며,
// 프로퍼티로 변수를 가지지 않는다 다만 상수는 가질 수 있다.)
// StatelessWidget 은 build() 메서드를 가지고 있고 이 메서드는 위젯을 생성할 때 호출 되면서 화면에 그릴 위젯을
// 반환한다.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title, theme, home 인수를 설정한다. (위젯의 속성을 표현)
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ↱실행될 때 보여지는 것을 설정 (첫 페이지 설정)
home: FirstStatefullPage(),
);
}
}
// 시작 클래스가 실제로 표시하는 클래스
// 첫 번째 페이지
class FirstStatefullPage extends StatefulWidget {
const FirstStatefullPage({Key key}) : super(key: key);
@override
_FirstStatefullPageState createState() => _FirstStatefullPageState();
}
class _FirstStatefullPageState extends State<FirstStatefullPage> {
@override
void initState(){
super.initState();
print('FirtstPage - initstate() 호출');
}
@override
void dispose(){
super.dispose();
print('FirstPage - dispose() 호출');
}
@override
Widget build(BuildContext context) {
print('FirstPage build() 메서드 호출');
return Scaffold(
appBar: AppBar(
title: Text('Fisrt 페이지'),
),
body: ElevatedButton(
child: Text("다음 페이지로~"),
onPressed: (){
final person = Person("김길동", 99);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondStatefulPage(person1: person)),
);
},
),
);
}
}
class SecondStatefulPage extends StatefulWidget {
final Person person1;
const SecondStatefulPage({Key key, @required this.person1}) : super(key: key);
@override
_SecondStatefulPageState createState() => _SecondStatefulPageState();
}
class _SecondStatefulPageState extends State<SecondStatefulPage> {
@override
void initState(){
super.initState();
print("SecondPage - initState() 호출");
}
@override
void dispose(){
super.dispose();
print('SecondPage - dispose() 호출');
}
@override
Widget build(BuildContext context) {
print('SecondPage - build() 메서드 호출');
return Scaffold(
appBar: AppBar(
title: Text(widget.person1.name),
),
body: ElevatedButton(
child: Text('이전 페이지로~'),
onPressed: (){
Navigator.pop(context);
},
),
);
}
}
class Person{
String name;
int age;
Person(this.name, this.age);
}
'Flutter > 내비게이션' 카테고리의 다른 글
routes를 활용한 내비게이션 (0) | 2021.06.18 |
---|---|
새로운 화면으로 이동 (0) | 2021.06.18 |