Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Different style for DropDownButton and DropDownMenuItem

Tags:

flutter

dart

I am creating below registration form in Flutter.

enter image description here

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,
            ),
          ),...
like image 735
Saeed Jassani Avatar asked Mar 28 '18 15:03

Saeed Jassani


People also ask

How do you style a DropDownButton flutter?

To change the dropdown Button color in Flutter, simply wrap your DropdownButton widget inside the Container and provide the styling instructions inside the decoration property using the BoxDecoration widget. Using the color property (insideBoxDecoration) you can assign the color.

How do I style a dropdown in bootstrap?

Basic Dropdown To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

How do you open dropdown dialog below DropDownButton like spinner in flutter?

Option 1: Set DropDown. dart selectedItemOffset to -40 in then DropDownItems will always opens below the DropdownButton .


2 Answers

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);
like image 137
Luis Galvez Avatar answered Oct 21 '22 07:10

Luis Galvez


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

like image 34
Mahesh Jamdade Avatar answered Oct 21 '22 08:10

Mahesh Jamdade