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.2k
Flutterで画面遷移を検知する
Flutter meetup Tokyo #1
Flutterで画面遷移を検知する
kuwapp
April 18, 2018
Tweet
Share
More Decks by kuwapp
See All by kuwapp
FlutterPluginの作り方
kuwapp
7
4.2k
Flutter開発に役立つ Package Plugin 10選
kuwapp
5
16k
Flutter アニメーションはじめの一歩
kuwapp
1
1.4k
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
250
VS Code Update for GitHub Copilot
74th
1
310
Is Xcode slowly dying out in 2025?
uetyo
1
190
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
童醫院敏捷轉型的實踐經驗
cclai999
0
180
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
100
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
910
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building Adaptive Systems
keathley
43
2.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Fireside Chat
paigeccino
37
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Six Lessons from altMBA
skipperchong
28
3.8k
GraphQLとの向き合い方2022年版
quramy
47
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Unsuck your backbone
ammeep
671
58k
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は日々進化する!最高!
ありがとうございました