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の Bottom Navigation による画面遷移について
Search
txmn
August 28, 2018
Programming
4
6k
Flutterの Bottom Navigation による画面遷移について
Flutter Meetup Tokyo #4 の初心者枠LT
txmn
August 28, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
870
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
Select API from Kotlin Coroutine
jmatsu
1
190
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.7k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
570
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Faster Mobile Websites
deanohume
307
31k
Code Reviewing Like a Champion
maltzj
524
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Producing Creativity
orderedlist
PRO
346
40k
Docker and Python
trallard
44
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
4 Signs Your Business is Dying
shpigford
184
22k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
Flutterの Bottom Navigation による画面遷移について Flutter Meetup Tokyo #4 Beginner Lightning
Talk
About Me • txmn / Haruki Watanabe • 株式会社フォニム •
サーバーサイドエンジニア(Rails) • フロントでReactやVue使ったり… • 既存WEBサービスのスマホアプリを作りたい • スマホアプリ開発経験無し • 一瞬 React Native x Expo に寄り道してFlutterへ • UdacityのGoogle公式のコースで学習。ちょうど1週間くらい。 Twitter
Bottom Navigation を実装したい! https://material.io/design/components/bottom-navigation.html
Navigator class でとりあえずやってみる Push pushReplacement •
Navigator.popで戻れる • “<” が自動でつく(下図参照) • 一方通行 • とりあえずこっち使うか…
しかし… たくさん問題があります • その都度新しいWidgetをbuildすることの負担 • 特にWidget内部でAPIを用いる場合など • タブ切り替え時にWidget内部の状態を維持して おきたい •
Twitterなどメジャーなアプリと同様 • 遷移時の挙動がMaterial Design ガイドラインに 反する • “ Don’t. Avoid using lateral (left-and-right) motion to transition between views.”
解決策をググってみる https://github.com/bizz84/nested-navigation-demo-flutter ありがとうございます
じっさいにやってみる 左図のようなアプリを考える • Scaffold • body • それぞれのtab itemに対応するWidget •
TabNavigator(※custom widget) • bottomNavigationBar • items 1. Home 2. Search 3. Bookmark 4. Message 5. Account
Step 1 : building all and offstage
• それぞれのタブに対応するWidget(以下①)を全て生成する • この時、①内部でも基本的にNavigatorを使うことになるので、アプリ全体で一意に Navigatorを定めるためにGlobalKey<NavigatorState>を①に流し込む • 変数currentTabの初期値をhomeに設定する • Offstage class を用いてcurrentTab以外の全てのタブをoffstageにする • Offstage(offstage: bool) で隠すことが出来る。 • cssのdisplay:none的な感じ。ちなみにoffstage(n:舞台裏)
Step 2 : stacking all • Step 1で作成したそれぞれのタブに対応するWidgetを全て1つに重ねる • Stack
Classでラップするだけで良い
Step 1, 2のそれぞれのコード部分抜粋 主にOffstageとNavigator key部分 Stackと①全生成について
Step 3 : Android back button handler • iOSには無いがAndroidにはback buttonがある
• そこでユーザーがpop先のRouteを 失った時に備えて、WillPopScope Classを用いて、事前にコールバック 先を登録しておく
実際の画面
まとめ • 非表示のWidgetをStackで重ねておいて、タブ選択時に表示をする というのはとても新鮮でした。 • iOS/AndroidのネイティブAppではどのようにBottom Navigationの 遷移を対応しているのか非常に気になりました。 • 拙い発表でしたが、最後までご清聴頂きありがとうございました。