Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutterの Bottom Navigation による画面遷移について

txmn
August 28, 2018

Flutterの Bottom Navigation による画面遷移について

Flutter Meetup Tokyo #4 の初心者枠LT

txmn

August 28, 2018
Tweet

Other Decks in Programming

Transcript

  1. About Me • txmn / Haruki Watanabe • 株式会社フォニム •

    サーバーサイドエンジニア(Rails) • フロントでReactやVue使ったり… • 既存WEBサービスのスマホアプリを作りたい • スマホアプリ開発経験無し • 一瞬 React Native x Expo に寄り道してFlutterへ • UdacityのGoogle公式のコースで学習。ちょうど1週間くらい。         Twitter  
  2. Navigator class でとりあえずやってみる Push pushReplacement     •

    Navigator.popで戻れる • “<” が自動でつく(下図参照) • 一方通行 • とりあえずこっち使うか…
  3. しかし… たくさん問題があります • その都度新しいWidgetをbuildすることの負担 • 特にWidget内部でAPIを用いる場合など • タブ切り替え時にWidget内部の状態を維持して おきたい •

    Twitterなどメジャーなアプリと同様 • 遷移時の挙動がMaterial Design ガイドラインに 反する • “ Don’t. Avoid using lateral (left-and-right) motion to transition between views.”
  4. じっさいにやってみる 左図のようなアプリを考える • Scaffold • body • それぞれのtab itemに対応するWidget •

    TabNavigator(※custom widget) • bottomNavigationBar • items 1. Home 2. Search 3. Bookmark 4. Message 5. Account
  5. 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:舞台裏)
  6. Step 3 : Android back button handler • iOSには無いがAndroidにはback buttonがある

    • そこでユーザーがpop先のRouteを 失った時に備えて、WillPopScope Classを用いて、事前にコールバック 先を登録しておく