LoginSignup
5
3

More than 1 year has passed since last update.

【Flutter】AppBarを使わずにTabBarを使う

Posted at

やりたいこと

TabBarの使い方を調べるとAppBarのbottomにTabBarを指定するやり方が多く、AppBarを使わない例があまりなかったので、DefaultTabControllerを使ったシンプルな例を作ってみる。

できたもの

image.png

全コード

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

参考記事

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3