Flutter中实现DropdownButton选中项在其他下拉框禁用的方法

Hey there! Since you're new to Flutter but have experience building similar functionality in JavaScript, let's get this dropdown restriction feature working smoothly for you. Here's a step-by-step solution to disable selected options across your three dropdowns:

Core Concept #

For each dropdown item, we need to check if that option has already been picked by one of the other two dropdowns. If it has, we'll mark the item as disabled so it can't be selected again.

Modified Code #

First, let's clean up your code by extracting the full options list into a reusable constant, then add the disable logic:

// Class-level variables to track each dropdown's selected value
List<String> dropDowns = [
  ' -- Wählen Sie ein Fach aus -- ',
  ' -- Wählen Sie ein Fach aus -- ',
  ' -- Wählen Sie ein Fach aus -- '
];

// Reusable options list (avoids duplicate code and makes updates easier)
final List<String> _allOptions = [
  ' -- Wählen Sie ein Fach aus -- ',
  'Bildnerisches Gestalten',
  'Deutsch',
  'Französisch',
  'Englisch',
  'Ethik, Religion, Gemeinschaft',
  'Italienisch',
  'Mathematik',
  'Musik',
  'Natur und Technik',
  'Räume, Zeiten, Gesellschaften',
  'Textiles und technisches Gestalten',
  'Wirtschaft, Arbeit, Haushalt'
];

DropdownButton _createDropDown(int index) {
  return DropdownButton<String>(
    value: dropDowns[index],
    icon: const Icon(Icons.arrow_downward),
    iconSize: 28,
    elevation: 16,
    style: const TextStyle(
      color: Colors.deepPurple,
      fontSize: 22
    ),
    items: _allOptions.map<DropdownMenuItem<String>>((String value) {
      bool isDisabled = false;

      // Allow the prompt placeholder to be selected multiple times
      if (value != _allOptions[0]) {
        // Check if this option is already selected by another dropdown
        for (int i = 0; i < dropDowns.length; i++) {
          if (i != index && dropDowns[i] == value) {
            isDisabled = true;
            break;
          }
        }
      }

      return DropdownMenuItem<String>(
        value: value,
        enabled: !isDisabled, // Disable the item if it's already taken
        child: Text(value),
      );
    }).toList(),
    onChanged: (String? newValue) {
      if (newValue != null) {
        setState(() {
          dropDowns[index] = newValue;
        });
      }
    },
  );
}

Key Updates Explained #

1. Reusable Options Constant: Pulling the options into a single constant cleans up your code and makes it simpler to add/remove subjects later.
2. Disable Logic: For every non-placeholder option, we check if another dropdown has already selected that value. If so, we mark the item as disabled.
3. Null Safety Handling: Updated the onChanged callback to handle the nullable String? value (a standard practice in modern Flutter).
4. Placeholder Exception: We let the prompt text be selected multiple times since it's just a non-functional placeholder.

Now when you select a subject in one dropdown, it will be grayed out and unselectable in the other two. If you switch a dropdown back to the prompt text, the subject will become available again in the other dropdowns.

内容的提问来源于stack exchange，提问作者user10658544