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);