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.3k
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
私の後悔をAWS DMSで解決した話
hiramax
4
170
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
tool ディレクティブを導入してみた感想
sgash708
1
160
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
670
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.7k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
160
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
620
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
940
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Faster Mobile Websites
deanohume
309
31k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Producing Creativity
orderedlist
PRO
347
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How to Think Like a Performance Engineer
csswizardry
26
1.8k
Balancing Empowerment & Direction
lara
3
600
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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は日々進化する!最高!
ありがとうございました