Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterで画面遷移を検知する
Search
kuwapp
April 18, 2018
Programming
4
8.4k
Flutterで画面遷移を検知する
Flutter meetup Tokyo #1
Flutterで画面遷移を検知する
kuwapp
April 18, 2018
Tweet
Share
More Decks by kuwapp
See All by kuwapp
FlutterPluginの作り方
kuwapp
7
4.3k
Flutter開発に役立つ Package Plugin 10選
kuwapp
5
16k
Flutter アニメーションはじめの一歩
kuwapp
1
1.4k
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
160
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
150
CSC305 Lecture 05
javiergs
PRO
0
210
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
670
オープンソースソフトウェアへの解像度🔬
utam0k
14
2.7k
CSC509 Lecture 05
javiergs
PRO
0
300
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Go言語はstack overflowの夢を見るか?
logica0419
0
230
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Unsuck your backbone
ammeep
671
58k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Being A Developer After 40
akosma
91
590k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Agile that works and the tools we love
rasmusluckow
331
21k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
Flutterで画面遷移を検知する Flutter Meetup Tokyo #1
About Me • @kuwapp_dev / Yusuke Hata • モイ株式会社 •
Androidエンジニア • Flutter は alpha のときに二ヶ月程 • メイド喫茶駆動開発
画面遷移を検知できれば... 以下のようなケースに対応できる!!!! 1. 別画面に遷移したら非同期処理停止したい 2. 画面閉じる前に大事なデータ保存しておきたい 3. 画面に戻ったら最新のデータ読み込みたい
Flutter の画面遷移方法 • Navigator.pushNamed(context, “/detail”); ◦ 別画面へ遷移する • Navigator.pop(context); ◦
別画面から戻る(今いる画面を pop する)
どうやって検知しよう??
ベタ書きする?? 画面遷移する処理の上にベタ書きする
(ヾノ・∀・`)ナイナイ
ベタ書きすると • Navigator.push の呼び出し時に必ず書く必要がある • 書き忘れが生じるかもしれない バグのもと!!
画面遷移をいい感じに検知する仕 組みはないのか??
そこで RouteObserver
RouteObserver RouteObserver に登録しておけば、画面遷移時(push pop時)に登録しておいたリス ナーを呼び出してくれる!!
RouteObserver 準備 インスタンスを生 成 navigatorObser versに登録
RouteObserver イベントの購読 • routeObserver.subscribe(this,ModalRoute.of(context)); ◦ push、popのイベントを購読する。 • routeObserver.unsubscribe(this); ◦ イベントの購読をやめる。State
の dispose とかで呼び出そう。 thisにはコールバック先のRouteAwareを指定
RouteObserver 購読 リスナーの RouteAwareを実装 画面遷移のイベントを購読 イベントの購読解除 RouteAware のメソッド push pop
時に呼び出される
RouteObserver RouteAware のメソッド • void didPopNext() ◦ 上に積まれていた画面が pop され自身が表示されたとき
• void didPush() ◦ 自身が push されて表示されたとき • void didPop() ◦ 自身が pop されたとき • void didPushNext() ◦ 次の画面が push されたとき(自身は非表示)
これで画面遷移を検知できるように なった
これでめでたしと思いきや....
RouteObserver は1つの画面 (Route)に1つのリスナーしか登録で きない
RouteObserver の内部実装を見ると Map でリスナーを保持していて 1つの T (Route) に対して 1つの RouteAware(リス
ナー) しか登録できないようになっている final Map<T, RouteAware> _listeners = <T, RouteAware>{}; まじか...
というのは幻想だった
alpha版のときは無理だったが いつの間にかできるようになってい た
Before After Before final Map<T, RouteAware> _listeners = <T, RouteAware>{};
After final Map<R, Set<RouteAware>> _listeners = <R, Set<RouteAware>>{};
Flutterは日々進化する!!!
まとめ • RouteObserver で画面遷移を検知できる • Flutterは日々進化する!最高!
ありがとうございました