Custom Decoration for DropDown Flutter

Question

can anyone help me get the same style from these textField to my DropDown widget ?

This is the textField widget

TextFormField(
        obscureText: obscureText,
        controller: controller,
        style: TextStyle(color: Colors.white),
        decoration: InputDecoration(
            contentPadding:
                EdgeInsets.symmetric(vertical: 0, horizontal: 12),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800])),
            border: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800])),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
            )),
        validator: validator),

and this my DropDown :

DropdownButton(
                    value: professionChoosed,
                    onChanged: (newValue) {
                      setState(() {
                        professionChoosed = newValue;
                      });
                    },
                    items: professionList.map((valueItem) {
                      return DropdownMenuItem(
                        value: valueItem,
                        child: Text(valueItem),
                      );
                    }).toList(),
                  ),

This is a preview of the simulator : simulator screenshot

https://stackoverflow.com/questions/53150219/how-to-make-rounded-border-for-dropdownbutton-in-flutter https://i.stack.imgur.com/lRr1j.png — Anmol Mishra, Nov 12 '21 at 11:01
@RavindraS.Patil , I want to add a label above and make the drop down the same width as previous inputs — Learning Code, Nov 12 '21 at 11:12
@AnmolMishra yes I've done the rounded corners but still can't make the width same as the other inputs. — Learning Code, Nov 12 '21 at 11:12

score 2 · Accepted Answer · answered Nov 12 '21 at 11:16

2

Use DropdownButtonFormField instead of DropdownButton

     DropdownButtonFormField(
                decoration: const InputDecoration(
                contentPadding:
                    EdgeInsets.symmetric(vertical: 0, horizontal: 12),
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.purple[800])),
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.purple[800])),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
                )),
                    value: professionChoosed,
                    onChanged: (newValue) {
                      setState(() {
                        professionChoosed = newValue;
                      });
                    },
                    items: professionList.map((valueItem) {
                      return DropdownMenuItem(
                        value: valueItem,
                        child: Text(valueItem),
                      );
                    }).toList(),
                  ),

answered Nov 12 '21 at 11:16

Diwyansh

2,961
1
7
11

This is amazing but I guess it should be "new" instead of "const" on line 2. – Learning Code Nov 12 '21 at 11:24
"const" is there because values provided in InputDecoration are not dynamic they are constant(static). also mark as answer if you found this useful. Thanks – Diwyansh Nov 12 '21 at 11:27
Good, one last question, how can I change the text color of selected option? – Learning Code Nov 12 '21 at 11:32
It's done . I just added this style:TextStyle(color: Colors.white). Thank you for your help. – Learning Code Nov 12 '21 at 11:38
happy to help you :) – Diwyansh Nov 12 '21 at 11:43

score 1 · Answer 2 · answered Dec 06 '21 at 02:24

1

You can use DropdownButtonFormField2 from my DropdownButton2 package. It's the same as DropdownButtonFormField but more customizable and have steady dropdown menu below the button. Give it a try!

Package: DropdownButton2

answered Dec 06 '21 at 02:24

Ahmed Elsayed

538
1
4
11

score 0 · Answer 3 · answered Nov 12 '21 at 11:24

Try below code hope its help to you. refer official documentation here for dropdown

 InputDecorator(
    decoration: const InputDecoration(border: OutlineInputBorder()),
    child: DropdownButtonHideUnderline(
      child: DropdownButton<String>(
        value: dropdownValue,
        isDense: true,
        isExpanded: true,
        onChanged: (String? newValue) {
          setState(() {
            dropdownValue = newValue!;
          });
        },
        items: <String>['One', 'Two', 'Free', 'Four']
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    ),
  ),

Your Result Screen ->

Thank you . I went for the solution above. Thank you for your time. — Learning Code, Nov 12 '21 at 11:39

Custom Decoration for DropDown Flutter

3 Answers3

Linked