How to use Flutter Dropdown Button Widget (21 Code Examples)

DropdownButton()

String? selectedValue;

DropdownButton(

        value: selectedValue,

        items: [
          DropdownMenuItem<Object>(
            value: 'Cars',
            child: Text('Cars'),
          ),
          DropdownMenuItem<Object>(
            value: 'Bikes',
            child: Text('Bikes'),
          ),
        ],

        onChanged: (Object? value) {
          setState(() {
            selectedValue = value.toString();
          });
        },
      )

Explanation

1. We first created a nullable string that will be used to hold the current value that is selected from the dropdown. In the first image, you can see a simple icon and actually that is the default icon of the dropdown. No value is selected yet so it shows nothing.
2. I have passed this variable to the value parameter of the dropdown button widget. Now it will show the value that is present in that variable.
3. The items parameter takes a list of dropdown menu item widgets. In our case, we have passed just 2 for the sake of explanation. These widgets have a value constructor which actually holds the value of that item. The child parameter takes a widget, so we have passed it a text widget and it will be shown in the dropdown menu. You can pass other widgets as well depending on your requirements.
4. The onChanged parameter has a call back function that is called when the user selects/taps on an item from the dropdown menu. The selected item value is passed as parameter to this function and here we have assigned it to our ‘selectedValue’ variable. We’ve used to toString() method to convert the object to string before assigning it.
5. We’ve also used the setstate to perform a rebuild so the changes can be seen on the screen as well.
6. In the second image, we can see that after clicking on the Flutter dropdown button, a menu appears and we have selected a value which is now showing in the button as well.
7. You don’t need to write the same dropdown menu item again and again, instead you can use a for loop for it and just assign the values, see below example.

Dropdown Menu with For Loop

List listOfItems = ['ships', 'planes', 'vehicles'];

items: [

          for (int i = 0; i < listOfItems.length; i++)
            DropdownMenuItem<Object>(
              value: listOfItems[i],
              child: Text(listOfItems[i]),
            ),
        ],

This is how you can make your code efficient, clean and save a lot of time.

Example 2: ‘hint’ parameter

hint: Text('Select an option')

Example 3: ‘disabledHint‘ parameter

disabledHint: Text('Dropdown is disabled'),
onChanged: null

This parameter also takes a widget and it shows when the dropdown button is disabled, Disabled means when the user taps on it no menu dropdown will show, actually nothing will happen. For disabling the button, we have to pass null to the onChanged parameter.

 elevation: 24

Example 5: ‘style’ parameter

style: TextStyle(color: Colors.red, fontSize: 21)

This paramater is used to style the text of dropdown menu and the dropdown button text. You can customize it more by playing with the parameters of text style like make it bold, italic etc.

Example 6: ‘underline’ parameter

underline: Container(
          height: 2,
          color: Colors.blue,
        )

This takes a Flutter widget so we just passed a simple Flutter container to it with a custom height and color. Here you can see that it specifies a widget below the Flutter dropdown button.

Example 7: ‘icon’ parameter

icon: Icon(Icons.person)

The icon parameter takes a widget and just to make things understandable, we passed it an icon widget. In the image, you can see that the icon is changed but the functionality remains the same. If you click on this icon or the other part of this dropdown button, then the dropdown menu appears.

Example 8: ‘iconDisabledColor’ and ‘iconEnabledColor’ parameter

iconDisabledColor: Colors.green,
iconEnabledColor: Colors.blue

These two as the name suggests are used to specify the color of dropdown button icon. Make sure if you used the custom icon using the ‘icon’ parameter and you have specified a color to it then that color will be used only.

If the dropdown button is enabled then the iconEnabledColor parameter’s color will be given to the icon, and if disabled then the specified color in iconDisabledColor will be used.

Example 9: ‘iconSize’ parameter

iconSize: 37

This is used to change the size of icon. It takes a double(floating point) value but you can pass integer to it as well. The default value is 24.0 but we have changed it to 37. As a result, the size is now bigger. Remember that if you have specified the icon size in the icon parameter then that size will be used instead of iconSize parameter.

Example 10: ‘isDense’ parameter

isDense: true

This takes a boolean value. It’s used to specify whether the vertical space between items should be lesser or not. By default, its false and making it true, you can see that the space between the items has lessened vertically.

Example 11: ‘isExpanded’ parameter

isExpanded: true

This is used to specify whether the dropdown button takes the maximum width available of its parent widget or not. By default its false and setting it to true, you can see that it takes the whole width. I have wrapped it with a padding widgets just to make some space between this dropdown button and the borders of the screen.

Example 12: ‘itemHeight’ parameter

itemHeight: 70

It’s used to give a specific height to the items in the dropdown menu list. This takes a double value but integer can be passed too. Make sure that the height is big enough so the content can be vertically filled good, or else it will show an error. You can try it by giving it a very less height and will likely face an error, so adjust the height accordingly.

Example 13: ‘focusColor’ parameter

 focusColor: Colors.red

This parameter specifies when the button is focused or selected, the change the color or underline or other indicators to show that this specific Flutter dropdown button is focused. It can be used when there are multiple dropdown buttons.

Example 14: ‘autoFocus’ parameter

autofocus: true

This parameter sets the dropdown button to be automatically focused when the screen loads/visible without the use of the user taps on it to get focused. By default, its false.

Example 15: ‘focusNode’ parameter

final FocusNode _dropdownFocusNode = FocusNode();

focusNode: _dropdownFocusNode, // Assigning focusNode

This is used to specify the state of focus among Flutter widgets, manage or transfer of focus between widgets. You can easily manage/set the behavior of focus using the focusNode.

Example 16: ‘dropdownColor’ parameter

dropdownColor: Colors.blue

If you want to change the background color of the dropdown menu, then use this parameter. In our case, we’ve set it to blue.

Example 17: parameter of ‘padding’

padding: EdgeInsets.all(40)

This is used to give some space between the parent widget and this Flutter dropdown button widget. I’ve used the all method which means the same space from all sides. You can also play with the only, symmetric and other methods of EdgeInsets as well.

Example 18: ‘alignment’ parameter

alignment: Alignment.topLeft

By using this, you can specify the alignment of text of dropdown button as shown in the above image. For demonstration, I’ve set it to top left position. You can use topRight, bottomLeft, bottomRight, center or its other properties as well.

Example 19: ‘borderRadius’ parameter

borderRadius: BorderRadius.circular(20)

We can change the borders of the dropdown menu using the border radius parameter. The circular method of border radius shows that each edge should have the same circular shape. You can use other methods of it as well like all, only, vertical etc. I encourage you to play with them as well to get your desired shape.

Example 20: Using copyWith method

Use copyWith method in case you want to change the specific edges like this.

BorderRadius.circular(20).copyWith(bottomLeft: Radius.circular(5))

Here you can see that the bottom left radius of Flutter dropdown menu is less as compared to the other edges.

Example 21: Flutter dropdown enableFeedback parameter

enableFeedback: true

This parameter’s role is to give a sound when the user taps on the dropdown then a button clicking sound or a short viration in case the user did a long press. For android, these are the case which I have mentioned. By default, we can hear the sound. We can close it by passing false to the enableFeedback as it takes a boolean value.

The type of sound or feedback that the device will produce depends on the device that is used.

Conclusion

Hope you have a clear practical understanding of how to properly customize the Flutter dropdown button widget. Do read it again or ask questions in case you have any queries. I’ll be more than happy to answer your questions.

If you have any issues in setting up Flutter on your PC, then I’ve created an article in which step-by-step installation of Flutter is discussed practically.

Thank you for reading and stay tuned for more.