Создать более одного выпадающего меню

Question

Я начал использовать флаттер с короткого времени go, поэтому у меня недостаточно опыта для работы с виджетами, я хочу создать страницу, которая содержит много списков, я нашел на YouTube видео, объясняющее, как сделать один список, но нет смысла повторять код для каждого нового списка, есть ли у вас способ использовать тот же код, но с разными списками на одной странице?

Код:

class FileLangs extends StatefulWidget {
  @override
  _FileLangsState createState() => _FileLangsState();
}

class Langs {
  int id;
  String name;
  Langs(this.id, this.name);

  static List<Langs> getLangs() {
    return <Langs>[
      Langs(1, 'Arabic'),
      Langs(2, 'English'),
      Langs(3, 'English & Arabic'),
    ];
  }
}

class _FileLangsState extends State<FileLangs> {
  List<Langs> _langs = Langs.getLangs();
  List<DropdownMenuItem<Langs>> _dropdownMenuItems;
  Langs _selectedLangs;

  @override
  void initState() {
    super.initState();
    _dropdownMenuItems = buildDropdownMenuItems(_langs);
    _selectedLangs = _dropdownMenuItems[0].value;
  }

  List<DropdownMenuItem<Langs>> buildDropdownMenuItems(List langs) {
    List<DropdownMenuItem<Langs>> items = List();
    for (Langs lang in langs) {
      items.add(
        DropdownMenuItem(
          value: lang,
          child: Text(lang.name),
        ),
      );
    }
    return items;
  }

  onChangeDropdownItem(Langs selectedLangs) {
    setState(() {
      _selectedLangs = selectedLangs;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              "Select Language",
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
            Container(
              child: DropdownButton(
                isExpanded: true,
                value: _selectedLangs,
                items: _dropdownMenuItems,
                onChanged: onChangeDropdownItem,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Добавьте этот класс модели

class Langs {
  const Langs(this.id, this.name);
  final int id;
  final String name;
}

Измените метод buildDropdownMenuItems, как показано ниже

List<DropdownMenuItem<Langs>> buildDropdownMenuItems(List langs) {
  List<DropdownMenuItem<Langs>> items = const <DropdownMenuItem<Langs>>[
    const Langs(1, 'Arabic'),
    const  Langs(2, 'English'),
    const  Langs(3, 'English & Arabic'),
  ];
    for (Langs lang in langs) {
      items.add(
        DropdownMenuItem(
          value: lang,
          child: Text(lang.name),
        ),
      );
    }
    return items;
  }

Измените метод onChangeDropdownItem, как показано ниже

void onChangeDropdownItem(Langs selectedLangs) {
       if (selectedLangs == 'Arabic') {
       setState(() {
      _selectedLangs = selectedLangs;
    });
    } else  if (selectedLangs == 'English') {
       setState(() {
      _selectedLangs = selectedLangs;
    });
    }else  if (selectedLangs == 'English & Arabic') {
       setState(() {
      _selectedLangs = selectedLangs;
    });
    }else{
    return null;
    }
  }