Flutter：Tabで動的に追加したWidgetを直後に表示したい

Question

やりたいこと

動的にタブを追加した後、その追加したタブを直ぐに表示させたいです。

事象

indexを変更しただけだと、タブ上はindexで指定したところに移動していますが、
中身が追加する前のままとなっています。

indexに合わせて、TabBarViewも変更する方法はないでしょうか？

ソース

参考サイトのソースを少し変更しています。
＋ボタンで追加してもタブは追加されても、ページの内容が変わっていないことが確認できます。
スライドするとインジケータがいきなり飛びます。（追加する前のタブの位置に戻るといったほうが正解かも）

よろしくおねがいします。

import 'package:flutter/material.dart';

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

class DynamicTabContent {
  IconData icon;
  String tooTip;

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

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

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

  TabController _cardController;

  TabPageSelector _tabPageSelector;

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

    myList.add(new DynamicTabContent.name(Icons.favorite, "Favorited"));
    myList.add(new DynamicTabContent.name(Icons.local_pizza, "local pizza"));

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey[300],
      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: () {
                  List<DynamicTabContent> tempList = new List();

                  myList.forEach((dynamicContent) {
                    tempList.add(dynamicContent);
                  });

                  setState(() {
                    myList.clear();
                  });

                  tempList.forEach((dynamicContent) {
                    myList.add(dynamicContent);
                  });

                  if (tempList.length % 2 == 0) {
                    myList.add(new DynamicTabContent.name(
                        Icons.shopping_cart, "shopping cart"));
                  } else {
                    myList.add(
                        new DynamicTabContent.name(Icons.camera, "camera"));
                  }

                  setState(() {
                    _cardController =
                        new TabController(vsync: this, length: myList.length);
                    _tabPageSelector =
                        new TabPageSelector(controller: _cardController);
                    _cardController.index = myList.length - 1;
                  });
                },
              ),
            ),
          ],
          title: new Text("Title Here"),
          bottom: new PreferredSize(
              preferredSize: const Size.fromHeight(10.0),
              child: new Theme(
                data: Theme.of(context).copyWith(accentColor: Colors.grey),
                child: myList.isEmpty
                    ? new Container(
                        height: 30.0,
                      )
                    : new Container(
                        height: 30.0,
                        alignment: Alignment.center,
                        child: _tabPageSelector,
                      ),
              ))),
      body: new TabBarView(
        controller: _cardController,
        children: myList.isEmpty
            ? <Widget>[]
            : myList.map((dynamicContent) {
                return new Card(
                  child: new Container(
                      height: 450.0,
                      width: 300.0,
                      child: new IconButton(
                        icon: new Icon(dynamicContent.icon, size: 100.0),
                        tooltip: dynamicContent.tooTip,
                        onPressed: null,
                      )),
                );
              }).toList(),
      ),
    );
  }
}

Answer 1

_cardController.index = myList.length - 1; の部分を、次のようにしてみてはいかがでしょう？
_cardController.animateTo(myList.length - 1);

---

setState部分

  setState(() {
    _cardController =
        new TabController(vsync: this, length: myList.length);
    _tabPageSelector =
        new TabPageSelector(controller: _cardController);                    
    //_cardController.index = myList.length - 1;  // これを以下のように書き換える
    _cardController.animateTo(myList.length - 1);
  });

Comments

[lightfull]

ありがとうございます！！
こんな簡単なことだったとは・・・。