5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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が切り替わっています。
ezgif.com-video-to-gif.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?