Dropdown in Flutter

DropDown in Flutter is used to display a moving drop-down list.

We can change the dropdown button item style according to ourselves.

Firstly, When the user will click on it, a list of items will be shown to the user.

Most importantly, we use Stateful widget here in orďer to maintain the state as per user’s choice.

The drop-down button will change the state based on the user’s choice.

It is basically used in the cases where we want to display a wholesome set of items but we have a limited amount of space in our UI.

Dropdown in Flutter Properties : 

• items : We add the elements of the DropdownButton widget as list of DropdownMenuItem widgets.

          They have a value attribute, child attribute,etc.

• selectedItemBuilder : The option on the button is shown when we select an option.

          If we want to display some other text we will use selectedItemBuilder.

• value : This is where the pointer which holds the display value of the DropdownButton widget.
• hint : By default the dropdown button will display nothing on it but the down indicator.
• elevation : We will use elevation property to elevate the dropdown list.
• style : We use this property to customize the dropdown.
• iconSize : We use iconSize for the drop-down button’s down arrow icon button.
• dropdownColor : We use dropdownColor to give dropdown a background colour

Similarly, some other properties can be disabledHint,icon,iconDisabledColor,iconEnabledColor,isExpanded,etc.

Integrating Dropdown in Flutter :

 

Output :

After clicking on this dropdown button, below is the dropdown list that we get :-

Conclusion

Finally, In this blog, we have discussed Dropdown in Flutter.

I hope it will help you out in understanding and getting a brief idea about it.

Thank you for reading!!

References

https://api.flutter.dev/flutter/material/DropdownButton-class.html

https://www.developerlibs.com/2019/09/flutter-drop-down-menu-list-example.html