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
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
250
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
Jakarta EE Meets AI
ivargrimstad
0
400
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.3k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
CDK引数設計道場100本ノック
badmintoncryer
2
590
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Site-Speed That Sticks
csswizardry
10
730
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Producing Creativity
orderedlist
PRO
346
40k
A Tale of Four Properties
chriscoyier
160
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making Projects Easy
brettharned
117
6.3k
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の 遷移を対応しているのか非常に気になりました。 • 拙い発表でしたが、最後までご清聴頂きありがとうございました。