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
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
170
理論と実務のギャップを超える
eycjur
0
120
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
960
CSC305 Lecture 06
javiergs
PRO
0
210
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
150
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
390
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
450
Devvox Belgium - Agentic AI Patterns
kdubois
1
100
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
650
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Adaptive Systems
keathley
43
2.8k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
A better future with KSS
kneath
239
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Side Projects
sachag
455
43k
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の 遷移を対応しているのか非常に気になりました。 • 拙い発表でしたが、最後までご清聴頂きありがとうございました。