Flutter中基于Firestore集合的DropdownButton报错求助

核心问题梳理 #

• StreamBuilder的builder方法中，数据未加载时未返回Text("Loading")，导致返回null触发Widget构建错误
• DropdownButton和DropdownMenuItem未指定明确泛型类型，使用dynamic存在类型安全隐患
• 调用已弃用的Scaffold.of(context)，新版本Flutter需用ScaffoldMessenger.of(context)显示SnackBar
• 未处理selectedCar初始值与下拉选项不匹配的情况，会触发"Value not in items"报错

修正后的完整代码 #

child: Column(
  children: <Widget>[
    const SizedBox(height: 10),
    StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('cars').snapshots(),
      builder: (context, snapshot) {
        // 处理加载中、错误、无数据状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("Loading");
        }
        if (snapshot.hasError) {
          return Text("Error: ${snapshot.error}");
        }
        if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
          return const Text("No cars available");
        }

        // 明确指定泛型为String，匹配文档ID类型
        List<DropdownMenuItem<String>> carItems = [];
        for (var snap in snapshot.data!.docs) {
          carItems.add(
            DropdownMenuItem(
              value: snap.id,
              child: Text(
                snap.id,
                style: const TextStyle(color: Colors.deepOrange),
              ),
            ),
          );
        }

        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Icon(Icons.car_repair, size: 25.0),
            const SizedBox(width: 50.0),
            DropdownButton<String>(
              items: carItems,
              onChanged: (carValue) {
                final snackBar = SnackBar(
                  content: Text(
                    'Selected Car is $carValue',
                    style: const TextStyle(color: Colors.grey),
                  ),
                );
                // 替换为ScaffoldMessenger
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
                setState(() {
                  selectedCar = carValue;
                });
              },
              // 校验value是否在选项中，避免报错
              value: carItems.any((item) => item.value == selectedCar) 
                  ? selectedCar 
                  : null,
              isExpanded: false,
              hint: const Text(
                "Choose Car Make",
                style: TextStyle(color: Colors.deepOrange),
              ),
            ),
          ],
        );
      },
    ),
  ],
)

额外注意事项 #

• 确保selectedCar初始值设为null，或初始化时赋值为Firestore集合中存在的文档ID
• 检查Firestore权限规则，确认应用拥有cars集合的读取权限，否则会触发权限错误

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