Flutterでタブバーウィジェットを追加する方法
- 2022年11月11日
- 技術情報
FlutterのTabBarとTabBarViewを使って、タブバーウィジェットを追加する方法を紹介します。
まずはTabBarとTabBarViewを使う前に,DefaultTabController()でウィジェットツリーをラップしておきます.
DefaultTabController(
initialIndex: 1,
length:3,
child:Scaffold(
)
)
initialIndexのところで開始するIndexを変更することができます。
initialIndex: 0,
アプリ内でタブを表示したい場所にTabBar()を配置します。今の例では、AppBarの下で配置しています。
AppBar(
bottom: TabBar(
tabs: [
Tab(text: "Home",),
Tab(text: "About Us",),
Tab(text: "Contact Us",)
]
),
),
次に、コンテンツを表示したい場所にTabBarView()を配置します。
TabBarView(
children: [
Container(
height: 400,
color: Colors.red,
),
Container(
height: 400,
color: Colors.green,
),
Container(
height: 400,
color: Colors.white,
)
]
)
金曜担当 – Ami
asahi at 2022年11月11日 10:00:00