Flutter:タブの内容に合わせてAppBarを切り替える

はじめに

最近Flutterを始めました。
その際、tab（見ているページ）に合わせてAppBarを切り替えたくなったので、実装してみました。間違い等ありましたら、ご指摘お願いします。

開発環境 (flutter version)

Flutter (Channel master, v1.15.19-pre.8, on Microsoft Windows [Version 10.0.19041.153], locale en-US)

ソースコード

コピペでも動きます。
tabcontrollerを使用して今どのタブを開いているかを確認し、どのAppBarを出すか決めています。

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;
  final List<Widget> _tabs = [
    AppBarA(),
    AppBarB(),
  ];
  Widget _myHandler;

  void initState() {
    super.initState();
    tabController = new TabController(vsync: this, length: 2);
    _myHandler = _tabs[0];
    tabController.addListener(_handleSelected);
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  void _handleSelected() {
    setState(() {
      _myHandler = _tabs[tabController.index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _tabs[tabController.index],
      body: TabBarView(
        controller: tabController,
        children: [
          Container(
            color: Colors.red,
            child: Center(
              child: Icon(
                Icons.adb,
                color: Colors.green,
                size: 150.0,
              ),
            ),
          ),
          Container(
            color: Colors.green,
            child: Center(
              child: Icon(
                Icons.loyalty,
                color: Colors.pink,
                size: 150.0,
              ),
            ),
          ),
        ],
      ),
      bottomNavigationBar: SafeArea(
        child: Material(
          child: TabBar(
            controller: tabController,
            unselectedLabelColor: Colors.black.withOpacity(0.3),
            unselectedLabelStyle: TextStyle(fontSize: 12.0),
            labelColor: Colors.pink[400],
            labelStyle: TextStyle(fontSize: 16.0),
            indicatorColor: Colors.pink,
            indicatorWeight: 2.0,
            tabs: [
              Tab(
                child: Icon(
                  Icons.favorite,
                ),
              ),
              Tab(
                child: Icon(
                  Icons.explore,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class AppBarA extends StatefulWidget with PreferredSizeWidget {
  @override
  _AppBarAState createState() => _AppBarAState();
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

class _AppBarAState extends State<AppBarA> {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        'A',
        style: TextStyle(
          fontSize: 30.0,
        ),
      ),
      elevation: 1.0,
    );
  }
}

class AppBarB extends StatefulWidget with PreferredSizeWidget {
  @override
  _AppBarBState createState() => _AppBarBState();
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

class _AppBarBState extends State<AppBarB> {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        'B',
        style: TextStyle(
          fontSize: 30.0,
        ),
      ),
      elevation: 1.0,
    );
  }
}

結果

このように動作します。
タブを移動することでAppBarが切り替わっています。