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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main View widget class named as MyApp extends with StatelessWidget. We are calling our DropDown class here.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Spinner Drop Down List in Flutter')), body: DropDown(), ), ); } } |
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.
|
1 2 3 4 |
class DropDown extends StatefulWidget { @override DropDownWidget createState() => DropDownWidget(); } |
5. Create a class named as DropDownWidget extends with State.
|
1 2 3 4 |
class DropDownWidget extends State { } |
6. Create a String named as dropdownValue. This is used to hold our drop down selected item value.
|
1 |
String dropdownValue = 'One'; |
7. Create a List array named as spinnerItems containing multiple items. We would use this List to create drop down button items.
|
1 2 3 4 5 6 7 |
List <String> spinnerItems = [ 'One', 'Two', 'Three', 'Four', 'Five' ] ; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
Widget build(BuildContext context) { return Scaffold( body: Center( child : Column(children: <Widget>[ DropdownButton<String>( value: dropdownValue, icon: Icon(Icons.arrow_drop_down), iconSize: 24, elevation: 16, style: TextStyle(color: Colors.red, fontSize: 18), underline: Container( height: 2, color: Colors.deepPurpleAccent, ), onChanged: (String data) { setState(() { dropdownValue = data; }); }, items: spinnerItems.map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), Text('Selected Item = ' + '$dropdownValue', style: TextStyle (fontSize: 22, color: Colors.black)), ]), ), ); } |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Spinner Drop Down List in Flutter')), body: DropDown(), ), ); } } class DropDown extends StatefulWidget { @override DropDownWidget createState() => DropDownWidget(); } class DropDownWidget extends State { String dropdownValue = 'One'; List <String> spinnerItems = [ 'One', 'Two', 'Three', 'Four', 'Five' ] ; @override Widget build(BuildContext context) { return Scaffold( body: Center( child : Column(children: <Widget>[ DropdownButton<String>( value: dropdownValue, icon: Icon(Icons.arrow_drop_down), iconSize: 24, elevation: 16, style: TextStyle(color: Colors.red, fontSize: 18), underline: Container( height: 2, color: Colors.deepPurpleAccent, ), onChanged: (String data) { setState(() { dropdownValue = data; }); }, items: spinnerItems.map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), Text('Selected Item = ' + '$dropdownValue', style: TextStyle (fontSize: 22, color: Colors.black)), ]), ), ); } } |
Screenshots:
