How to change DropdownButton selected option color?

Question

I have a DropdownButton in Flutter and i want to change the color of the selected option (see image). Default color is grey. I could not find a parameter of DropdownButton to change that. I tried selectedRowColor in ThemeData but it does not affect that color. Is it possible to change that color?

image

Minimal reproducible example:

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        highlightColor: Colors.red,
      ),
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  List<String> options = ['A', 'B', 'C', 'D'];
  String selectedOption;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          hint: Text('Please choose an option'),
          value: selectedOption,
          onChanged: (String newValue) {
            setState(() {
              selectedOption = newValue;
            });
          },
          items: options.map((option) {
            return DropdownMenuItem(
              child: Text(option),
              value: option,
            );
          }).toList(),
        ),
      ),
    );
  }
}

https://stackoverflow.com/questions/46530527/how-should-i-customize-dropdownbuttons-and-dropdownmenuitems-in-flutter — Aikansh Mann, Jan 15 '21 at 11:19
thats not what i want. i dont want to change the whole background color. i just want to change the background color of the selected option. — David, Jan 15 '21 at 14:08

score 0 · Answer 1 · answered Jan 15 '21 at 11:18

 .
 .
 ].map<DropdownMenuItem<String>>((String value) {
         return GestureDetector(
           onTap: () {
              setState() {
                _selectedItemValue = value;
              }
           } ,
           child:DropdownMenuItem<String>(
             value: value,
             child: Container(
               color: value == _selectedItemValue ? Colors.blue : Colors.white,
               child: new Text(
                 value,
                 style: TextStyle(color: Colors.white),
             ),),
         ),);
       }).toList(),

score -1 · Accepted Answer · answered Jan 15 '21 at 14:17

I found the solution. The focusColor in ThemeData is affecting this color.

I get the desired results if i wrap the DropdownButton with a Theme Widget and change the focusColor parameter. Or setting the focusColor directly in material apps theme.

Like this:

//...
Theme(
  data: Theme.of(context).copyWith(focusColor: Colors.red),
  child: DropdownButton(
    hint: Text('Please choose an option'),
    value: selectedOption,
    onChanged: (String newValue) {
      setState(() {
        selectedOption = newValue;
      });
    },
    items: options.map((option) {
      return DropdownMenuItem(
        child: Text(option),
        value: option,
      );
    }).toList(),
  ),
)
//...

result: enter image description here

How to change DropdownButton selected option color?

2 Answers2