如何改变下拉按钮选择选项的颜色?



我有一个下拉按钮在扑动,我想改变所选选项的颜色(见图片)。默认颜色为灰色。我找不到DropdownButton的参数来改变这一点。我在ThemeData中尝试了selectedRowColor,但它不影响这种颜色。可以换个颜色吗?

形象最小可复制示例:

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(),
        ),
      ),
    );
  }
}
 .
 .
 ].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(),

我找到了解决方案。ThemeData中的focusColor影响颜色

如果我用Theme小部件包装DropdownButton并更改focusColor参数,我将得到所需的结果。或者直接在材质应用的主题中设置focusColor

:

//...
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(),
  ),
)
//...

结果:输入图片描述

相关内容

  • 没有找到相关文章

最新更新