Flutter 画面の下にTabBarを表示するサンプル

2023年10月16日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

Scaffold(
  body: Center(),
  bottomNavigationBar: TabBar(
      tabs: [
      xxx

画面の下にTabBarを表示するには、Scaffoldの引数「bottomNavigationBar」を使います。
Scaffoldの引数「bottomNavigationBar」にTabBarを指定します。

使用例

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: DefaultTabController(
      length: 2,
      child: Scaffold(
        body: Center(),
        bottomNavigationBar: Container(
          color: Colors.green,
          child: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.student)),
              Tab(icon: Icon(Icons.settings)),
            ],
          ),
        ),
      ),
    ),
  );
}