0

I have 2 dropdown buttons, which one have a list with an 'id' and a 'name' and i need to make like when i choose a option from one dropdown button only appear a certain number of options in the second dropdown button. In the image 4 if i choose a option in the first dropdown button it would show only like 4 options in the second dropdown button(image 5). im kinda new to this, idk if this is to much to ask. sorry.

the class of the lists

the lists

the dropdownbuttons

the 2 dropdown buttons

the second dropdown button

DropdownButton<DisciplinaResumo>(
            value: selectedDisciplina,
            onChanged: (DisciplinaResumo? newValue) {
              setState(
                () {
                  selectedDisciplina = newValue!;
                  disciplinaController.text = selectedDisciplina.toString();
                },
              );
            },
            items: disciplinaResumo.map(
              (DisciplinaResumo resumo) {
                return new DropdownMenuItem<DisciplinaResumo>(
                  value: resumo,
                  child: new Text(
                    resumo.name,
                    style: Theme.of(context).textTheme.headline5,
                  ),
                );
              },
            ).toList(),
          ),
          DropdownButton<ModuloResumo>(
            value: selectedModulo,
            onChanged: (ModuloResumo? newValue) {
              setState(
                () {
                  selectedModulo = newValue!;
                  moduloController.text = selectedModulo.toString();
                },
              );
            },

1 Answers1

0

In order to filter the dropdown items, you can use the where method of Iterable! https://api.flutter.dev/flutter/dart-core/Iterable/where.html

For example you can implement a where for your ModuloResumo based on the discipline selection:

moduloResumo.where((modulo) {
  if (selectedDiscipline == null) {
    return true;
  } else {
    switch(selectedDiscipline!.id) {
      case 1:
        return modulo.id < 4;
      case 2:
        return modulo.id > 4 && modulo.id < 6;
    }
  }
  return false;
});

to include the same in your code (with a sample of a filtering) you can do something like that, the filtering logic depends on how you want to filter!

DropdownButton<ModuloResumo>(
  value: selectedModule,
  onChanged: (ModuloResumo? newValue) {
    setState(() {
      selectedModule = newValue;
    });
  },
  items:
  moduloResumo.where((modulo) {
    if (selectedDiscipline == null) {
      return true;
    } else {
      switch (selectedDiscipline!.id) {
        case 1:
          return modulo.id < 4;
        case 2:
          return modulo.id > 4 && modulo.id < 6;
      }
    }
    return false;
  }).map<DropdownMenuItem<ModuloResumo>>(
    (resumo) {
      return DropdownMenuItem<ModuloResumo>(
        value: resumo,
        child: Text(resumo.name),
      );
    },
  ).toList(),
),

you can find an interactive sample here https://dartpad.dev/1e8bc3f4a341ceb75c6644848d7d1c21

also you may need to clear your selectedModule when you select a discipline, in order to avoid having a not valid selection (ie if the module should not appear for the selected discipline)

onChanged: (DisciplinaResumo? newValue) {
  setState(() {
    selectedDiscipline = newValue;
    //todo check if the selectedModule is still valid or set selecetModule = null;
  });
},
CLucera
  • 1,091
  • 11
  • 29