Different style for DropDownButton and DropDownMenuItem

Question

I am creating below registration form in Flutter.

TextStyle white =
    new TextStyle(color: Colors.white, decorationColor: Colors.white);
TextStyle grey =
    new TextStyle(color: Colors.grey, decorationColor: Colors.white);

I want to apply white style to DropDownButton and grey to DropDownMenuItem. But, the style of DropDownMenu item is also applied to DDButton.

Also, can I "match_parent" the width of DropDownButton like TextField (as in image)?

Here is the code:

     child: new Center(
      child: new ListView(
        shrinkWrap: true,
        padding: new EdgeInsets.only(left: 24.0, right: 24.0),
        children: <Widget>[
          new ListTile(
            leading: const Icon(
              Icons.language,
              color: Colors.white,
            ),
            title: new DropdownButton(
              items:
                  <String>['India', 'Australia', 'USA'].map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value, ),
                );
              }).toList(),
              value: selected,
              onChanged: (String value) {
                setState(() {
                  selected = value;
                });
              },
              style: white,
            ),
          ),
          new ListTile(
            leading: const Icon(Icons.smartphone, color: Colors.white),
            title: new TextField(
              decoration: new InputDecoration(
                  hintText: "Phone Number", hintStyle: white),
              keyboardType: TextInputType.phone,
              style: white,
            ),
          ),...

Please look at this workaround, it worked for me: https://stackoverflow.com/a/46531089/1248887 — Wak, Jan 11 '19 at 01:43

score 3 · Answer 1 · answered Oct 13 '20 at 13:28

You can do that using selectedItemBuilder property of the dropdown the issue as of now with that is you cannot use a hintText and selectedItemBuilder together. you can track the open issue here.

But Theres a temporary workaround for this is to use one of them based on the selected dropdownValue

   DropdownButton<String>(
              value: dropdownValue,
              style: TextStyle(color: Colors.grey, fontSize: 15),
              hint: dropdownValue != null
                  ? null
                  : Text(
                      'Select Value',
                      style: TextStyle(color: Colors.black),
                    ),
              onChanged: (value) => setState(() => dropdownValue = value),
              selectedItemBuilder: dropdownValue == null
                  ? null
                  : (BuildContext context) {
                      return ['ONE', 'TWO.', 'THREE'].map((String value) {
                        return Text(
                          dropdownValue,
                          style: TextStyle(color: Colors.green),
                        );
                      }).toList();
                    },
              items: ['ONE', 'TWO.', 'THREE']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value,
                      style: TextStyle(inherit: false, color: Colors.red)),
                );
              }).toList(),
            ),

you can find a dartpad example here

score 2 · Answer 2 · edited May 21 '18 at 20:45

2

There is the final bool inherit property at the TextStyle Class, you can try something like this:

TextStyle white =
new TextStyle(inherit: false, color: Colors.white, decorationColor: Colors.white);

edited May 21 '18 at 20:45

Artemis

2,553
7
21
36

answered May 21 '18 at 17:51

Luis Galvez

411
3
12

Thanks. I'll try it out – Saeed Jassani May 22 '18 at 08:53

score 1 · Answer 3 · answered Aug 31 '19 at 04:53

1

Add isExpanded in DropdownButton.

DropdownButton( isExpanded: true, )

answered Aug 31 '19 at 04:53

Erasmo Junior

29
1

Well, it helpt, me! – Taym95 Nov 07 '19 at 16:21

score 1 · Answer 4 · answered May 12 '22 at 03:22

1

Checkout DropDownButton2 for easy customized styling

For more examples and to know more about the package follow this link: DropDownButton2

answered May 12 '22 at 03:22

krishnaacharyaa

14,953
4
49
88

Different style for DropDownButton and DropDownMenuItem

4 Answers4