Slide 1

Slide 1 text

Flutterの Bottom Navigation による画面遷移について Flutter Meetup Tokyo #4 Beginner Lightning Talk

Slide 2

Slide 2 text

About Me • txmn / Haruki Watanabe • 株式会社フォニム • サーバーサイドエンジニア(Rails) • フロントでReactやVue使ったり… • 既存WEBサービスのスマホアプリを作りたい • スマホアプリ開発経験無し • 一瞬 React Native x Expo に寄り道してFlutterへ • UdacityのGoogle公式のコースで学習。ちょうど1週間くらい。         Twitter  

Slide 3

Slide 3 text

Bottom Navigation を実装したい! https://material.io/design/components/bottom-navigation.html

Slide 4

Slide 4 text

Navigator class でとりあえずやってみる Push pushReplacement     • Navigator.popで戻れる • “<” が自動でつく(下図参照) • 一方通行 • とりあえずこっち使うか…

Slide 5

Slide 5 text

しかし… たくさん問題があります • その都度新しいWidgetをbuildすることの負担 • 特にWidget内部でAPIを用いる場合など • タブ切り替え時にWidget内部の状態を維持して おきたい • Twitterなどメジャーなアプリと同様 • 遷移時の挙動がMaterial Design ガイドラインに 反する • “ Don’t. Avoid using lateral (left-and-right) motion to transition between views.”

Slide 6

Slide 6 text

解決策をググってみる https://github.com/bizz84/nested-navigation-demo-flutter ありがとうございます

Slide 7

Slide 7 text

じっさいにやってみる 左図のようなアプリを考える • Scaffold • body • それぞれのtab itemに対応するWidget • TabNavigator(※custom widget) • bottomNavigationBar • items 1. Home 2. Search 3. Bookmark 4. Message 5. Account

Slide 8

Slide 8 text

Step 1 : building all and offstage            • それぞれのタブに対応するWidget(以下①)を全て生成する • この時、①内部でも基本的にNavigatorを使うことになるので、アプリ全体で一意に Navigatorを定めるためにGlobalKeyを①に流し込む • 変数currentTabの初期値をhomeに設定する • Offstage class を用いてcurrentTab以外の全てのタブをoffstageにする • Offstage(offstage: bool) で隠すことが出来る。 • cssのdisplay:none的な感じ。ちなみにoffstage(n:舞台裏)

Slide 9

Slide 9 text

Step 2 : stacking all • Step 1で作成したそれぞれのタブに対応するWidgetを全て1つに重ねる • Stack Classでラップするだけで良い 

Slide 10

Slide 10 text

Step 1, 2のそれぞれのコード部分抜粋 主にOffstageとNavigator key部分 Stackと①全生成について

Slide 11

Slide 11 text

Step 3 : Android back button handler • iOSには無いがAndroidにはback buttonがある • そこでユーザーがpop先のRouteを 失った時に備えて、WillPopScope Classを用いて、事前にコールバック 先を登録しておく

Slide 12

Slide 12 text

実際の画面     

Slide 13

Slide 13 text

まとめ • 非表示のWidgetをStackで重ねておいて、タブ選択時に表示をする というのはとても新鮮でした。 • iOS/AndroidのネイティブAppではどのようにBottom Navigationの 遷移を対応しているのか非常に気になりました。 • 拙い発表でしたが、最後までご清聴頂きありがとうございました。