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