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(),
),
),
Related
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!;
});
},
),
),
);
}
}
I got issue to display value after select option... It always display Type All. I've follow from this answer but still got the problem.
DropdownButton(
hint: Text('Filter All Type'),
value: _typeDataL,
onChanged: (_newValue) {
setState(() {
_typeDataL = _newValue;
// print(typeDataL);
});
print(_newValue);
},
items: typeDataL.map((value) {
return DropdownMenuItem(
value: value,
child: new Text(value),
);
}).toList(),
),
try below code,
String? selectedValue = "Your init value";
var typeDataL = ["Your init value", "Option1", "Option2", "Option3"];
DropdownButton(
hint: const Text('Filter All Type'),
value: selectedValue,
onChanged: (newValue) {
setState(() {
selectedValue = newValue;
});
},
items: typeDataL.map((value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
),
Your valueList should contain initial value, same as initial selectedValue and valueList should not contain duplicate values.
DropdownButton(
value: dropDownValue1,
onChanged: (String? newValue) {
setState(() {
dropDownValue1 = newValue!;
});
},
items: <String>[
'Work At Office',
'Work From Home',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
how to increase space between the arrow and the text
I hope I can make it be like this, how to do it?
Thanks in advance
Just add isExpanded: true, under the dropdown for expanding icon
DropdownButton(
isExpanded: true, // here need to change
value: dropDownValue1,
onChanged: (String? newValue) {
setState(() {
dropDownValue1 = newValue!;
});
},
items: <String>[
'Work At Office',
'Work From Home',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
Output:
Try below code hope its helpful to you. refer my answer here also
Declare one variable for dropdown:
var dropdownValue = 'Work At Office';
Your widget
InputDecorator(
decoration: const InputDecoration(border: OutlineInputBorder()),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: dropdownValue,
isDense: true,
isExpanded: true,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>[
'Work At Office',
'Work From Home',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
How to change Dropdown arrow color?
Here is what I want:
This is what I get
My widget:
DropdownButtonHideUnderline (
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),
I tried wrapping with Theme and changing Brightness, but it changes arrow from White to Black only. I want to use some other color.
This can be done with icon: property in DropdownButton
DropdownButtonHideUnderline(
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
hint: Text('Select'),
icon: Icon( // Add this
Icons.arrow_drop_down, // Add this
color: Colors.blue, // Add this
),
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
Thanks to #anmol.majhail, anyway found something simpler using iconEnabledColor property.
DropdownButtonHideUnderline (
child: DropdownButton<String>(
iconEnabledColor: Colors.indigo, // game changer
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),
I want my dropDownButton to show the DropDownmenu for selection as soon as the user navigates to the page(instead of manually having to click the button). How can I achieve this ?
My DropDown button
DropdownButton<String>(
isDense: true,
isExpanded: true,
value: _currentlySelected,
onChanged: (String newValue) {
setState(() {
_currentlySelected = newValue;
});
},
items: items.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),