[Flutter] 부모위젯이 자식위젯의 method 호출 방법

서론

appBar와 BottomBar는 BottomNavigator 때문에 home_page 스크립트에서 관리되고 각 메뉴별 페이지를 렌더링하는 방식이다. 그래서 appBar에 편집 메뉴를 실행하면 tag_page의 method를 사용하고 싶었다.

home_page에 HomePage 클래스에 메소드를 선언하고 callBack으로 전달해주어도 되지만 그렇게하면 구조적으로 역할이 모호해지는 게 싫었다.

그래서 TagPage에 method를 선언하고 HomePage의 appBar에서 메소드를 호출할 수 있도록 하고 싶었다. 즉 부모 위젯이 자식위젯의 메소드를 사용하게끔 유도해주는 것이다.

방법

방법은 다음과 같다.

1. 글로벌 키 생성

// home_page.dart
final GlobalKey<TagPageState> _tagPageKey = GlobalKey<TagPageState>();

해당 키를 통해 메소드를 호출할 수 있다. 여기서 주의해야할 사항은 페이지의 상태를 나타내는 클래스인 TagPageState은 원래 private로 지정되어있는데 임포트를 통해 사용할 수 있어야하므로 _를 제거 해주어야 한다.

2. 글로버 키 전달

// home_page.dart
List<Widget> _widgetOptions() {
  return <Widget>[
    WordPage(),
    StreakPage(),
    TagPage(key: _tagPageKey),
    SettingsPage(),
  ];
}

해당 키를 프로퍼티로 전달해준다. 키 프로퍼티는 기본적으로 StatefulWidget에서 상속 받기 때문에 TagePage에서 생성자를 통해 초기화된다.

// tag_page.dart
class TagPage extends StatefulWidget {
  const TagPage({super.key});

  @override
  TagPageState createState() => TagPageState();
}

3. 자식 메소드 호출

// home_page.dart
_tagPageKey.currentState!.showEditOptionsDialog(context);

TagPage에 있는 showEditOptionsDialog 메소드를 호출한다.