Be simple

”当たり前”が誰かのためになる

FlutterでBottomNavigationを3タブより多くしたい時のメモ

はじめに

今日は雑なメモです。

Flutterでアプリ開発をしていて、3タブより多くしたい場合にちょっとだけハマったのでその時の対応についてメモしておきます。

 

FlutterでBottomNavigationを3タブより多くしたい時

BottomNavigationを利用している場合には、次のようにBottomNavigationBarの中にBottomNavigationBarItemを組み込んでいくと思います。

bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.today),
title: Text('ほげ'),
),
BottomNavigationBarItem(
icon: Icon(Icons.grid_on),
title: Text('ふが'),
),
BottomNavigationBarItem(
icon: Icon(Icons.note),
title: Text('hoge')
),
],
),

 

この時に、例えば4タブにしたい時にBottomNavigationItemを次のようにただ追加してみます。

bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.today),
title: Text('ほげ'),
),
BottomNavigationBarItem(
icon: Icon(Icons.grid_on),
title: Text('ふが'),
),
BottomNavigationBarItem(
icon: Icon(Icons.note),
title: Text('hoge')
),
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt),
title: Text('fuga')
),
],
),

 

この状態でビルドすると、次のような表示になります。

今回は、私のサンプルアプリで実行してみました。

 

f:id:rozkey59:20190112172045p:plain

サンプルアプリ

単純に追加するだけでは、下部のタブが正しく表示されません。

正しくはBottomNavigationBarに新しく追加したコメントの一行を追加してください

bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
type: BottomNavigationBarType.fixed, // 追加する
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.today),
title: Text('ほげ'),
),
BottomNavigationBarItem(
icon: Icon(Icons.grid_on),
title: Text('ふが'),
),
BottomNavigationBarItem(
icon: Icon(Icons.note),
title: Text('hoge')
),
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt),
title: Text('fuga')
),
],
),

 

この状態でビルドすると、次の表示が確認できます。

f:id:rozkey59:20190112172321p:plain

サンプルアプリ:修正後

 

BottomNavigationBarTypeのfixedを設定してあげることで幅を調整し、レンダリングを正常に行うことができるようになります。

 

おわりに

開発で気づいた小ネタでした。

同じようにハマる同士がいたら、何かの助けになれば幸いです。

 

最後まで見ていただきありがとうございました。

それではまたの機会に。