Flutter DropdownButton 不顯示項目

Question

我正在嘗試從雲 firestore 獲取元素列表，然后將它們傳遞到 DropdownButtonFormField 項目中，問題是我能夠在控制台中打印它們，但它們沒有顯示在 DropdownButtonFormField 中。

這是我的代碼：

List<String> companies = [];

  Future getCompanies() async {
    await FirebaseFirestore.instance
        .collection('users_web')
        .get()
        .then((value) {
      value.docs.forEach((element) {
        companies.add(element['nom']);
        print(companies.toList());
      });
    });
  }

  @override
  void initState() {
    getCompanies();
    super.initState();
  }

下拉按鈕表單字段：

DropdownButtonFormField<String>(
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
  hint: Text('Sélectionner votre société'),
  items: companies.map(buildMenuItem).toList(),
  onChanged: (value) {
    setState(() {
      company = value!;
    });
  },
  validator: (value) {
    if (!isChecked) {
      if (value == null) {
        return 'Ce champ ne doit pas être vide';
      }
    }
  },
  value: company,
  isExpanded: true,
  iconSize: 26,
  icon: Padding(
    padding: const EdgeInsets.only(right: 8.0),
    child: Icon(
      Icons.arrow_drop_down,
      color: Colors.black,
    ),
  ),
),

如果有任何幫助，我將不勝感激，在此先感謝！

Answer 1

問題是您的數據是異步獲取的。 您的屏幕是在getCompanies完成之前構建的。 最好的方法是使用FutureBuilder但在加載數據后調用setState可能足以滿足您的情況

  Future getCompanies() async {
    await FirebaseFirestore.instance
        .collection('users_web')
        .get()
        .then((value) {
      value.docs.forEach((element) {
        companies.add(element['nom']);
        print(companies.toList());
      });
    });
    setState((){});
  }

Answer 2

// example of your data 

List<String> companies = ['item 1','item 2','item 3'];

DropdownButtonFormField<String>(
        decoration: InputDecoration(
          border: InputBorder.none,
        ),
        hint: Text('Sélectionner votre société'),
        items: List.generate(companies.length, (index) {
          return DropdownMenuItem(
            child: Text(companies[index]),
            value: companies[index],
          );
        }),
        onChanged: (value) {},
        validator: (value) {},
        value: companies.length > 0 ? companies[0] : null,
        isExpanded: true,
        iconSize: 26,
        icon: Padding(
          padding: const EdgeInsets.only(right: 8.0),
          child: Icon(
            Icons.arrow_drop_down,
            color: Colors.black,
          ),
        ),
      )

Answer 3

companies 是一個字符串列表，因此您可以將其按原樣放在 items: 字段中

BEFORE:
 items: companies.map(buildMenuItem).toList(), 
AFTER:
 items: companies,