Flutter 강좌2 - 자식 State에서 부모 State를 참조하는 방법 | Global State 사용법

Flutter 강좌 시즌2 목록 : https://here4you.tistory.com/149

 

지난 강좌에서 하나의 Scaffold를 여러 클래스로 분할해서 구현하는 방법에 대해서 알아보았다.

https://here4you.tistory.com/151

Flutter 강좌2 - 소스코드(위젯) 분할

 

자식 State에서 부모 State의 필드를 참조하고 그 값(state)를 변경하는 방법은 다음과 같다.

import 'package:flutter/material.dart';

ParentPageState ppState = new ParentPageState();

class ParentPage extends StatefulWidget {
  @override
  ParentPageState createState() => ppState;
}

class ParentPageState extends State<ParentPage> {
  bool flag = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(),
      body: ListView(
        children: <Widget>[
          ChildPage1(),
          ChildPage2(),
        ],
      ),
    );
  }
}

class ChildPage1 extends StatefulWidget {
  @override
  _ChildPage1State createState() => _ChildPage1State();
}

class _ChildPage1State extends State<ChildPage1> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(ppState.flag.toString()),
    );
  }
}

class ChildPage2 extends StatefulWidget {
  @override
  _ChildPage2State createState() => _ChildPage2State();
}

class _ChildPage2State extends State<ChildPage2> {
  @override
  Widget build(BuildContext context) {

    return Center(
      child: RaisedButton(
        child: Text("Toggle"),
        onPressed: () {
          ppState.setState(() {
            ppState.flag = !ppState.flag;
          });
          print(ppState.flag);
        },
      ),
    );
  }
}

AppBar MyAppBar() {
  return AppBar(
    title: Text("Pomodoro Timer"),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {
          print("onPressed");
        },
      )
    ],
  );
}

소스를 살펴보면 ParentPage는 ChildPage1과 ChildPage2로 화면을 구성한다. 이들은 모두 SatefulWidget과 그 Sate로 구성된다.

ChildPage1은 Parentpage의 bool 타입의 필드 flag값을 Text 위젯으로 출력한다.

ChildPage2는 RaisedButton을 통해 버튼이 클릭될 때마다 flag값을 토글하게된다.

원하는 기능은 RaiseButton값을 클릭할 때마다 ParentPage의 flag값을 토글 시키고, 그 값이 ChildPage1의 Text 위젯으로 출력되는 것이다. 즉 ParentPage의 필드 flag값을 ChildPage1과 ChildPage2가 참조하고 변경도 하는 것이다.

ParentPage의 State를 자식 State에서 참조하기 위해서는 ParentPage의 State를 Global State로 생성하는 것이다. line3에서와 같이 ParentPageState의 인스턴스를 글로벌 영역에서 생성한다.

그리고 ParentPage에서 createState()를 통해 ParentPageState의 인스턴스를 연결할 때 미리 생성한 글로번 State를 주입한다.

글로벌 State의 값을 변경할 때에는 일반적인 setState()를 사용하지 말고 GlobalState.getState() 형식으로 State를 참조해야 하는데 위 소스에서는 line 54처럼 ppState.setState()를 이용해서 부모 State의 값을 변경하면 변경된 값이 ChildPage1의 Text() 위젯에 실시간으로 반영되는 것을 확인할 수 있다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱