どうも、ちょげ(@chogetarou)です。
AppBarの下にタブバーを表示するには、どうしたらいいのでしょうか？
方法
AppBarの下にタブバーを表示するには、まずDefaultTabControllerで、Scffoldウェジェットをラップします。
DefaultTabController(
length: 3, //タブの数
child: Scaffold(
・・・
),
);次に、AppBarの引数「bottom」にタブバーを指定します。
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Tab Sample'),
//TabBarの指定
bottom: TabBar(tabs: [
Icon(Icons.calendar_today),
Icon(Icons.note),
Icon(Icons.settings)
]),
),
),
);
ここまでで、AppBarの下にTabBarを表示することが出来ます。
最後に、仕上げとしてScaffoldウェジェットのbodyに、TabViewを指定します。
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Tab Sample'),
bottom: TabBar(tabs: [
Icon(Icons.calendar_today),
Icon(Icons.note),
Icon(Icons.settings)
]),
),
body: TabBarView(
children: [
Icon(Icons.calendar_today),
Icon(Icons.note),
Icon(Icons.settings)
],
),
),
);
}
コメント