[Flutter]AppBarにTabBarだけを表示する方法

はじめに
環境
サンプルコード
結果
さいごに
おすすめ参考書

はじめに

AppBarを使う際に、bottomプロパティにTabBarを使うことはよくありますが、TabBarだけ表示する方法はないかなぁと思い調べました。

環境

Flutter 2.0.4

サンプルコード

意外と簡単でした。AppBarのbottomプロパティではなくflexibleSpaceにTabBarを設定します。

ただし、ColumnとmainAxisAlignment.endを指定しないと位置がへんなところに表示されます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title});

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          flexibleSpace: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              TabBar(
                tabs: [
                  Tab(
                    icon: Icon(Icons.flight),
                  ),
                  Tab(
                    icon: Icon(Icons.train),
                  ),
                  Tab(
                    icon: Icon(Icons.directions_car),
                  ),
                ],
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            FittedBox(
              child: Icon(Icons.flight),
            ),
            FittedBox(
              child: Icon(Icons.train),
            ),
            FittedBox(
              child: Icon(Icons.directions_car),
            ),
          ],
        ),
      ),
    );
  }
}