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. ありがとうございました