やりたいこと
TabBarの使い方を調べるとAppBarのbottomにTabBarを指定するやり方が多く、AppBarを使わない例があまりなかったので、DefaultTabControllerを使ったシンプルな例を作ってみる。
できたもの
全コード
class TestView extends StatelessWidget {
const TestView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TestView',
home: Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Center(
child: Text(
"Tabbar without Appbar",
),
),
TabBar(
labelColor: Colors.blue,
unselectedLabelColor: Colors.black12,
tabs: [Tab(text: "LEFT"), Tab(text: "RIGHT")]),
Expanded(
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
Center(child: Text("LEFT")),
Center(child: Text("RIGHT"))
]))
])))));
}
}
参考記事