やりたいこと

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"))
                              ]))
                        ])))));
  }
}

参考記事