18. FlutterのTabBarのカスタマイズ、Tabの高さの変更

今回は前回学習したTabBarをどこまでカスタマイズできるかについて試してみたいと思います。

Tamappe Life Log

12. FlutterのTabbarであるBottomNavigationBarについて学習する

🕒️February 2, 2020

今回はiOSでいうところのUITabbarControllerに当たるBottomNavigationBarについて学習します。BottomNavigationBar とはAppBarのように画面の上側ではなく、下側にもバーを表示させたいことがあります。この下側にバーを設置するウィジェットがFlutter ではBottomNavigationBarが用意されています。BottomNavigationBarの基本は以下の通りです。BottomNavigationBar( currentIndex: , items: <BottomNavigationBarItem>, onTap: , )それぞれのプロパティの解説は次のようになります。プロパティ役割cu...

TabBar の高さの変更

TabBarのデフォルトの高さがどれくらいか情報が見つかりませんでしたが、タブの高さを変更することはできるみたいです。
TabにchildプロパティがありますのでPaddingウィジェットを使えばウィジェットに余白を入れることができます。

Tab(
      child: Padding(
        /// left: 0, top: 5, right: 0, bottom: 5
        padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
        child: Tab(text: 'Home'),
      ),
    )

これでTabに上下5pxの予約を追加できます。

またはTabBar自体の領域の高さもPreferredSizeウィジェットを間に入れると実現できそうです。

PreferredSize(
          preferredSize: Size.fromHeight(80),
          child: TabBar(
            labelStyle: TextStyle(color: Colors.white),
            unselectedLabelColor: Colors.black,
            controller: _tabController,
            tabs: tabs,
            indicatorColor: Colors.yellow,
          ),
        )

同時にインジケータの色をyellowに、未選択のtabのテキストをblackに、選択済みのテキストをwhiteに変更しています。

TabBarの領域の高さを変更する

Tamappe

モバイルアプリエンジニア

XContact

都内の会社で働いているモバイルアプリエンジニアのTamappeです。今はiOSとAndroidの両OSを開発しています。使用言語はSwift/Objective-C/Java/Kotlin/Dartです。趣味はポーカーとスプラトゥーン2。最近は、シミュレーションゲームもやっています。