This presentation is Master of Flutter lifecycle presented at Flutter Kaigi 2023.
* Flutter Kaigi 2023 https://flutterkaigi.jp/2023/
* My session https://flutterkaigi.jp/2023/sessions/f76c37b8-172d-4072-ad4a-bd870bc15728
""LJSBMaster of Flutter lifecycle@_a_akiraAAkiraFlutter Kaigi 2023
View Slide
%About me2M3, Inc.Akira Aratanihttps://aakira.apphttps://aakira.studio🐕 ✈ 📷 🎾 🤸 🚁⊿aakira.studio_a_akira AAkirachai_cavachon
%M3, Inc.3https://www.m3tech.blog/https://jobs.m3.com/engineer/m3_engineering m3techchannel160https://jobs.m3.com/product/エンジニアリングの力で医療の世界を変えていくThe Power of Medical Innovation
%M3, Inc.4https://www.m3tech.blog/https://jobs.m3.com/engineer/m3_engineering m3techchannel160https://jobs.m3.com/product/エンジニアリングの力で医療の世界を変えていくThe Power of Medical InnovationMaster of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• Flutter Lifecycle• Widget Lifecycle• App Lifecycle• Navigation & Routing• Handling Flutter lifecycle• Summary5Agenda
%• Flutter Lifecycle• Widget Lifecycle• App Lifecycle• Navigation & Routing• Handling Flutter lifecycle• Summary6Agenda目的Flutterのライフサイクルの仕組みを知って、必要になった時に適切にイベントハンドリングできるようになる。OKCANCEL
%Lifecycleとは？7
%8https://developer.android.com/guide/components/activities/activity-lifecycle https://developer.apple.com/documentation/uikit/uiviewcontroller
%• ライフサイクルは主に2つある• Widget自体のライフサイクル• アプリ全体のライフサイクル9Flutter lifecycle
%• ライフサイクルは主に2つある• Widget自体のライフサイクル• アプリ全体のライフサイクル• OSに依るもの• 画面遷移に依るもの10Flutter lifecycle
%• ライフサイクルは主に2つある• Widget自体のライフサイクル → 主にStateful Widget• アプリ全体のライフサイクル• OSに依るもの → WidgetBindingObserver• 画面遷移に依るもの → NavigatorObserver11Flutter lifecycle
%• ライフサイクルは主に2つある• Widget自体のライフサイクル → 主にStateful Widget• アプリ全体のライフサイクル• OSに依るもの → WidgetBindingObserver• 画面遷移に依るもの → NavigatorObserver12Flutter lifecycleMaster of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• ライフサイクルは主に2つある• Widget自体のライフサイクル → 主にStateful Widget• アプリ全体のライフサイクル• OSに依るもの → WidgetBindingObserver• 画面遷移に依るもの → NavigatorObserver13Flutter lifecycleMaster of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• ライフサイクルは主に2つある• Widget自体のライフサイクル → 主にStateful Widget• アプリ全体のライフサイクル• OSに依るもの → WidgetBindingObserver• 画面遷移に依るもの → NavigatorObserverXFlutter lifecycleMaster of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• StatelessWidget• StatefulWidget• ProxyWidget(InheritedWidget, ParentDataWidget)• RenderObjectWidget14Widget
%• StatelessWidget• StatefulWidget• ProxyWidget(InheritedWidget, ParentDataWidget)• RenderObjectWidget15Widget
%• StatelessWidget• StatefulWidget• ProxyWidget(InheritedWidget, ParentDataWidget)• RenderObjectWidget16Widget
%• 状態を持つことを目的としたWidget• 状態があるView componentが多く利用している• Image, Button, Radio, DropDownMenu, Slider, Chip...17Stateful Widget
%• _StateLifecycle• created• initialized• ready• defunct18State lifecycle
%19State lifecycle初期値、Stateオブジェクトが生成された後StateオブジェクトはまだないStateオブジェクトが利用可能Stateオブジェクトは利用不可• _StateLifecycle• created• initialized• ready• defunct
%• createState• initState• didChangeDependencies• build• didUpdateWidget• setState• deactivate• dispose20Stateful Widgetで重要なライフサイクルのイベント
%• createState• initState• didChangeDependencies• build• didUpdateWidget• setState• deactivate• dispose21Stateful Widgetで重要なライフサイクルのイベントcreateStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitialized
%createStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitialized22
%createStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitialized23
%createStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitialized24
%createStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitialized25
%createStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitializedbuild26setStatedidUpdateWidget
%createStateinitStatedidChangeDependenciesdeactivatedisposedefunctreadycreatedbuilddidUpdateWidget setStateinitializeddeactivate27dispose
%• Flutterの描画にはWidget treeとElement tree, RenderObject treeがある• Elementにもライフサイクルが存在する(_ElementLifecycle)• initial• active• inactive• defunct28Element lifecycle
%実際の挙動29
%@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),decoration: BoxDecoration(color: const Color(0xffd8e2ff),borderRadius: BorderRadius.circular(32),),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('Parent counter: $_counter'),const SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementCounter(),child: const Text('Increment parent'),),const SizedBox(height: 32),ChildWidget(),],),);}30親Widet
%@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),decoration: BoxDecoration(color: const Color(0xffd8e2ff),borderRadius: BorderRadius.circular(32),),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('Parent counter: $_counter'),const SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementCounter(),child: const Text('Increment parent'),),const SizedBox(height: 32),ChildWidget(),],),);}31親Widet
%@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),decoration: BoxDecoration(color: const Color(0xffd8e2ff),borderRadius: BorderRadius.circular(32),),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('Parent counter: $_counter'),const SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementCounter(),child: const Text('Increment parent'),),const SizedBox(height: 32),ChildWidget(),],),);}32親Widet
%@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),decoration: BoxDecoration(color: const Color(0xffd8e2ff),borderRadius: BorderRadius.circular(32),),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('Parent counter: $_counter'),const SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementCounter(),child: const Text('Increment parent'),),const SizedBox(height: 32),ChildWidget(),],),);}33親Widet
%@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),decoration: BoxDecoration(color: const Color(0xfffdd7fa),borderRadius: BorderRadius.circular(32),),child: Column(children: [Text('Child counter: $_counter'),const SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementCounter(),child: const Text('Increment child'),),],),);}34子Widet
%35Child counter: 0Parent counter: 0Increment parentIncrement child
%parent: initStateparent: didChangeDependenciesparent: buildchild: initStatechild: didChangeDependencieschild: build初回ビルド時Child counter: 0Parent counter: 0Increment parentIncrement child36
%child: setStatechild: buildChildボタン押下時Child counter: 5Parent counter: 0Increment parentIncrement child37
%Parentボタン押下時Child counter: 5Parent counter: 3Increment parentIncrement childparent: setStateparent: buildchild: didUpdateWidgetchild: build38
%Parentボタン押下時Child counter: 5Parent counter: 3Increment parentIncrement childparent: setStateparent: buildchild: didUpdateWidgetchild: build親のWidgetが更新されたため呼ばれる39
%parent: deactivatechild: deactivatechild: disposeparent: disposeWidget破棄時Child counter: 5Parent counter: 3Increment parentIncrement child40
%41didUpdateWidget呼ばれないようにする
%Parentボタン押下時Child counter: 5Parent counter: 3Increment parentIncrement childparent: setStateparent: buildchild: didUpdateWidgetchild: build42子も更新されてしまう
%@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),decoration: BoxDecoration(color: const Color(0xffd8e2ff),borderRadius: BorderRadius.circular(32),),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('Parent counter: $_counter'),const SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementCounter(),child: const Text('Increment parent'),),const SizedBox(height: 32),ChildWidget(),],),);}43親Widet
%),child: Column(mainAxisSize: MainAxisSize.min,children: [Text('Parent counter: $_countconst SizedBox(height: 8),OutlinedButton(onPressed: () => _incrementchild: const Text('Incremen),const SizedBox(height: 32),const ChildWidget(),],),);}44
%Parentボタン押下時Child counter: 5Parent counter: 4Increment parentIncrement childparent: setStateparent: build親のみRebuildされる45
%Parentボタン押下時Child counter: 5Parent counter: 4Increment parentIncrement childparent: setStateparent: build親のみRebuildされる46Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%Parentボタン押下時Child counter: 5Parent counter: 4Increment parentIncrement childparent: setStateparent: build親のみRebuildされる47Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%Parentボタン押下時Child counter: 5Parent counter: 4Increment parentIncrement childparent: setStateparent: build親のみRebuildされるXMaster of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• OSによる操作をFlutterのフレームワークが吸収したもの• Flutter 3.13.0で大きな変更があった• 状態の追加(hidden)• イベントの発火パターンが増えた• 状態遷移の流れが変わった• AppLifecycleListener(WidgetBindingObserver)でハンドリング48App lifecycle
%• resumed• inactive• hidden• paused• detached49App lifecycle state
%• resumed• inactive• hidden → Flutter 3.13.0から追加• paused• detached50App lifecycle statehttps://docs.flutter.dev/release/breaking-changes/add-applifecyclestate-hidden
%51https://github.com/flutter/engine/pull/40542
%52https://github.com/flutter/engine/pull/40542hidden3.13.0以前は非対応だったmacOSとLinuxのために追加されたOKCANCEL
%53App Lifecycleの状態遷移図resumedinactivehiddenpauseddetachedonInactiveonHideonPauseonDetachonResumeonShowonRestart
%54App Lifecycleの状態遷移図resumedinactivehiddenpauseddetachedonInactiveonHideonPauseonDetachonResumeonShowonRestartForeground状態Kill状態Background状態------------------------------------------
%• ライフサイクルイベント発火パターンが3.13.0の前後で異なる• OSによってイベント、発火タイミングが異なる55実際の挙動
%• アプリからOSホームへの遷移• OSホームからアプリへの遷移• アプリからタスク一覧への遷移• タスク一覧からアプリへの遷移• 画面OFF• 画面ON• アプリ終了56実際の挙動• Notification, Control Centerを表示• Notification, Control Centerを非表示• 画面分割• 画面分割時のフォーカス切り替え• 自分のアプリ側の画面分割を終了• もう一方のアプリ側の画面分割を終了
%~3.13.0inactivepausedアプリからOSホームへの遷移573.13.0~inactivehiddenpausedJ04
%~3.13.0resumedOSホームからアプリへの遷移583.13.0~hiddeninactiveresumedJ04
%~3.13.0inactivepaused(その後OSホーム、他アプリにいっても変化なし)アプリからタスク一覧への遷移593.13.0~inactivehiddenpaused(その後OSホーム、他アプリにいっても変化なし)
%~3.13.0inactive(その後OSホーム、他アプリに遷移した場合)pausedアプリからタスク一覧への遷移603.13.0~inactive(その後OSホーム、他アプリに遷移した場合)hiddenpausedJ04
%~3.13.0resumedタスク一覧からアプリへの遷移613.13.0~hiddeninactiveresumed
%~3.13.0• アプリ=>タスク一覧=>アプリresumed• OSホーム=>タスク一覧=>アプリinactiveresumedタスク一覧からアプリへの遷移623.13.0~• アプリ=>タスク一覧=>アプリresumed• OSホーム=>タスク一覧=>アプリhiddeninactiveresumedJ04
%~3.13.0inactivepaused画面OFF633.13.0~inactivehiddenpausedJ04
%~3.13.0resumed画面ON643.13.0~hiddeninactiveresumedJ04
%~3.13.0イベントなし通知欄を表示653.13.0~inactive
%~3.13.0イベントなし通知欄を非表示663.13.0~resumed
%~3.13.0• 開くinactive• 閉じるresumed通知欄, 設定673.13.0~• 開くinactive• 閉じるresumedJ04
%~3.13.0inactivepauseddetachedアプリ終了683.13.0~inactivehiddenpauseddetachedJ04
%~3.13.0(inactive)(paused)resumedinactiveresumed画面分割 (Android)693.13.0~(inactive)(hidden)(paused)hiddeninactiveresumed
%~3.13.0inactiveresumed画面分割 (iPad)703.13.0~inactiveresumedJ1BE
%~3.13.0変化なし画面分割時のフォーカス切り替え713.13.0~• unfocusedinactive• focusedresumed
%~3.13.0(変化なし)画面分割時のフォーカス切り替え723.13.0~(変化なし)J1BE
%~3.13.0inactivepaused自分のアプリ側の画面分割を終了733.13.0~inactivehiddenpaused
%~3.13.0inactivepaused自分のアプリ側の画面分割を終了743.13.0~inactivehiddenpausedJ1BE
%~3.13.0フォーカスに関係なく変化なしもう一方のアプリ側の画面分割を終了753.13.0~• unfocusedresumed• focused変化なし
%~3.13.0inactiveresumedもう一方のアプリ側の画面分割を終了763.13.0~inactiveresumedJ1BE
%3.13.0~• Focusresumed• Unfocusinactiveフォーカス切り替え77NBD04
%3.13.0~• 覆うhidden• 表示inactive画面を覆う78NBD04
%3.13.0~• 画面OFFinactivehidden• 画面ONinactiveresumed画面ON/OFF79NBD04
%3.13.0~inactivehidden最小化80NBD04
%3.13.0~inactiveresumed最小化からフォーカス81NBD04
%3.13.0~inactivehiddeninactiveresumedinactive... (何度かイベント発火)resumedフルスクリーン化82NBD04
%3.13.0~inactivehiddeninactiveresumedinactivehiddeninactiveresumedフルスクリーン解除83NBD04
%~3.13.0イベントなしWEB843.13.0~イベントなし
%85Android iOS(iPhone/iPad)アプリからOSホームへの遷移 inactive->hidden->paused inactive->hidden->pausedOSホームからアプリへの遷移 hid->ina->res hid->ina->resアプリからタスク一覧への遷移 ina->hid->pau ina, (to home: hid->pau)タスク一覧からアプリへの遷移 hid->ina->res res, (from home: hid->ina->res)画面OFF ina->hid->pau ina->hid->pau画面ON hid->ina->res hid->ina->resNotification, Control Centerを表示 inactive inactiveNotification, Control Centerを非表示 resumed resumedアプリ終了 ina->hid->pau->detached ina->hid->pau->detached画面分割 hid->ina->res ina->res画面分割時のフォーカス切り替え inactive/resumed -自分のアプリ側の画面分割を終了 ina->hid->pau ina->hid->pauもう一方のアプリ側の画面分割を終了 focused: -, unfocused: resumed ina->res
%86Android iOS(iPhone/iPad)アプリからOSホームへの遷移 inactive->hidden->paused inactive->hidden->pausedOSホームからアプリへの遷移 hid->ina->res hid->ina->resアプリからタスク一覧への遷移 ina->hid->pau ina, (to home: hid->pau)タスク一覧からアプリへの遷移 hid->ina->res res, (from home: hid->ina->res)画面OFF ina->hid->pau ina->hid->pau画面ON hid->ina->res hid->ina->resNotification, Control Centerを表示 inactive inactiveNotification, Control Centerを非表示 resumed resumedアプリ終了 ina->hid->pau->detached ina->hid->pau->detached画面分割 hid->ina->res ina->res画面分割時のフォーカス切り替え inactive/resumed -自分のアプリ側の画面分割を終了 ina->hid->pau ina->hid->pauもう一方のアプリ側の画面分割を終了 focused: -, unfocused: resumed ina->res
%• 今まではWidgetsBindingObserverをWidgetに対して実装する必要があった• 3.13.0からAppLifecycleListenerが追加87AppLifecycleListener
%88class ExamplePage extends StatefulWidget {const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State with WidgetsBindingObserver {@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {print(state);}@overrideWidget build(BuildContext context) {return Contaienr();}}WidgetsBindingObserver
%89const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State with WidgetsBindingObserver {@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {print(state);}@overrideWidget build(BuildContext context) {return Contaienr();
%90const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State with WidgetsBindingObserver {@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {print(state);}@overrideWidget build(BuildContext context) {return Contaienr();
%91const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State with WidgetsBindingObserver {@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {print(state);}@overrideWidget build(BuildContext context) {return Contaienr();
%92const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State with WidgetsBindingObserver {@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {print(state);}@overrideWidget build(BuildContext context) {return Contaienr();
%93class ExamplePage extends StatefulWidget {const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State {late final AppLifecycleListener appLifecycleListener;@overridevoid initState() {super.initState();appLifecycleListener = AppLifecycleListener(onShow: () => print('onShow'),onResume: () => print('onResume'),onHide: () => print('onHide'),onInactive: () => print('onInactive'),onPause: () => print('onPause'),onDetach: () => print('onDetach'),onRestart: () => print('onRestart'),onStateChange: (state) => print(state.toString()),);}@overridevoid dispose() {appLifecycleListener.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container();}}AppLifecycleListener
%94class ExamplePage extends StatefulWidget {const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State {late final AppLifecycleListener appLifecycleListener;@overridevoid initState() {super.initState();appLifecycleListener = AppLifecycleListener(onShow: () => print('onShow'),onResume: () => print('onResume'),onHide: () => print('onHide'),onInactive: () => print('onInactive'),onPause: () => print('onPause'),onDetach: () => print('onDetach'),onRestart: () => print('onRestart'),onStateChange: (state) => print(state.toString()),);}
%95class ExamplePage extends StatefulWidget {const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State {late final AppLifecycleListener appLifecycleListener;@overridevoid initState() {super.initState();appLifecycleListener = AppLifecycleListener(onShow: () => print('onShow'),onResume: () => print('onResume'),onHide: () => print('onHide'),onInactive: () => print('onInactive'),onPause: () => print('onPause'),onDetach: () => print('onDetach'),onRestart: () => print('onRestart'),onStateChange: (state) => print(state.toString()),);}
%96class ExamplePage extends StatefulWidget {const ExamplePage({super.key});@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State {late final AppLifecycleListener appLifecycleListener;@overridevoid initState() {super.initState();appLifecycleListener = AppLifecycleListener(onStateChange: (state) => print(state.toString()),);}@overridevoid dispose() {appLifecycleListener.dispose();super.dispose();}@override
%97void initState() {super.initState();appLifecycleListener = AppLifecycleListener(onShow: () => print('onShow'),onResume: () => print('onResume'),onHide: () => print('onHide'),onInactive: () => print('onInactive'),onPause: () => print('onPause'),onDetach: () => print('onDetach'),onRestart: () => print('onRestart'),onStateChange: (state) => print(state.toString()),);}@overridevoid dispose() {appLifecycleListener.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container();}}
%98@overrideState createState() => _ExamplePageState();}class _ExamplePageState extends State {late final AppLifecycleListener appLifecycleListener;@overridevoid initState() {super.initState();appLifecycleListener = AppLifecycleListener(onShow: () => print('onShow'),onResume: () => print('onResume'),onHide: () => print('onHide'),onInactive: () => print('onInactive'),onPause: () => print('onPause'),onDetach: () => print('onDetach'),onRestart: () => print('onRestart'),onStateChange: (state) => print(state.toString()),);}@overridevoid dispose() {appLifecycleListener.dispose();super.dispose();}AppLifecycleStateにはない
%AppLifecycleStateinactivehiddenpausedアプリからOSホームへの遷移99AppLifecycleListeneronInactiveonHideonPauseAppLifecycleState AppLifecycleListeneronRestartonShowonResumehiddeninactiveresumedOSホームからアプリへの遷移
%AppLifecycleStateinactivehiddenpausedアプリからOSホームへの遷移100onInactiveonHideonPauseAppLifecycleStateonRestartonShowonResumehiddeninactiveresumedOSホームからアプリへの遷移AppLifecycleListenerAppLifecycleListener
%101inactivehiddenpausedアプリからOSホームへの遷移AppLifecycleStateonInactiveonHideonPauseAppLifecycleStateonRestartonShowonResumeAppLifecycleListenerAppLifecycleListenerhiddeninactiveresumedOSホームからアプリへの遷移Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%102inactivehiddenpausedアプリからOSホームへの遷移AppLifecycleState AppLifecycleListenerAppLifecycleListeneronInactiveonHideonPauseAppLifecycleStateonRestartonShowonResumehiddeninactiveresumedOSホームからアプリへの遷移Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%XinactivehiddenpausedアプリからOSホームへの遷移AppLifecycleState AppLifecycleListenerAppLifecycleListeneronInactiveonHideonPauseAppLifecycleStateonRestartonShowonResumehiddeninactiveresumedOSホームからアプリへの遷移Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• Widgetごとのライフサイクルハンドリング• アプリ全体のライフサイクルハンドリング• 画面遷移はハンドリングできない=> Navigator history stackを監視する必要がある103ここまででできること
%• 現在主流のものは主に3パターン• Navigator (通称Navigator1.0)• Router (通称Navigator2.0)• ライブラリーを使う(サードパーティ含む)•flutter.dev/go_router• codeness.ly/auto_route• tom.gilder.dev/routemaster• etc...104Navigator
%• 現在主流のものは主に3パターン• Navigator (通称Navigator1.0)• Router (通称Navigator2.0)• ライブラリーを使う(サードパーティ含む)•flutter.dev/go_router• codeness.ly/auto_route• tom.gilder.dev/routemaster• etc...105Navigatorhttps://docs.flutter.dev/ui/navigation
%106Page1Page2Page3Page1Page2Page3Page4Page1Page2Page3Push Page4 Pop Page4
%107Page1Page2Page3Page1Page2Page3Page4Page1Page2Page3Navigator Router(GoRouter etc...)Widget
%• Navigator history stackの変化を監視• didPush• didPop• didRemove• didReplace• (didStartUserGesture)• (didStopUserGesture)108NavigatorObserver
%109class NavigatorObserver {NavigatorState? get navigator => _navigators[this];static final Expando _navigators = Expando();void didPush(Route route, Route? previousRoute) { }void didPop(Route route, Route? previousRoute) { }void didRemove(Route route, Route? previousRoute) { }void didReplace({ Route? newRoute, Route? oldRoute }) { }void didStartUserGesture(Route route, Route? previousRoute) { }void didStopUserGesture() { }}
%• RouteObserverと組み合わせて利用する• 実装されたWidgetのNavigationに変更があると通知される• didPopNext• didPush• didPop• didPushNext110RouteAware
%111abstract mixin class RouteAware {void didPopNext() { }void didPush() { }void didPop() { }void didPushNext() { }}
%112abstract mixin class RouteAware {void didPopNext() { }void didPush() { }void didPop() { }void didPushNext() { }}Page1Page2対象WidgetがPushされたタイミング
%113abstract mixin class RouteAware {void didPopNext() { }void didPush() { }void didPop() { }void didPushNext() { }}対象Widgetの上に別のWidgetがPushされたタイミングPage1Page2Page3
%114abstract mixin class RouteAware {void didPopNext() { }void didPush() { }void didPop() { }void didPushNext() { }}対象Widgetの上にある別のWidgetがPopされたタイミングPage1Page2Page3
%115abstract mixin class RouteAware {void didPopNext() { }void didPush() { }void didPop() { }void didPushNext() { }}対象WidgetがPopされたタイミングPage1Page2
%116class RouteObserver> extends NavigatorObserver {@overridevoid didPop(Route route, Route? previousRoute) {...}@overridevoid didPush(Route route, Route? previousRoute) {...}...}
%117final RouteObserver routeObserver = RouteObserver();
%118final RouteObserver routeObserver = RouteObserver();Navigator(pages: [...],onPopPage: (route, result) {...});MaterialApp(routes: {...},);GoRouter(initialLocation: '/',routes: [...],);Navigator1.0 Navigator2.0(Router) GoRouter
%119final RouteObserver routeObserver = RouteObserver();Navigator(observers: [routeObserver,],pages: [...],onPopPage: (route, result) {...});MaterialApp(navigatorObservers: [routeObserver,],routes: {...},);GoRouter(observers: [routeObserver,],initialLocation: '/',routes: [...],);Navigator1.0 GoRouterNavigator2.0(Router)
%120class ExamplePage extends StatefulWidget {const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@overridevoid dispose() {routeObserver.unsubscribe(this);super.dispose();}@overridevoid didPush() {}@overridevoid didPop() {}@overridevoid didPushNext() {}@overridevoid didPopNext() {}@overrideWidget build(BuildContext context) {return Container();}}
%class ExamplePage extends StatefulWidget {const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@override121@overridevoid didPush()}@overridevoid didPop()}@overridevoid didPushNe}@overridevoid didPopNex}@overrideWidget build(Breturn Conta}}
%122void didPush()}@overridevoid didPop()}@overridevoid didPushNe}@overridevoid didPopNex}@overrideWidget build(Breturn Conta}}const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@overridevoid dispose() {routeObserver.unsubscribe(this);super.dispose();}
%123@overridevoid didPush() {}@overridevoid didPop() {}@overridevoid didPushNext() {}@overridevoid didPopNext() {}@overrideWidget build(BuildContext context) {return Container();}}extends StatefulWidget {e({ super.key });dget> createState()=> _ExamplePageState();State extends Statewith RouteAware {pendencies() {eDependencies();subscribe(f(context)! as PageRoute,
%124void didPush()}@overridevoid didPop()}@overridevoid didPushNe}@overridevoid didPopNex}@overrideWidget build(Breturn Conta}}const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@overridevoid dispose() {routeObserver.unsubscribe(this);super.dispose();}
%void didPush()}@overridevoid didPop()}@overridevoid didPushNe}@overridevoid didPopNex}@overrideWidget build(Breturn Conta}}const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@overridevoid dispose() {routeObserver.unsubscribe(this);super.dispose();}125Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%void didPush()}@overridevoid didPop()}@overridevoid didPushNe}@overridevoid didPopNex}@overrideWidget build(Breturn Conta}}const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@overridevoid dispose() {routeObserver.unsubscribe(this);super.dispose();}126Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%void didPush()}@overridevoid didPop()}@overridevoid didPushNe}@overridevoid didPopNex}@overrideWidget build(Breturn Conta}}const ExamplePage({ super.key });@overrideState createState()=> _ExamplePageState();}class _ExamplePageState extends Statewith RouteAware {@overridevoid didChangeDependencies() {super.didChangeDependencies();routeObserver.subscribe(this,ModalRoute.of(context)! as PageRoute,);}@overridevoid dispose() {routeObserver.unsubscribe(this);super.dispose();}XMaster of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%127Handling Flutter lifecycle• 従来のAndroid, iOSのようなライフサイクルイベントはFlutterには用意されていない• Android: onResume, onPause, etc.iOS: viewDidAppear, viewDidDesappear, etc.• 画面遷移• 端末の画面ON/OFF• アプリ自体のバックグラウンドへの移行イベント
%128Handling Flutter lifecycle• 従来のAndroid, iOSのようなライフサイクルイベントはFlutterには用意されていない• Android: onResume, onPause, etc.iOS: viewDidAppear, viewDidDesappear, etc.• 画面遷移• 端末の画面ON/OFF• アプリ自体のバックグラウンドへの移行イベントHandling lifecycleAppLifecycleListener(WidgetBindingObserver)とNavigationObserverを組み合わせる必要があるOKCANCEL
%129sealed class LifecycleEvent {const LifecycleEvent(this.isSystemEvent);final bool isSystemEvent;}class LifecycleEventResumed extends LifecycleEvent {const LifecycleEventResumed(super.isSystemEvent);@overrideString toString() => 'LifecycleEventResumed(isSystemEvent: $isSystemEvent)';}class LifecycleEventPaused extends LifecycleEvent {const LifecycleEventPaused(super.isSystemEvent);@overrideString toString() => 'LifecycleEventPaused(isSystemEvent: $isSystemEvent)';}typedef LifecycleObserverCallback = void Function(LifecycleEvent event);
%130sealed class LifecycleEvent {const LifecycleEvent(this.isSystemEvent);final bool isSystemEvent;}class LifecycleEventResumed extends LifecycleEvent {const LifecycleEventResumed(super.isSystemEvent);@overrideString toString() => 'LifecycleEventResumed(isSystemEvent: $isSystemEvent)';}class LifecycleEventPaused extends LifecycleEvent {const LifecycleEventPaused(super.isSystemEvent);@overrideString toString() => 'LifecycleEventPaused(isSystemEvent: $isSystemEvent)';}
%131sealed class LifecycleEvent {const LifecycleEvent(this.isSystemEvent);final bool isSystemEvent;}class LifecycleEventResumed extends LifecycleEvent {const LifecycleEventResumed(super.isSystemEvent);@overrideString toString() => 'LifecycleEventResumed(isSystemEvent: $isSystemEvent)';}class LifecycleEventPaused extends LifecycleEvent {const LifecycleEventPaused(super.isSystemEvent);@overrideString toString() => 'LifecycleEventPaused(isSystemEvent: $isSystemEvent)';}Navigation or 画面ON, OFFなどのイベントを判別するため
%132final bool isSystemEvent;}class LifecycleEventResumed extends LifecycleEvent {const LifecycleEventResumed(super.isSystemEvent);@overrideString toString() => 'LifecycleEventResumed(isSystemEvent: $isSystemEvent)';}class LifecycleEventPaused extends LifecycleEvent {const LifecycleEventPaused(super.isSystemEvent);@overrideString toString() => 'LifecycleEventPaused(isSystemEvent: $isSystemEvent)';}typedef LifecycleObserverCallback = void Function(LifecycleEvent event);
%133class AppLifecycleObserver with RouteAware {AppLifecycleObserver({required this.routeObserver,required ModalRoute route,required this.callback,}) {_appLifecycleListener = AppLifecycleListener(onResume: () {callback(const LifecycleEventResumed(true));},onPause: () {callback(const LifecycleEventPaused(true));},);routeObserver.subscribe(this, route);}late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {callback(const LifecycleEventResumed(false));}@overridevoid didPop() {callback(const LifecycleEventPaused(false));_appLifecycleListener.dispose();}@overridevoid didPushNext() {callback(const LifecycleEventPaused(false));}@overridevoid didPopNext() {callback(const LifecycleEventResumed(false));}}
%134class AppLifecycleObserver with RouteAware {AppLifecycleObserver({required this.routeObserver,required ModalRoute route,required this.callback,}) {_appLifecycleListener = AppLifecycleListener(onResume: () {callback(const LifecycleEventResumed(true));},onPause: () {callback(const LifecycleEventPaused(true));},);routeObserver.subscribe(this, route);}late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {
%class AppLifecycleObserver with RouteAware {AppLifecycleObserver({required this.routeObserver,required ModalRoute route,required this.callback,}) {_appLifecycleListener = AppLifecycleListener(onResume: () {callback(const LifecycleEventResumed(true));},onPause: () {callback(const LifecycleEventPaused(true));},);routeObserver.subscribe(this, route);}late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {135
%class AppLifecycleObserver with RouteAware {AppLifecycleObserver({required this.routeObserver,required ModalRoute route,required this.callback,}) {_appLifecycleListener = AppLifecycleListener(onResume: () {callback(const LifecycleEventResumed(true));},onPause: () {callback(const LifecycleEventPaused(true));},);routeObserver.subscribe(this, route);}late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {136
%class AppLifecycleObserver with RouteAware {AppLifecycleObserver({required this.routeObserver,required ModalRoute route,required this.callback,}) {_appLifecycleListener = AppLifecycleListener(onResume: () {callback(const LifecycleEventResumed(true));},onPause: () {callback(const LifecycleEventPaused(true));},);routeObserver.subscribe(this, route);}late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {137
%class AppLifecycleObserver with RouteAware {AppLifecycleObserver({required this.routeObserver,required ModalRoute route,required this.callback,}) {_appLifecycleListener = AppLifecycleListener(onResume: () {callback(const LifecycleEventResumed(true));},onPause: () {callback(const LifecycleEventPaused(true));},);routeObserver.subscribe(this, route);}late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {138
%139late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {callback(const LifecycleEventResumed(false));}@overridevoid didPop() {callback(const LifecycleEventPaused(false));_appLifecycleListener.dispose();}@overridevoid didPushNext() {callback(const LifecycleEventPaused(false));}@overridevoid didPopNext() {callback(const LifecycleEventResumed(false));}}
%late final AppLifecycleListener _appLifecycleListener;final RouteObserver routeObserver;final LifecycleObserverCallback callback;@overridevoid didPush() {callback(const LifecycleEventResumed(false));}@overridevoid didPop() {callback(const LifecycleEventPaused(false));_appLifecycleListener.dispose();}@overridevoid didPushNext() {callback(const LifecycleEventPaused(false));}@overridevoid didPopNext() {callback(const LifecycleEventResumed(false));}}140
%141final RouteObserver routeObserver = RouteObserver();Navigator(observers: [routeObserver,],pages: [...],onPopPage: (route, result) {...});MaterialApp(navigatorObservers: [routeObserver,],routes: {...},);GoRouter(observers: [routeObserver,],initialLocation: '/',routes: [...],);Navigator1.0 GoRouterNavigator2.0(Router)利用側
%142利用側class Page extends StatefulWidget {const Page({super.key});@overrideState createState() =>_PageState();}class _PageState extends State {bool _initialized = false;@overridevoid didChangeDependencies() {super.didChangeDependencies();if(!_initialized) {AppLifecycleObserver(routeObserver: routeObserver,route: ModalRoute.of(context)!,callback: (event) {},);_initialized = true;}}@overrideWidget build(BuildContext context) {return Container();}}
%143t {ate() =>eState();class _PageState extends State {bool _initialized = false;@overridevoid didChangeDependencies() {super.didChangeDependencies();if(!_initialized) {AppLifecycleObserver(routeObserver: routeObserver,route: ModalRoute.of(context)!,callback: (event) {},);_initialized = true;}}
%144t {ate() =>eState();class _PageState extends State {bool _initialized = false;@overridevoid didChangeDependencies() {super.didChangeDependencies();if(!_initialized) {AppLifecycleObserver(routeObserver: routeObserver,route: ModalRoute.of(context)!,callback: (event) {},);_initialized = true;}}
%• 問題点• 各Widgetでそれぞれ書くのは冗長• Contextが必要145Handling Flutter lifecycle
%• 問題点• 各Widgetでそれぞれ書くのは冗長• Contextが必要146Handling Flutter lifecyclePageName(String)をKeyにしたLifecycleObserverを作ってみる
%• 問題点• 各Widgetでそれぞれ書くのは冗長• Contextが必要147Handling Flutter lifecyclePageName(String)をKeyにしたLifecycleObserverを作ってみる自作LifecycleObserverは参考程度に
%148class AppLifecycleObserver extends NavigatorObserver {AppLifecycleObserver() {_appLifecycleListener = AppLifecycleListener(onResume: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(true));},onPause: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventPaused(true));},);}late final AppLifecycleListener _appLifecycleListener;final Map> _subscribers =>{};final List> _routeStack = [];@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}@overridevoid didPush(Route route, Route? previousRoute) {_routeStack.add(route);_emitLifecycleEvent(previousRoute, const LifecycleEventPaused(false));_emitLifecycleEvent(route, const LifecycleEventResumed(false));}@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}@overridevoid didReplace({Route? newRoute, Route? oldRoute}) {final index = _routeStack.indexWhere((element) => element == oldRoute);if (_routeStack.last == oldRoute) {_emitLifecycleEvent(oldRoute, const LifecycleEventPaused(false));}_routeStack.remove(oldRoute);if (index >= 0 && newRoute != null) {_routeStack.insert(index, newRoute);}if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(String key, LifecycleObserverCallback callback) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);if (_routeStack.isNotEmpty && _routeStack.last.settings.name == key) {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(false));}}void unsubscribe(String key) {_subscribers.remove(key);}void _emitLifecycleEvent(Route? route, LifecycleEvent event) {final key = route?.settings.name;if (key == null) {return;}final subscribers = _subscribers[key];if (subscribers == null) {return;}for (final subscriber in subscribers) {subscriber.call(event);}}}
%149class AppLifecycleObserver extends NavigatorObserver {AppLifecycleObserver() {_appLifecycleListener = AppLifecycleListener(onResume: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(true));},onPause: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventPaused(true));},);}late final AppLifecycleListener _appLifecycleListener;final Map> _subscribers =>{};final List> _routeStack = [];@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);@overvoidfinif_}_roif_}if_}}void_ap_su}voidfin
%150class AppLifecycleObserver extends NavigatorObserver {AppLifecycleObserver() {_appLifecycleListener = AppLifecycleListener(onResume: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(true));},onPause: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventPaused(true));},);}late final AppLifecycleListener _appLifecycleListener;final Map> _subscribers =>{};final List> _routeStack = [];@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);@overvoidfinif_}_roif_}if_}}void_ap_su}voidfinNavigation stack historyを管理
%151class AppLifecycleObserver extends NavigatorObserver {AppLifecycleObserver() {_appLifecycleListener = AppLifecycleListener(onResume: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(true));},onPause: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventPaused(true));},);}late final AppLifecycleListener _appLifecycleListener;final Map> _subscribers =>{};final List> _routeStack = [];@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);@overvoidfinif_}_roif_}if_}}void_ap_su}voidfinStringのKeyでListenerの管理Keyには route.nameを使う
%152class AppLifecycleObserver extends NavigatorObserver {AppLifecycleObserver() {_appLifecycleListener = AppLifecycleListener(onResume: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(true));},onPause: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventPaused(true));},);}late final AppLifecycleListener _appLifecycleListener;final Map> _subscribers =>{};final List> _routeStack = [];@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);@overvoidfinif_}_roif_}if_}}void_ap_su}voidfinAppLifecycleListenerは同じ
%153class AppLifecycleObserver extends NavigatorObserver {AppLifecycleObserver() {_appLifecycleListener = AppLifecycleListener(onResume: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(true));},onPause: () {_emitLifecycleEvent(_routeStack.last, const LifecycleEventPaused(true));},);}late final AppLifecycleListener _appLifecycleListener;final Map> _subscribers =>{};final List> _routeStack = [];@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);@overvoidfinif_}_roif_}if_}}void_ap_su}voidfinNavigation route の一番上にあるRouteに通知
%154e));));lse));_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);if (_routeStack.isNotEmpty && _routeStack.last.settings.name == key) {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(false));}}void unsubscribe(String key) {_subscribers.remove(key);}void _emitLifecycleEvent(Route? route, LifecycleEvent event) {final key = route?.settings.name;if (key == null) {return;}final subscribers = _subscribers[key];if (subscribers == null) {return;}for (final subscriber in subscribers) {subscriber.call(event);}}}
%155@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}@overridevoid didPush(Route route, Route? previousRoute) {_routeStack.add(route);_emitLifecycleEvent(previousRoute, const LifecycleEventPaused(false));_emitLifecycleEvent(route, const LifecycleEventResumed(false));}@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}}voidfinsubif_}}void_su}voidfinifr}finifr}for
%156@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}@overridevoid didPush(Route route, Route? previousRoute) {_routeStack.add(route);_emitLifecycleEvent(previousRoute, const LifecycleEventPaused(false));_emitLifecycleEvent(route, const LifecycleEventResumed(false));}@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}}voidfinsubif_}}void_su}voidfinifr}finifr}for
%157@overridevoid didPop(Route route, Route? previousRoute) {_routeStack.remove(route);_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}@overridevoid didPush(Route route, Route? previousRoute) {_routeStack.add(route);_emitLifecycleEvent(previousRoute, const LifecycleEventPaused(false));_emitLifecycleEvent(route, const LifecycleEventResumed(false));}@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}}voidfinsubif_}}void_su}voidfinifr}finifr}for
%158true));rue));@overridevoid didReplace({Route? newRoute, Route? oldRoute}) {final index = _routeStack.indexWhere((element) => element == oldRoute);if (_routeStack.last == oldRoute) {_emitLifecycleEvent(oldRoute, const LifecycleEventPaused(false));}_routeStack.remove(oldRoute);if (index >= 0 && newRoute != null) {_routeStack.insert(index, newRoute);}if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(String key, LifecycleObserverCallback callback) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);
%159true));rue));@overridevoid didReplace({Route? newRoute, Route? oldRoute}) {final index = _routeStack.indexWhere((element) => element == oldRoute);if (_routeStack.last == oldRoute) {_emitLifecycleEvent(oldRoute, const LifecycleEventPaused(false));}_routeStack.remove(oldRoute);if (index >= 0 && newRoute != null) {_routeStack.insert(index, newRoute);}if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(String key, LifecycleObserverCallback callback) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);Page1Page2Page3Page1Page4Page3Page1Page2Page3Page1Page2Page4
%160true));rue));@overridevoid didReplace({Route? newRoute, Route? oldRoute}) {final index = _routeStack.indexWhere((element) => element == oldRoute);if (_routeStack.last == oldRoute) {_emitLifecycleEvent(oldRoute, const LifecycleEventPaused(false));}_routeStack.remove(oldRoute);if (index >= 0 && newRoute != null) {_routeStack.insert(index, newRoute);}if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(String key, LifecycleObserverCallback callback) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);
%161;if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(String key, LifecycleObserverCallback callback) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);if (_routeStack.isNotEmpty && _routeStack.last.settings.name == key) {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(false));}}void unsubscribe(String key) {_subscribers.remove(key);}void _emitLifecycleEvent(Route? route, LifecycleEvent event) {final key = route?.settings.name;if (key == null) {
%162;if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(String key, LifecycleObserverCallback callback) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);if (_routeStack.isNotEmpty && _routeStack.last.settings.name == key) {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(false));}}void unsubscribe(String key) {_subscribers.remove(key);}void _emitLifecycleEvent(Route? route, LifecycleEvent event) {final key = route?.settings.name;if (key == null) {
%163;if (_routeStack.last == newRoute) {_emitLifecycleEvent(newRoute, const LifecycleEventResumed(false));}}void dispose() {_appLifecycleListener.dispose();_subscribers.clear();}void subscribe(ɹ String key,LifecycleObserverCallback callback, {bool notifyImmediately = true,}) {final Set subscribers =_subscribers.putIfAbsent(key, () => {});subscribers.add(callback);if (notifyImmediately &&_routeStack.isNotEmpty && _routeStack.last.settings.name == key) {_emitLifecycleEvent(_routeStack.last, const LifecycleEventResumed(false));}}void unsubscribe(String key) {_subscribers.remove(key);すぐに通知されてしまうので、適宜フラグで送らないようにするのも良い
%164final goRouter = GoRouter(initialLocation: '/',observers: [appLifecycleObserver,],routes: [GoRoute(path: '/',pageBuilder: (context, state) {return MaterialPage(key: state.pageKey,name: '/',child: const MyHomePage(),);},),GoRoute(path: '/page1',pageBuilder: (context, state) {return MaterialPage(key: state.pageKey,name: 'page1',child: const Page1(),);},),GoRoute(path: '/page2',pageBuilder: (context, state) {return MaterialPage(key: state.pageKey,name: 'page2',child: const Page2(),);},),],);利用側
%165final goRouter = GoRouter(initialLocation: '/',observers: [appLifecycleObserver,],routes: [GoRoute(path: '/',pageBuilder: (context, state) {return MaterialPage(key: state.pageKey,name: '/',child: const MyHomePage(),);},),GoRoute(path: '/page1',pageBuilder: (context, state) {return MaterialPage(key: state.pageKey,name: 'page1',child: const Page1(),);},),GoRoute(path: '/page2',pageBuilder: (context, state) {return MaterialPage(key: state.pageKey,name: 'page2',child: const Page2(),);},),],);利用側MaterialPage.nameにnameをセット
%166利用側class _PageState extends State {bool _initialized = false;@overridevoid didChangeDependencies() {super.didChangeDependencies();if(!_initialized) {appLifecycleObserver.subscribe('pageName', (event) {switch (event) {case LifecycleEventResumed():print('onResume: ${event.isSystemEvent}');case LifecycleEventPaused():print('onPause: ${event.isSystemEvent}');}});_initialized = true;}}@overrideWidget build(BuildContext context) {return Container();}}
%167利用側class _PageState extends State {bool _initialized = false;@overridevoid didChangeDependencies() {super.didChangeDependencies();if(!_initialized) {appLifecycleObserver.subscribe('pageName', (event) {switch (event) {case LifecycleEventResumed():print('onResume: ${event.isSystemEvent}');case LifecycleEventPaused():print('onPause: ${event.isSystemEvent}');}});_initialized = true;}}@overrideWidget build(BuildContext context) {return Container();}}
%168利用側class _PageState extends State {bool _initialized = false;@overridevoid initState() {super.initState();if(!_initialized) {appLifecycleObserver.subscribe('pageName', (event) {switch (event) {case LifecycleEventResumed():print('onResume: ${event.isSystemEvent}');case LifecycleEventPaused():print('onPause: ${event.isSystemEvent}');}});_initialized = true;}}@overrideWidget build(BuildContext context) {return Container();}}Context不要なのでinitStateでも呼べる
%おまけ169
%170Riverpodで使うなら
%171@Riverpod(keepAlive: true)AppLifecycleObserver appLifecycleObserver(AppLifecycleObserverRef ref,)=> AppLifecycleObserver();
%172@riverpodStream appLifecycleStream(AppLifecycleStreamRef ref,String key,) async* {StreamController eventController = StreamController();final provider = ref.watch(appLifecycleObserverProvider);provider.subscribe(key, (LifecycleEvent event) {eventController.add(event);});ref.onDispose(() {provider.unsubscribe(key);});yield* eventController.stream;}
%Stream appLifecycleStream(AppLifecycleStreamRef ref,String key,) async* {StreamController eventController = StreamControllfinal provider = ref.watch(appLifecycleObserverProvider);provider.subscribe(key, (LifecycleEvent event) {eventController.add(event);});ref.onDispose(() {provider.unsubscribe(key);});yield* eventController.stream;}173appLifecycleObserverは内部で参照
%174Stream appLifecycleStream(AppLifecycleStreamRef ref,String key,) async* {StreamController eventController = StreamControllfinal provider = ref.watch(appLifecycleObserverProvider);provider.subscribe(key, (LifecycleEvent event) {eventController.add(event);});ref.onDispose(() {provider.unsubscribe(key);});yield* eventController.stream;}渡されたKey(Route name)でsubscribe
%175Stream appLifecycleStream(AppLifecycleStreamRef ref,String key,) async* {StreamController eventController = StreamControllfinal provider = ref.watch(appLifecycleObserverProvider);provider.subscribe(key, (LifecycleEvent event) {eventController.add(event);});ref.onDispose(() {provider.unsubscribe(key);});yield* eventController.stream;}Disposeで自動unsubscribe
%176利用側final event = ref.watch(appLifecycleStreamProvider('page1'));switch(event) {case AsyncData(:final value):print(value);}
%177goRouter.routerDelegate.currentConfiguration.routes;GoRouter内で管理しているNavigation historyを取得できる
%178@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}@overridevoid didRemove(Route route, Route? previousRoute) {final top =goRouter.routerDelegate.currentConfiguration.routes.lastOrNull;if (top != null && (top as GoRoute).name == route.settings.name) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}}自分で管理GoRouterを参照
%179@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}@overridevoid didRemove(Route route, Route? previousRoute) {final top =goRouter.routerDelegate.currentConfiguration.routes.lastOrNull;if (top != null && (top as GoRoute).name == route.settings.name) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}}自分で管理GoRouterを参照
%180@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}@overridevoid didRemove(Route route, Route? previousRoute) {final top =goRouter.routerDelegate.currentConfiguration.routes.lastOrNull;if (top != null && (top as GoRoute).name == route.settings.name) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}}自分で管理GoRouterを参照Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%181@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}@overridevoid didRemove(Route route, Route? previousRoute) {final top =goRouter.routerDelegate.currentConfiguration.routes.lastOrNull;if (top != null && (top as GoRoute).name == route.settings.name) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}}自分で管理GoRouterを参照Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%X@overridevoid didRemove(Route route, Route? previousRoute) {if (_routeStack.last == route) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}_routeStack.remove(route);}@overridevoid didRemove(Route route, Route? previousRoute) {final top =goRouter.routerDelegate.currentConfiguration.routes.lastOrNull;if (top != null && (top as GoRoute).name == route.settings.name) {_emitLifecycleEvent(route, const LifecycleEventPaused(false));_emitLifecycleEvent(previousRoute, const LifecycleEventResumed(false));}}自分で管理GoRouterを参照Master of Flutter lifecycleIntroductionWidget lifecycleApp lifecycleNavigation & RoutingHandling Flutter lifecycleSummary
%• Widget, App, Navigationそれぞれのライフサイクルを学んだ• Flutter3.13.0からイベントの発火タイミングが変わったので注意が必要• FlutterはEverything is a widgetになっているため、画面遷移のライフサイクルイベントはNavigationを考慮する必要がある• それぞれを組み合わせて初めてFlutterのライフサイクルにあった処理ができる• 今日のサンプルコードhttps://github.com/AAkira/flutter_lifecycle_example182Summary
Thank you!@_a_akiraWe are hiring!https://jobs.m3.com/engineer/
aakira
sansantech
takanorip
sinsoku
fedepaol
h1kita
yuya4
hfukunak
shkitayama
codenote
hakubishin3
rynsuke
revcomm_inc
brad_frost
frogandcode
reverentgeek
eileencodes
geeforr
keithpitt
jnunemaker
nonsquared
kneath
edds
lauravandoore
tenderlove