🧩

Flutter--その色はなんの色? dropdownButtonの巻

2023/02/19に公開

dropdownButtonの色はdropdownColorか?

                            child: DropdownButton<String>(
                              value: " ",
                              alignment: Alignment.center,
                              dropdownColor: const Color(0x99e6e6fa),
                              borderRadius: BorderRadius.circular(15.0),

実にややこしいことに、dropdownColorは、itemがずらっと並んだときの背景色です。
初期値のButtonにはなにも色がついてない。揃ってもらいたいなあ。

初期値のボタンの色は背景にコンテナを置いてつける。

                          child: Container(
                              color: Color(0x99e6e6fa),
                            ),
                            child: DropdownButton<String>(
                              value: " ",
                              alignment: Alignment.center,
                              dropdownColor: const Color(0x99e6e6fa),
                              borderRadius: BorderRadius.circular(15.0)

角がツンツン痛そうなので、丸くしたい。

                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                            ),
			    color: Color(0x99e6e6fa),
                            child: DropdownButton<String>(
                              value: isSelectedPay,
                              alignment: Alignment.center,
                              dropdownColor: const Color(0x99e6e6fa),
                              borderRadius: BorderRadius.circular(15.0),

                              onChanged: (String? value) {
                                setState(() {
                                  isSelectedPay = value!;
                                });
                              },

怒られた。

containerにdecorationを設定するなら、colorもその中に入れろと。

                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                              color: Color(0x99e6e6fa),
                            ),
                            child: DropdownButton<String>(
                              value:" ",
                              alignment: Alignment.center,
                              dropdownColor: const Color(0x99e6e6fa),
                              borderRadius: BorderRadius.circular(15.0),

                              onChanged: (String? value) {
                                setState(() {
                                  isSelectedPay = value!;
                                });
                              },

以上、お疲れ様でした。

ちなみに、文字色は、初期値も、メニューの文字もDropdownMenuItemで設定です。

                              DropdownMenuItem(
                                value: '',
                                child: Text(
                                  'Select a period from the following',
                                  style: MundiTheme.textTheme.bodyLarge,
                                ),
                              ),
Flutter大学

Discussion