根据另一个 DropdownButton 的值动态改变一个 DropdownButton 的值 [FLUTTER]

Question

I hope you are well. I have a little problem, I would like to dynamically change the value of a DropdownButton based on the value of another DropdownButton.

Well, I'll explain where I'm at and what the problem is:

First I have a list of StudyCycle containing 3 elements;

final _studyCycles = const <StudyCycle>[
    StudyCycle(cycle: Cycles.elementary, classrooms: <ClassroomsLevels>[
      ClassroomsLevels.cp,
      ClassroomsLevels.ce1,
      ClassroomsLevels.ce2,
      ClassroomsLevels.cm1,
      ClassroomsLevels.cm2,
    ]),
    StudyCycle(cycle: Cycles.primary, classrooms: <ClassroomsLevels>[
      ClassroomsLevels.sixth,
      ClassroomsLevels.fifth,
      ClassroomsLevels.fourth,
      ClassroomsLevels.third,
    ]),
    StudyCycle(cycle: Cycles.secondary, classrooms: <ClassroomsLevels>[
      ClassroomsLevels.second,
      ClassroomsLevels.first,
      ClassroomsLevels.terminal,
    ])
  ];

This StudyCycle list is used to build the first DropdownButton

 DropdownButton<StudyCycle>(
          value: _selectedStudyCycle,
          items: List<DropdownMenuItem<StudyCycle>>.generate(
            _studyCycles.length,
            (index) => DropdownMenuItem<StudyCycle>(
              value: _studyCycles[index],
              child: Text(_studyCycles[index].cycle.toString()),
            ),
          ),
          hint: const Text('Your Study Cycle'),
          onChanged: (StudyCycle? studyCycle) {
            if (studyCycle != _selectedStudyCycle) {
              if (_selectedStudyCycle != null) setState(() => _selectedStudyCycle = null);

              if (studyCycle != null) setState(() => _selectedStudyCycle = studyCycle);
            }
          },
        )

And by selecting a StudyCycle from the StudyCycles Dropdown , it allows to build values of another DropdownButton containing this time the ClassroomsLevels of the StudyCycle currently selected in the StudyCycles Dropdown (so far so good)

    DropdownButton<ClassroomsLevels>(
      hint: const Text('Select your classroom'),
      value: _selectedClassroom,
      items: _selectedStudyCycle == null
          ? []
          : List<DropdownMenuItem<ClassroomsLevels>>.generate(
              _selectedStudyCycle!.classrooms.length,
              (index) => DropdownMenuItem<ClassroomsLevels>(
                value: _selectedStudyCycle!.classrooms[index],
                child: Text(_selectedStudyCycle!.classrooms[index].toString()),
              ),
            ),
      onChanged: (ClassroomsLevels? classroom) => setState(() => _selectedClassroom = classroom),
    )

The problem occurs when a ClassroomLevel is selected and I change StudyCycle , I get this error:

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

I tried my best to solve the problem but I couldn't (and I don't really understand why), so I am relying on you. Can you help me to understand what the error is and how to solve it?

The complete code

import 'package:flutter/material.dart';

class MyHomePage2 extends StatefulWidget {
  const MyHomePage2({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage2> createState() => _MyHomePage2State();
}

class _MyHomePage2State extends State<MyHomePage2> {
  final _studyCycles = const <StudyCycle>[
    StudyCycle(cycle: Cycles.elementary, classrooms: <ClassroomsLevels>[
      ClassroomsLevels.cp,
      ClassroomsLevels.ce1,
      ClassroomsLevels.ce2,
      ClassroomsLevels.cm1,
      ClassroomsLevels.cm2,
    ]),
    StudyCycle(cycle: Cycles.primary, classrooms: <ClassroomsLevels>[
      ClassroomsLevels.sixth,
      ClassroomsLevels.fifth,
      ClassroomsLevels.fourth,
      ClassroomsLevels.third,
    ]),
    StudyCycle(cycle: Cycles.secondary, classrooms: <ClassroomsLevels>[
      ClassroomsLevels.second,
      ClassroomsLevels.first,
      ClassroomsLevels.terminal,
    ])
  ];

  StudyCycle? _selectedStudyCycle;

  ClassroomsLevels? _selectedClassroom;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            DropdownButton<StudyCycle>(
              value: _selectedStudyCycle,
              items: List<DropdownMenuItem<StudyCycle>>.generate(
                _studyCycles.length,
                (index) => DropdownMenuItem<StudyCycle>(
                  value: _studyCycles[index],
                  child: Text(_studyCycles[index].cycle.toString()),
                ),
              ),
              hint: const Text('Your Study Cycle'),
              onChanged: (StudyCycle? studyCycle) {
                if (studyCycle != _selectedStudyCycle) {
                  if (_selectedStudyCycle != null) setState(() => _selectedStudyCycle = null);

                  if (studyCycle != null) setState(() => _selectedStudyCycle = studyCycle);
                }
              },
            ),

            //

            DropdownButton<ClassroomsLevels>(
              hint: const Text('Select your classroom'),
              value: _selectedClassroom,
              items: _selectedStudyCycle == null
                  ? []
                  : List<DropdownMenuItem<ClassroomsLevels>>.generate(
                      _selectedStudyCycle!.classrooms.length,
                      (index) => DropdownMenuItem<ClassroomsLevels>(
                        value: _selectedStudyCycle!.classrooms[index],
                        child: Text(_selectedStudyCycle!.classrooms[index].toString()),
                      ),
                    ),
              onChanged: (ClassroomsLevels? classroom) => setState(() => _selectedClassroom = classroom),
            ),
          ],
        ),
      ),
    );
  }
}

class StudyCycle {
  final Cycles cycle;

  final List<ClassroomsLevels> classrooms;

  final String? description;

  final int? iconCodePoint;

  const StudyCycle({
    required this.cycle,
    required this.classrooms,
    this.description,
    this.iconCodePoint,
  });
}

enum Cycles { elementary, primary, secondary, secondaryTechnique }

enum ClassroomsLevels {
  cp,
  ce1,
  ce2,
  cm1,
  cm2,
  sixth,
  fifth,
  fourth,
  third,
  second,
  first,
  terminal,
  mechanical,
  electronic,
  electricity,
  inEngineering,
  secretariat,
  accounting,
  economy,
  agr1,
  agr2,
  agr3,
}

THANK YOU!

Answer 1

The reason for the error is that the value of _selectedClassroom in your second dropdown is not present in the new classroom list _selectedStudyCycle..classrooms once you change the value of the first dropdown. Simply reset the value of your second dropdown in the setState method:

if (studyCycle != null) {
 setState(() {
 // Add this line
 _selectedClassroom = null;
 _selectedStudyCycle = studyCycle;
});
}