Flutter DropdownButtonFormField不显示Firestore获取的选项求助

问题原因 #

你从Firestore异步获取数据后，虽然companies列表已被更新，但没有触发Flutter的UI重建机制——未调用setState()，导致DropdownButtonFormField始终使用初始化时的空列表渲染，无法显示新加载的数据。

解决方案 #

方案1：手动调用setState()更新UI

修改getCompanies方法，在数据加载完成后调用setState()通知框架更新UI：

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());
    });
    // 通知UI重建，更新Dropdown选项
    setState(() {});
  });
}

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

方案2：使用FutureBuilder（推荐）

这种方式更符合Flutter异步数据处理的最佳实践，自动监听数据加载状态，无需手动调用setState()：

1. 修改getCompanies让它返回加载后的列表：

Future<List<String>> getCompanies() async {
  final querySnapshot = await FirebaseFirestore.instance.collection('users_web').get();
  return querySnapshot.docs.map((doc) => doc['nom'] as String).toList();
}

2. 用FutureBuilder包裹DropdownButtonFormField：

FutureBuilder<List<String>>(
  future: getCompanies(),
  builder: (context, snapshot) {
    // 数据加载中
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    // 加载出错
    if (snapshot.hasError) {
      return const Text('Erreur lors du chargement des sociétés');
    }
    // 数据加载完成
    final companies = snapshot.data ?? [];
    return DropdownButtonFormField<String>(
      decoration: const InputDecoration(border: InputBorder.none),
      hint: const Text('Sélectionner votre société'),
      items: companies.map(buildMenuItem).toList(),
      onChanged: (value) {
        setState(() {
          company = value!;
        });
      },
      validator: (value) {
        if (!isChecked && value == null) {
          return 'Ce champ ne doit pas être vide';
        }
        return null;
      },
      value: company,
      isExpanded: true,
      iconSize: 26,
      icon: const Padding(
        padding: EdgeInsets.only(right: 8.0),
        child: Icon(Icons.arrow_drop_down, color: Colors.black),
      ),
    );
  },
)

3. 确保buildMenuItem函数正确生成Dropdown选项：

DropdownMenuItem<String> buildMenuItem(String companyName) {
  return DropdownMenuItem(
    value: companyName,
    child: Text(companyName),
  );
}

额外注意事项 #

• 如果company的初始值不在加载后的companies列表中，Dropdown会出现异常，建议在数据加载完成后再设置初始值，或者确保初始值存在于列表内。
• 方案2的FutureBuilder能更好地处理加载中和出错的场景，提升用户体验。

内容的提问来源于stack exchange，提问作者Fedy Belaid