How to make item in dropdown list each have different color flutter-CodePudding

Hi I'm trying to create a filter for my mobile app by using dropdown button value and I want each item to have different text color.

For example, if there are 3 item in my dropdownItem list (item1, item2, item3). I want item 1 text color to be red, item 2 text color to be blue, and lastly item 3 text color to be gray.

How can I achieve this ?

Thanks, before

CodePudding user response：

Colors.accents[index]  or  Colors.primaries[index]

CodePudding user response：

You can style each individual widget as a child of the DropdownMenuItem for different colors. Using the following.

List<DropdownMenuItem<String>> get dropdownItems{
  List<DropdownMenuItem<String>> menuItems = [
     DropdownMenuItem(child: Text("USA", style: TextStyle(color: Colors.blue)),value: "USA"),
    const DropdownMenuItem(child: Text("Canada",  style: TextStyle(color: Colors.red)),value: "Canada"),
    const DropdownMenuItem(child: Text("Brazil",  style: TextStyle(color: Colors.green)),value: "Brazil"),
    const DropdownMenuItem(child: Text("England",  style: TextStyle(color: Colors.blue)),value: "England"),
  ];
  return menuItems;
}

Then use the list of items as usual:

DropdownButton(
  value: selectedValue,
  onChanged: (value) => debugPrint(value),
  items: dropdownItems
)

However if you want to style all items with the same style, you can add a style to the DropdownButton itself:

DropdownButton(
  style: TextStyle(color: Colors.red, fontSize: 30), // uniform style for all items
  value: selectedValue,
  onChanged: (value) => debugPrint(value),
  items: dropdownItems
)

DropdownButton Docs