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.
Related
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(),
),
),
DropdownButton(
value: value,
items: locationItems,
onChanged: (value) => setState(() {
this.value = value;
print(value);
}),
),
for(int i = 0;i<widget.locationLength;i++){
locationItems.add(
DropdownMenuItem(
child: Text(
widget.locationName
),
value: "${widget.locationName}",
)
);
}
you need to add type to the dropdown button
DropdownButton<String>( value: value,
items: locationItems,
onChanged: (value) => setState(() {
this.value = value;
print(value);
}),
),
and you also must ensure that locationItems is of type List<DropdownMenuItem<String>>?. you can do this by adding type to DropdownMenuItem when adding to list like this:
locationItems.add( DropdownMenuItem<String>(
child: Text( widget.locationName ),
value: "${widget.locationName}",
)
);
or by strongly type locationItems when declaring it.
List<DropdownMenuItem<String>>? locationItems;
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(),
),
),
),
I have this Dropdown:
DropdownButtonFormField(
value: shipmentSelected,
hint: Text(
'choose one',
),
onChanged: (value){
shipmentSelected = value;
}
items: product.shipment.map((Shipment shipment) {
return DropdownMenuItem(
value: shipment.code,
child: Text(
shipment.code,
),
);
}).toList(),
)
But it doesn't show any item... just show the hintText. How to fix it?
You need to pass a callback function to onChanged in the DropdownButtonFormField constructor. Update shipmentSelected and rebuild from this function like so:
onChanged: (value) {
setState(() {
shipmentSelected = value;
});
},
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(),
),
),