Flutterで動的にタブを増やした後、追加後のタブを表示させる

Flutterの学習時に躓いたことを書いておきます。

追加したタブを直後に表示させたかった。

動的にタブを追加するサンプルは、調べればすぐ出てきたのですが、追加したタブを追加後すぐに表示する方法は全然見つからず。

タブを追加後に以下のように、TabControllerのindexに最後尾を指定しても、Appbarのタブ表示は、追加したタブが選択されたように見えますが、TabVerViewのほうは追加する前のWidgetのままです。

_tabController.index = myList.length - 1;

解決方法

追加したタブへアニメーションで移動させる。
TabControllerには、animateToのメソッドがあるので、追加した後に最後尾のタブに移動させれば、うまくいきました。
https://api.flutter.dev/flutter/material/TabController-class.html

ソース

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new CardStack(),
  ));
}

class DynamicTabContent {
  String tabName;
  String tooTip;

  DynamicTabContent.name(this.tabName, this.tooTip);
}

class CardStack extends StatefulWidget {
  @override
  _MainState createState() => new _MainState();
}

class _MainState extends State<CardStack> with TickerProviderStateMixin {
  List<DynamicTabContent> myList = new List();

  TabController _tabController;

  TabPageSelector _tabPageSelector;
  int tabCount = 1;

  @override
  void initState() {
    super.initState();

    myList.add(
        new DynamicTabContent.name(tabCount.toString(), tabCount.toString()));

    _tabController = new TabController(vsync: this, length: myList.length);
    _tabPageSelector = new TabPageSelector(controller: _tabController);
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          new Padding(
            padding: const EdgeInsets.all(1.0),
            child: new IconButton(
              icon: const Icon(
                Icons.add,
                size: 30.0,
                color: Colors.white,
              ),
              tooltip: 'Add Tabs',
              onPressed: () {
                tabCount++;
                myList.add(new DynamicTabContent.name(
                    tabCount.toString(), tabCount.toString()));

                setState(() {
                  _tabController =
                      new TabController(vsync: this, length: myList.length);
                  _tabPageSelector =
                      new TabPageSelector(controller: _tabController);
                  _tabController.animateTo(myList.length - 1);
                });
              },
            ),
          ),
        ],
        title: new Text("タブ追加サンプル"),
        bottom: TabBar(
          controller: _tabController,
          tabs: myList.map((DynamicTabContent choice) {
            return Tab(
              text: choice.tabName,
            );
          }).toList(),
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myList.isEmpty
            ? <Widget>[]
            : myList.map((dynamicContent) {
                return new Card(
                  child: new Center(
                      child: new Text(
                    dynamicContent.tabName,
                  )),
                );
              }).toList(),
      ),
    );
  }
}

70行目が今回のポイントでした。

_tabController.animateTo(myList.length - 1);