How can I remove/disable an item in a DropdownButton's item list if it's selected on a second one (and vice-versa)?

Question

I'm trying to make a pair of dropdown buttons that take their items from the same list, and selecting a value in one disables it in the other one, and vice versa (much like Translators software, or conversions, as this example is the second one). I tried the onChanged methods but they only worked when checking the list AFTER changing its value (i.e, list 2's value was still showing up on list 1 until I changed list 1's value, and vice versa).

Here's the list

const List<String> tipolong = <String>['mi', 'km', 'fur', 'hm', 'ch', 'dam', 'rd', 'm', 'yd', 'ft', 'dm', 'in', 'cm', 'mm'];

And here are the two Dropdown buttons with their respective derivatives of said list


tipolong2 = List.from(tipolong);
tipolong3 = List.from(tipolong);

class _DropdownButtonState extends State<DropdownButton> {
  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValueLength1,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? newValue) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValueLength1 = newValue!;
          tipolong3 = List.from(tipolong);
          tipolong3.remove(dropdownValueLength1);
        });
      },
      items: tipolong2.map((dropdownValueLength1) {
        return DropdownMenuItem<String>(
          value: dropdownValueLength1,
          child: Text(dropdownValueLength1),
        );
      }).toList(),    );
  }
}

class _DropdownButtonState2 extends State<DropdownButton2> {
  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValueLength2,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? newValue) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValueLength2 = newValue!;
          tipolong2 = List.from(tipolong);
          tipolong2.remove(dropdownValueLength2);
        });
      },
      items: tipolong3.map((dropdownValueLength2) {
        return DropdownMenuItem<String>(
          value: dropdownValueLength2,
          child: Text(dropdownValueLength2),
        );
      }).toList(),    );
  }
}

How can I make it so that when I choose an item in the first list, it is removed or disabled from the second one, and vice versa? So far I've tried the onTap and onChanged methods but they both work only on my second time checking the list (the one that should disappear does so, but after I popped up the list for a second time instead of the first one).

Sorry if my explanation is not clear.

score 0 · Answer 1 · answered Oct 28 '22 at 03:50

You can check that is user selected from 1st dropdown then disable 2nd dropdown and vice-a-versa

You can use IgnorePointer to achieve your functionality

1st onChanged > Item Selected > store it in var A
Check var A is not empty > Disable 2nd DropDown and same for reverse

How can I remove/disable an item in a DropdownButton's item list if it's selected on a second one (and vice-versa)?

1 Answers1