• 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

+ Recent posts