为什么此下拉列表在 flutter 中失败？

Question

Here is the code in my build method

Column(
                    children: [
                      DropdownButton<String>(
                          value: dropdownvalue,
                          items: <String>['A', 'B', 'C', 'D']
                              .map((String value) {
                            return DropdownMenuItem<String>(
                              value: value,
                              child: Text(value),
                            );
                          }).toList(),
                          onChanged: (String? newValue) {
                            setState(() {
                              dropdownvalue = newValue!;
                            });
                          }),
                      DropdownButton<String>(
                          value: dropdownvalue,
                          items: <String>['E', 'F', 'G', 'H']
                              .map((String value) {
                            return DropdownMenuItem<String>(
                              value: value,
                              child: Text(value),
                            );
                          }).toList(),
                          onChanged: (String? newValue) {
                            setState(() {
                              dropdownvalue = newValue!;
                            });
                          }),
                    ],
                  )

I have String dropdownvalue = '--'; in my State class

The error I get is:

There should be exactly one item with [DropdownButton]'s value: --.
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 894 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

I'm just trying to have multiple independent drop downs on my screen.

Thanks

Answer 1

You should have a value per dropdown in order to store the selected value for each, instead of one for all of them. So you should have a dropdownvalue1 for the first dropdown, dropdownvalue2 for the second, etc. Also the default values on your dropdownvalue properties should be among the ones in the list of values fed to each dropdown, therefore you should implement it as follows:

  String dropdownvalue1 = '--';
  String dropdownvalue2 = '--';
  
  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          DropdownButton<String>(
              value: dropdownvalue1,
              items: <String>['--','A', 'B', 'C', 'D']
                  .map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue1 = newValue!;
                });
              }),
          DropdownButton<String>(
              value: dropdownvalue2,
              items: <String>['--','E', 'F', 'G', 'H']
                  .map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownvalue2 = newValue!;
                });
              }),
        ],
      );
  }
}