Flutterで画面遷移を検知する

A3eaea9adbe984dcb6578070ffce1830?s=47 kuwapp
April 18, 2018

 Flutterで画面遷移を検知する

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

A3eaea9adbe984dcb6578070ffce1830?s=128

kuwapp

April 18, 2018
Tweet

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