DropdownButton widget has a property named as value which is used to hold current drop down button list selected item. It also has a property named as onChanged which is called each time when drop down item is changed. We could pass here a String named as data which is hold the current selected item and store that item into dropdownValue variable using State. So in this tutorial we would Get Selected Item Value from Drop Down Button List in Flutter iOS Android Example.
Get Selected Item Value from Drop Down Button List in Flutter iOS Android 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 class named as MyApp extends with State less widget. In this class we would call DropDown() class directly.
|
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('Get Selected Item From Drop Down List')), body: DropDown(), ), ); } } |
4. Create a class named as DropDown extends StatefulWidget. In this class we would createState() method to enable mutable state in given class tree.
|
1 2 3 4 |
class DropDown extends StatefulWidget { @override DropDownWidget createState() => DropDownWidget(); } |
5. Create a class named as DropDownWidget extends State. This is our main widget class in which we would make drop down button list.
|
1 2 3 4 |
class DropDownWidget extends State { } |
6. Create 2 Sting variables named as dropdownValue and holder and assign default values.
|
1 2 3 4 5 |
// Default Drop Down Item. String dropdownValue = 'Tom Cruise'; // To show Selected Item in Text. String holder = '' ; |
7. Create Sting List named as actorsName and set some random names in it. This list is used to set our Drop down button list items.
|
1 2 3 4 5 6 7 |
List <String> actorsName = [ 'Robert Downey, Jr.', 'Tom Cruise', 'Leonardo DiCaprio', 'Will Smith', 'Tom Hanks' ] ; |
8. Create a function named as getDropDownItem(). In this function we would store the selected item into another variable using State.
|
1 2 3 4 5 6 |
void getDropDownItem(){ setState(() { holder = dropdownValue ; }); } |
9. Create DropdownButton widget in widget build area in DropDownWidget class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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: actorsName.map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), |
10. Create 1 Text widget and 1 Raised button widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Padding( padding: EdgeInsets.only(top: 30, bottom: 30), child : //Printing Item on Text Widget Text('Selected Item = ' + '$holder', style: TextStyle (fontSize: 22, color: Colors.black))), RaisedButton( child: Text('Click Here To Get Selected Item From Drop Down'), onPressed: getDropDownItem, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), |
11. 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
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('Get Selected Item From Drop Down List')), body: DropDown(), ), ); } } class DropDown extends StatefulWidget { @override DropDownWidget createState() => DropDownWidget(); } class DropDownWidget extends State { // Default Drop Down Item. String dropdownValue = 'Tom Cruise'; // To show Selected Item in Text. String holder = '' ; List <String> actorsName = [ 'Robert Downey, Jr.', 'Tom Cruise', 'Leonardo DiCaprio', 'Will Smith', 'Tom Hanks' ] ; void getDropDownItem(){ setState(() { holder = dropdownValue ; }); } @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: actorsName.map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), Padding( padding: EdgeInsets.only(top: 30, bottom: 30), child : //Printing Item on Text Widget Text('Selected Item = ' + '$holder', style: TextStyle (fontSize: 22, color: Colors.black))), RaisedButton( child: Text('Click Here To Get Selected Item From Drop Down'), onPressed: getDropDownItem, color: Colors.green, textColor: Colors.white, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ]), ), ); } } |
Screenshots:
flutter dart dropdown get selected value
How do I get the value if I have multiple Drop Down Button?
Guillermo using the same way just make another state and use the state to store the drop down button value.