Create Drop Down Button List Spinner in Flutter Android iOS Example

Drop down list is a expandable ListView containing multiple items in mobile app. In flutter we would use DropdownButton widget to create material style button list from given multiple items. The DropdownButton component is used to select a single value from given different values. We would only see the selected item value in DropdownButton list. So in this tutorial we would Create Drop Down Button List Spinner in Flutter Android iOS Example.

Contents in this project Create Drop Down Button List Spinner in Flutter Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

2. Call our main MyApp class using void main runApp() method.

3. Create our main View widget class named as MyApp extends with StatelessWidget. We are calling our DropDown class here.

4. Create a class named as DropDown extends with StatefulWidget. In this class we would Create our main Drop down button class named as DropDownWidget using createState() method. This method allows us to create State structure in given class.

5. Create a class named as DropDownWidget extends with State.

6. Create a String named as dropdownValue. This is used to hold our drop down selected item value.

7. Create a List array named as  spinnerItems  containing multiple items. We would use this List to create drop down button items.

8. Create DropdownButton widget in Widget build area in DropDownWidget. We are using List here to generating drop down items.

  • value : Used to show currently selected drop down menu default value.
  • icon : Used to display Icon image after drop down. Here we are showing down arrow icon.
  • iconSize : Use to set Size of drop down menu icon.
  • elevation : The z-coordinate at which to place the menu when open.
  • style : For styling drop down text.
  • underline : Used to show underline between items.
  • onChanged : Call every time when item is selected.
  • items : hold all the list of items.

9. Complete source code for main.dart file:

Screenshots:

Create Drop Down Button List Spinner in Flutter Android iOS Example

Leave a Reply

Your email address will not be published.