Flutter DropdownButtonFormField 选中背景颜色

Question

我有一个 DropdownButtonFormField 有几个选项可供选择。选择选项并打开选择列表后，如何更改之前选择的选项的背景颜色？表示上一个选择的选项

String _selectedPicGroup;

static const _picGroup = [
    'Group A',
    'Group B',
    'Group C',
    'Group D',
  ];

SizedBox(
        height: 78,
        child: DropdownButtonFormField(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          decoration: InputDecoration(
            border: InputBorder.none,
            filled: true,
            fillColor: Colors.grey[300],
          ),
          hint: Text('Please select group'),
          isExpanded: true,
          isDense: true,
          value: _selectedPicGroup,
          items: _picGroup.map((item) {
                      return DropdownMenuItem(
                        value: item,
                        child: Text(item),
                      );
                    }).toList(),
          validator: (value) =>
                        value?.isEmpty ?? true ? 'Cannot Empty' : null,
          onChanged: (selectedItem) => setState(
                      () {
                        _selectedPicGroup = selectedItem;
                      },
                    ),
        ),
      );

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用selectedItemBuilder 并在items: 检查if (item == _selectedPicGroup) 然后返回自定义DropdownMenuItem

selectedItemBuilder: (BuildContext context) {
      return _picGroup.map<Widget>((String item) {
        print("$item");
        return DropdownMenuItem(value: item, child: Text(item));
      }).toList();
    },
items: _picGroup.map((item) {
  if (item == _selectedPicGroup) {
    return DropdownMenuItem(
      value: item,
      child: Container(
          height: 48.0,
          width: double.infinity,
          color: Colors.grey,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              item,
            ),
          )),
    );
  } else {
    return DropdownMenuItem(
      value: item,
      child: Text(item),
    );
  }
}).toList(),

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedPicGroup;

  static const _picGroup = [
    'Group A',
    'Group B',
    'Group C',
    'Group D',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 78,
              child: DropdownButtonFormField(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  filled: true,
                  fillColor: Colors.grey[300],
                ),
                hint: Text('Please select group'),
                isExpanded: true,
                isDense: true,
                value: _selectedPicGroup,
                selectedItemBuilder: (BuildContext context) {
                  return _picGroup.map<Widget>((String item) {
                    print("$item");
                    return DropdownMenuItem(value: item, child: Text(item));
                  }).toList();
                },
                items: _picGroup.map((item) {
                  if (item == _selectedPicGroup) {
                    return DropdownMenuItem(
                      value: item,
                      child: Container(
                          height: 48.0,
                          width: double.infinity,
                          color: Colors.grey,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              item,
                            ),
                          )),
                    );
                  } else {
                    return DropdownMenuItem(
                      value: item,
                      child: Text(item),
                    );
                  }
                }).toList(),
                validator: (value) =>
                    value?.isEmpty ?? true ? 'Cannot Empty' : null,
                onChanged: (selectedItem) => setState(
                  () {
                    _selectedPicGroup = selectedItem;
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}