I am a flutter beginner. How to Create a Single Selected Dropdown List in Flutter?
Like This.
I tried, but I didn't get what I wanted.
String dropdownvalue = 'Bahrain';
Container(
width: 308,
child: DropdownButton(
// Initial Value
value: dropdownvalue,
// Down Arrow Icon
icon: const Icon(Icons.keyboard_arrow_down),
// Array list of items
items: dropdownvalue.map((String dropdownvalue) {
return DropdownMenuItem(
value: dropdownvalue,
child: Text(dropdownvalue),
);
}).toList(),
// After selecting the desired option,it will
// change button value to selected value
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
),
You should have list of items and selectedItem to manage the list and selection state.
class _YourState extends State<MyHomePage> {
List<String> countries = [
'Bahrain',
'India',
'Iraq',
'America',
];
String? dropdownvalue ;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DropdownButton(
// Initial Value
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
isExpanded: true,
items: countries.map((String dropdownvalue) {
return DropdownMenuItem(
value: dropdownvalue,
child: Text(dropdownvalue),
);
}).toList(),
hint: Text('Country'),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
),
);
}
}
Related
how to reset dropdonw to defult value after press button ?
i am trying to press button to reset dropdownmune to its defualt
class drawarScreen extends StatelessWidget {
const drawarScreen({super.key});
#override
Widget build(BuildContext context) {
List<String> list = <String>['One', 'Two', 'Three', 'Four'];
String? dropdownValue;
return Scaffold(
body: Column(children:[
DropdownButton<String>(
hint: Text('moammed'),
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? value) {
// This is called when the user selects an item.
setstate({
dropdownValue = value!;
});
},
items: list.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
},
ElevatedButton(
onPress:(){
setstate({
dropdownValue='';
});
},child: Text("reste");
)
]);
}
}
i am trying to press button to reset dropdownmune to its defualt
resat dropdown menu in flutter
You need to put null value instead of empty string
setstate({
dropdownValue = null ;
});
If you like to have other than null, put it there.
And make sure to have StatefulWidget and variables outside the build method.
Full widget
class drawarScreen extends StatefulWidget {
const drawarScreen({super.key});
#override
State<drawarScreen> createState() => _drawarScreenState();
}
class _drawarScreenState extends State<drawarScreen> {
List<String> list = <String>['One', 'Two', 'Three', 'Four'];
String? dropdownValue;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
DropdownButton<String>(
hint: Text('moammed'),
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? value) {
setState(() {
dropdownValue = value;
});
},
items: list.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
ElevatedButton(
onPressed: () {
setState(() {
dropdownValue = null;
});
},
child: Text("Reset"))
],
),
);
}
}
I try to make a dropdown taking data from firestore, after selecting the items from DromdownMenuItem the selected new value cannot display please help..?
DropdownButtonHideUnderline(
child: DropdownButton<String>(
isDense: true,
//isExpanded: false,
value: projectName,
onChanged: (String? newValue) {
debugPrint('selected onchange: $newValue');
setState(
() {
debugPrint('make selected: $newValue');
projectName = newValue.toString();
state.didChange(newValue);
setDefaultMake = false;
///var setDefaultMakeModel = true;
controllerProjectName.text = newValue.toString();
},
);
},
items: snapshot.data!.docs.map((value) {
return DropdownMenuItem<String>(
value: value.get('project_name'),
child: Text('${value.get('project_name')}'),
);
}).toList(),
),
),
This is my list view which is e.g
List<String>items = <String>[
'Leave Type',
'CL',
'SL',
'EL', ];
String dropdownValue = 'Leave Type';
as i Created dropdown here the widget below sample
Padding(
padding:EdgeInsets.all(10.0),
child:
DropdownButton<String>(
iconSize: 24,
elevation: 16,
onChanged:(String? newValue){
setState((){
dropdownValue = newValue!;
});
},
value:dropdownValue,
items:items.map<DropdownMenuItem<String>>(
(String value){
return DropdownMenuItem<String>(
value: value,
child:Text(value),
);
},
).toList(),
)
),
Now want to pass the value into database
I have tried to use a function and for in loop to loop through a list and then create dropdownMenuItems. I am getting this error 'There should be exactly one item with [DropdownButton]'s value Either zero or 2 or more [DropdownMenuItem]s were detected with the same value'. I have look through similar solutions stating that the default value should be one of the values of the list which is not my case
Below is the list
const List<String> currenciesList = [
'AUD',
'BRL',
'CAD',
'CNY',
'EUR',
'GBP',
'HKD',
'IDR',
'ILS',
'INR',
'JPY',
'MXN',
'NOK',
'NZD',
'PLN',
'RON',
'RUB',
'SEK',
'SGD',
'USD',
'ZAR'
];
and the loop
String selectedCurrency = 'USD';
List<DropdownMenuItem<String>> dropdownItems = [];
List<DropdownMenuItem<String>> getDropDownItems() {
for (String currency in currenciesList) {
var newItem = DropdownMenuItem(
child: Text(currency),
value: currency,
);
dropdownItems.add(newItem);
}
return dropdownItems;
}
lastly the dropdownbutton
child: DropdownButton<String>(
value: selectedCurrency,
items: getDropDownItems(),
onChanged: (value) {
setState(() {
selectedCurrency = value!;
});
},
Please help me understand what i must have done wrong
Your code-snippet
DropdownButton<String>(
value: selectedCurrency,
items: getDropDownItems(), ///<= adding items on every state-build
onChanged: (value) {
setState(() {
selectedCurrency = value!;
});
},
On state changes means after you click on DropdownMenuItem you are calling again getDropDownItems(), in this case our it will add DropdownMenuItem again to dropdownItems, and so the DropdownButton having duplicate values, and you are getting errors.
Use initState to call it once, or just initialize the dropdownMenuItem.
Here is the Solution Widget
class _ItemSectionState extends State<ItemSection> {
List<DropdownMenuItem<String>> dropdownItems = []; //* you can make nullable if you want, I'm doing it to force having String.
String selectedCurrency = 'USD';
#override
void initState() {
super.initState();
dropdownItems = List.generate(
currenciesList.length,
(index) => DropdownMenuItem(
value: currenciesList[index],
child: Text(
currenciesList[index],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
DropdownButton<String>(
items: dropdownItems,
value: selectedCurrency,
onChanged: (value) {
setState(() {
selectedCurrency = value!;
});
},
),
],
),
);
}
}
The error occurs due to duplicate values..
When you try to change the value of the drop down, the getDropDownItems function is rerun and the logic in there just duplicates the values for the dropdown.
a quick fix would be to simply map over the currenciesList as opposed to writing a function to add the widgets to a List as shown below:
String selectedCurrency = 'USD';
...
child: DropdownButton<String>(
value: selectedCurrency,
items: currenciesList.map((currency) => DropdownMenuItem(
child: Text(currency),
value: currency,
),
),
onChanged: (value) {
setState(() {
selectedCurrency = value!;
});
},
...
I'm attempting to use the Flutter DropdownMenu with different parameters on the same page, however I'm unsure how to structure the code.
If I want to use a list other than ['One', 'Two', 'Free', 'Four'] how would I setup the widget to take different parameters without having to copy and paste the widget everytime?
This is the sample code from the docs:
String dropdownValue = 'One';
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
);
}
Instead creating a function which creates the widget tree, consider creating your own widget for the DropdownButton. This should yield a performance benefit in most cases, see this answer for an explantion why this is the case.
You could create your widget like this:
class MyDropdownButton extends StatelessWidget {
const MyDropdownButton({
Key key,
#required this.value,
#required this.labels,
#required this.onChanged,
}) : super(key: key);
final String value;
final List<String> labels;
final ValueChanged<String> onChanged;
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: value,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: onChanged,
items: Cost [
for (final label in labels)
DropdownMenuItem<String>(
key: ValueKey(label),
value: value,
child: Text(value),
)
],
);
}
}
Then you can use it like this:
return MyDropdownButton(
value: dropdownValue,
labels: ["one", "two", "three"],
onChanged: (label) {
setState(() {
dropdownValue = label;
});
},
);
Create a method that returns a DropdownButton.
Widget createDropdownButton({
String value,
List<String> items,
ValueChanged<String> onChanged,
}) {
return DropdownButton<String>(
value: value,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: onChanged,
items: items.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
String dropdownValue1 = 'Two';
String dropdownValue2 = '3';
#override
Widget build(BuildContext context) {
return Column(children: [
createDropdownButton(
value: dropdownValue1,
items: ['One', 'Two', 'Free', 'Four'],
onChanged: (String newValue) {
setState(() {
dropdownValue1 = newValue;
});
}),
createDropdownButton(
value: dropdownValue2,
items: ['1', '2', '3', '4'],
onChanged: (String newValue) {
setState(() {
dropdownValue2 = newValue;
});
}),
]);
}