TabBarにはlengthがある
スマホアプリだと、TabBarは三つ並んでる、というのが一般的。だからdefaultも３。
でも私のように、iPad横倒しかパソコン画面向けにデザインしていると、５個とか６個並べたくなる。
そうすると、length指定がいる。
child: SafeArea(
child: DefaultTabController(
length: 5,
child: Column(
children: [
const TabBar(
labelColor: Colors.white,
indicatorColor: Colors.yellow,
tabs: [
Tab(text: ''),
Tab(text: ''),
Tab(text: ''),
Tab(text: ''),
Tab(text: ''),
],
),
Expanded(
child: TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: [
TabA(),
TabB(),
TabC(),
TabD(),
TabE(),
],
),
)
],
),
),
),
こんなふうに、lengthを5にしたら、５個のtabができる。
本日の失敗
５個のtabを作るつもりでlengthを5にしたが、tabのfileを三つしか書いていない段階で試しに走らせてみたくなった。が、
- lenghtとchildrenの数が合ってない！
と怒られた。
なので、仮のクラスでも何でもいいので５個のchildrenを用意するか、用意できている数にlengthを合わせるか、しないといけない。
DropdownButtonの最初に見える部分
dropdownButtonを使うときは、以下のような設定をする。
String? isSelected = "A";
中略
child: DropdownButton(items: const [
DropdownMenuItem(
value: 'A',
child: Text('A'),
),
DropdownMenuItem(
value: 'B',
child: Text('B'),
),
DropdownMenuItem(
value: 'C',
child: Text('C'),
),
], onChanged: (String? value) {
setState(() {
isSelected = value;
});
},
value: isSelected,
),
本日の失敗
String? isSelected = "A";のところで
Aと指定すれば、初期値としてAが見えるし、BにすればBが見えるので、ちょっと欲を出して、「選んでください」って書いたら、怒られた。あくまでもvalueで指定した文字列でないとダメ。ま、ちょっと考えたら当然なのだけれど、「選んでください」って書いてあるDropdownButton、見かけますよねえ。あれ、どうすればできるんでしょう？
後日譚
文字列を「選んでください」valueを""にしたmenuItemを一つ作って、それを初期値にすれば良いと判明。それを選ばれたら・・・どうしよう？
Discussion