简体   繁体   中英

How to have different color for dropdown label and dropdown list text in Flutter?

I am trying to use dropdown, and want to have Colors.white for the selected text, and Colors.black54 for the text of drop down list. But when I tried to use color attribute and change it to White, it also change the color of drop down text.

DropdownButton<String>(
                    //this changed the color of both text, intial text as well dropdown text color
                    dropdownColor: Colors.white,
                    value: value,
                    style: TextStyle(color: Colors.white),
                    icon: CircleAvatar(
                      radius: 12,
                      backgroundColor: Colors.white,
                      child: Icon(Icons.arrow_drop_down),
                    ),
                    items: places.map((String value) {
                      return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(
                          value,
                         //I tried giving text style here , but same result 
                          style: TextStyle(color: Colors.white),
                        ),
                      );
                    }).toList(),
                    onChanged: (_) {
                      setState(() {
                        value = _;
                      });
                    },
                  )

Here is the picture of it.

在此处输入图像描述 在此处输入图像描述

Okay I found the Solution using selectedItemBuilder attribute of dropdown

 final List<String> places = ['Delhi', 'Mumbai', 'Kerela', 'Agra'];

 DropdownButton<String>(
                    selectedItemBuilder: (_) {
                      return places
                          .map((e) => Container(
                                alignment: Alignment.center,
                                child: Text(
                                  e,
                                  style: TextStyle(color: Colors.white),
                                ),
                              ))
                          .toList();
                    },
                    value: value,
                    icon: CircleAvatar(
                      radius: 12,
                      backgroundColor: Colors.white,
                      child: Icon(Icons.arrow_drop_down),
                    ),
                    items: places.map((String value) {
                      return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(
                          value,
                          style: TextStyle(color: Colors.black54),
                        ),
                      );
                    }).toList(),
                    onChanged: (_) {
                      setState(() {
                        value = _;
                      });
                    },
                  )

Here is the result

在此处输入图像描述 在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM