FlutterでiOS風のBottomNavigationBarを実装する

HeavenOSK
HeavenOSK
Sep 9, 2018 · 4 min read

空いた時間にFlutterを触りはじめるようになって1ヶ月ほどになり、Flutterのコードを読むのも書くのも楽しくなってきました。

Flutterは公式のUIライブラリが充実しており、material.dartcupertino.dartを組み合わせれば、それなりに見た目が良いものを作れるのが特徴の一つだと思います。

ただ、勝手を知らないとイマイチ分からない事もあり、その一つがiOS風の”BottomNavigationBar”だと思います。

今回は、”BottomNavigationBar”の実装の仕方について書きます。


BottomNavigationBar

TwitterアプリやInstagramアプリで使われている、いわゆる「下タブ」のUIで、見た目だけならmaterial.dartBottomNavigationBar Class を使えば簡単に実装できます。

例えば、以下の記事では、BottomNavigationBar Classを使ったTwitter風のサンプルアプリの作り方が紹介されています。

私も同じ方法で、Twitter風のアプリを作ろうとしたことがありますが、一つ問題があります。

このコードでは、各タブごとにページ遷移の履歴を保持しておく事が出来ません。


実装方法

解決法の一つは、ページ遷移の履歴を保持する仕組みを「自分で実装する」こと。

以下のページで紹介されています。(記事の著者のbizz84さんは、Flutterに関する良質な記事を上げて下さっていて非常に参考になります)

日本語で読みたいなら、以下のスライドで紹介されています。

これらで紹介されているOffStage Classを用いた実装はCoolで、一度自分で書いてみると結構感動しました。

ですが、書いてみるのは一回で良いと思います。

結論:公式のライブラリを使いましょう

上記で記事を参考に自分で実装するのもいいですが、基本的には公式のライブラリを使うのがいいと思います。

Flutterではレイアウトを組む時は Scaffold Classを用いるのが普通ですが、各タブにページ遷移の履歴を保持させたい時は、CupertinoTabScaffold Classを使いましょう。

CupertinoTabScaffold Classを使えば、各タブにページ遷移の履歴を保持させる事が出来ます。

ちなみに、CupertinoTabScaffold Classの内部実装は、bizz84さんの記事で紹介されているものとそっくりです。

Flutter Galleryで紹介されている下タブを用いたDemoが紹介されていますが、CupertinoTabScaffold Classを用いて実装されています。

こちらのコードを参考にして頂くとよいかと思います。

所感

今回はじめてFlutterの記事を書きました。

FlutterはまだCommunityが成熟していない印象で、どの情報が有用なのか分からない事もあり、大事な情報を取りこぼしてしまう事があります。

(今回紹介した CupertinoTabScaffold Classについても、Flutter Galleryのソースコードでしか見たことないです。)

今後、Flutterを使っていく上で大切だと思った情報について、記事を書いていこうと思います。

P.S.デモ画像やソースコードを載せた方が良い気がしますが、少し心理的障壁があるので今回は割愛します。記事を書くのに慣れてきたら、載せていこうと思います。

HeavenOSK

Written by

HeavenOSK

Full time Flutter App Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade