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(),
),
),
Related
so i aim to use a dropDownButton if already i have selected an option i find it selected ( the value is saved in DataBase) and of course it can be modified else if i didn't choose any option i choose . so this is using the attribute value : value: box.read("optioSaved") ?? dropDownValue, but here if the user has already choose a value he can't modified it
how can i do ?
this is the full code :
child: DropdownButton<String>(
icon: const Icon(Icons.keyboard_arrow_down),
isExpanded: true,
style: const TextStyle(
color: Colors.black,
fontSize: 17,
fontFamily: 'SFProRegular',
),
underline: Container(
height: 1,
color: Colors.black,
),
onChanged: (String? newValue) {
setState(() {
dropDownValue = newValue;
});
},
items: <String>[
"option1",
"option 2",
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
value: box.read("optioSaved") ?? dropDownValue,
hint: const Text("choose"),
),
assign box.read("optioSaved") to dropDownValue in initState and then just value: dropDownValue
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: 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 created my dropdown button, but whenever an item is selected does not update value.But whenever I hotreload all my values are updated. Can anyone guess the reason? or is there a solution?
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.keyboard_arrow_down),
iconSize: 15,
elevation: 10,
style: TextStyle(color: Colors.grey),
onChanged: (newValue) {
setState(() async {
dropdownValue = newValue;
final selectedLanguage= await SharedPreferences.getInstance();
selectedLanguage.setString('selectedLanguage', dropdownValue);
});
allTranslations.setNewLanguage(
allTranslations.getLocaleKey(
dropdownValue,
),
);
},
items: <String>[
englishText,
chineseText,
russianText,
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
#kimSoo great that it worked!
Solution for everyone is the async closure in setstate wont work. We have to remove it and initialize Shared Preferences earlier.
Initialize final selectedLanguage= await SharedPreferences.getInstance(); earlier
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.keyboard_arrow_down),
iconSize: 15,
elevation: 10,
style: TextStyle(color: Colors.grey),
onChanged: (newValue) {
setState(() { <----- removed async
dropdownValue = newValue;
selectedLanguage.setString('selectedLanguage', dropdownValue);
});
allTranslations.setNewLanguage(
allTranslations.getLocaleKey(
dropdownValue,
),
);
},
items: <String>[
englishText,
chineseText,
russianText,
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
I want to fill a DropdownButton in Flutter with some Strings, but I get the error
The element type 'String' can't be assigned to the list type 'DropdownMenuItem<String>'
on filing the List with Strings
Here's my Codesnippet:
DropdownButton<String>(
value: filter.getFilterPersonality(),
onChanged: (String newValue){filter.setFilterPersonality(newValue);},
items: ["-"],
),
What am I doing wrong?
items should be a List of DropdownMenuItem<String> not a List<String> with just "-".
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(),
);
See here:
https://api.flutter.dev/flutter/material/DropdownMenuItem/DropdownMenuItem.html
Items in a DropdownButton should be in a list. Notice how I'm converting my map to a list at the last in the below sample code.
_currencies is an array of strings.
items: _currencies.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: textStyle,
),
);
}).toList(),