🧩

Flutter -- TabBarとDropdownButton(失敗学)

2023/01/29に公開

TabBarにはlengthがある

スマホアプリだと、TabBarは三つ並んでる、というのが一般的。だからdefaultも3。
でも私のように、iPad横倒しかパソコン画面向けにデザインしていると、5個とか6個並べたくなる。
そうすると、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にしたら、5個のtabができる。

本日の失敗

5個のtabを作るつもりでlengthを5にしたが、tabのfileを三つしか書いていない段階で試しに走らせてみたくなった。が、

  • lenghtとchildrenの数が合ってない!

と怒られた。
なので、仮のクラスでも何でもいいので5個のchildrenを用意するか、用意できている数にlengthを合わせるか、しないといけない。

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を一つ作って、それを初期値にすれば良いと判明。それを選ばれたら・・・どうしよう?

Flutter大学

Discussion