Flutterで画面遷移を検知する

Flutter meetup Tokyo #1
Flutterで画面遷移を検知する

Transcript

1. Flutterで画面遷移を検知する Flutter Meetup Tokyo #1
2. About Me • @kuwapp_dev / Yusuke Hata • モイ株式会社 • Androidエンジニア • Flutter は alpha のときに二ヶ月程 • メイド喫茶駆動開発
3. 画面遷移を検知できれば... 以下のようなケースに対応できる！！！！ 1. 別画面に遷移したら非同期処理停止したい 2. 画面閉じる前に大事なデータ保存しておきたい 3. 画面に戻ったら最新のデータ読み込みたい
4. Flutter の画面遷移方法 • Navigator.pushNamed(context, “/detail”); ◦ 別画面へ遷移する • Navigator.pop(context); ◦ 別画面から戻る(今いる画面を pop する)
5. どうやって検知しよう？？
6. ベタ書きする？？ 画面遷移する処理の上にベタ書きする
7. (ヾﾉ･∀･`)ﾅｲﾅｲ
8. ベタ書きすると • Navigator.push の呼び出し時に必ず書く必要がある • 書き忘れが生じるかもしれない バグのもと！！
9. 画面遷移をいい感じに検知する仕 組みはないのか？？
10. そこで RouteObserver
11. RouteObserver RouteObserver に登録しておけば、画面遷移時(push pop時)に登録しておいたリス ナーを呼び出してくれる！！
12. RouteObserver 準備 インスタンスを生 成 navigatorObser versに登録
13. RouteObserver イベントの購読 • routeObserver.subscribe(this,ModalRoute.of(context)); ◦ push、popのイベントを購読する。 • routeObserver.unsubscribe(this); ◦ イベントの購読をやめる。State の dispose とかで呼び出そう。 thisにはコールバック先のRouteAwareを指定
14. RouteObserver 購読 リスナーの RouteAwareを実装 画面遷移のイベントを購読 イベントの購読解除 RouteAware のメソッド push pop 時に呼び出される
15. RouteObserver RouteAware のメソッド • void didPopNext() ◦ 上に積まれていた画面が pop され自身が表示されたとき • void didPush() ◦ 自身が push されて表示されたとき • void didPop() ◦ 自身が pop されたとき • void didPushNext() ◦ 次の画面が push されたとき(自身は非表示)
16. これで画面遷移を検知できるように なった
17. これでめでたしと思いきや....
18. RouteObserver は1つの画面 (Route)に1つのリスナーしか登録で きない
19. RouteObserver の内部実装を見ると Map でリスナーを保持していて 1つの T (Route) に対して 1つの RouteAware(リス ナー) しか登録できないようになっている final Map<T, RouteAware> _listeners = <T, RouteAware>{}; まじか...
20. というのは幻想だった
21. alpha版のときは無理だったが いつの間にかできるようになってい た
22. Before After Before final Map<T, RouteAware> _listeners = <T, RouteAware>{}; After final Map<R, Set<RouteAware>> _listeners = <R, Set<RouteAware>>{};
23. Flutterは日々進化する！！！
24. まとめ • RouteObserver で画面遷移を検知できる • Flutterは日々進化する！最高！
25. ありがとうございました