18. FlutterのTabBarのカスタマイズ、Tabの高さの変更
今回は前回学習したTabBarをどこまでカスタマイズできるかについて試してみたいと思います。
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に変更しています。