Flutter Dart条件渲染页面求助：Firebase数据判断显示异常

你的代码存在两个核心问题导致无匹配数据时黑屏：

• 当Firebase返回了文档，但所有文档的driver_id与当前司机ID不匹配时，List.generate返回的全是SizedBox，最终Wrap没有任何可见内容，页面呈现黑屏。
• 未处理StreamBuilder的加载状态，数据加载过程中可能出现异常显示。

1. 过滤匹配的文档：先筛选出符合driver_id条件的文档，再根据筛选后的列表长度判断显示内容，而不是逐个返回空容器。
2. 处理加载与错误状态：在StreamBuilder中添加加载状态的判断，显示加载指示器；同时处理错误状态，给出友好提示。
3. 统一空状态逻辑：无论是Firebase无文档，还是有文档但无匹配项，都显示“添加数据”按钮。

@override
Widget build(BuildContext context) {
  return GetBuilder<MapLogic>(
    builder: (mapLogic) => Scaffold(
      body: StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance.collection('collection').snapshots(),
        builder: (context, snapshot) {
          // 处理加载状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }

          // 处理错误状态
          if (snapshot.hasError) {
            return Center(
              child: Text(
                '加载出错',
                style: GoogleFonts.poppins(
                  fontSize: 20,
                  color: Colors.black,
                  fontWeight: FontWeight.w600,
                ),
              ),
            );
          }

          // 获取并筛选匹配driver_id的文档
          final docs = snapshot.data?.docs ?? [];
          final matchedDocs = docs.where((doc) => 
            doc.get('driver_id') == mapLogic.currentDriverData?.get('id')
          ).toList();

          // 根据匹配结果显示内容
          if (matchedDocs.isEmpty) {
            return Padding(
              padding: const EdgeInsets.only(top: 30),
              child: InkWell(
                onTap: () async {
                  generalController.focusOut(context);
                  Get.to(const AddNewVehicle());
                },
                child: Container(
                  height: 55,
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                    color: Styles.primaryColor,
                    borderRadius: BorderRadius.circular(30),
                    boxShadow: [
                      BoxShadow(
                        color: Styles.primaryColor.withOpacity(0.19),
                        blurRadius: 40,
                        spreadRadius: 0,
                        offset: const Offset(0, 22),
                      ),
                    ],
                  ),
                  child: const Center(
                    child: Text("Add A Vehicle"),
                  ),
                ),
              ),
            );
          } else {
            return FadedSlideAnimation(
              child: Wrap(
                children: matchedDocs.map((doc) {
                  return Padding(
                    padding: const EdgeInsets.fromLTRB(15, 30, 15, 0),
                    child: InkWell(
                      onTap: () {},
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(19),
                          boxShadow: [
                            BoxShadow(
                              color: customThemeColor.withOpacity(0.19),
                              blurRadius: 40,
                              spreadRadius: 0,
                              offset: const Offset(0, 22),
                            ),
                          ],
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Row(
                            children: [
                              // 图片部分
                              Hero(
                                tag: '${doc.get('image')}',
                                child: Material(
                                  child: Container(
                                    height: 80,
                                    width: 80,
                                    decoration: const BoxDecoration(
                                      color: Colors.grey,
                                      shape: BoxShape.circle,
                                    ),
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(40),
                                      child: Image.network(
                                        '${doc.get('image')}',
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(width: 16),
                              // 价格部分
                              Expanded(
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Container(
                                    width: 70,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(19),
                                      color: customThemeColor,
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.fromLTRB(0, 2, 0, 2),
                                      child: Center(
                                        child: Text(
                                          '\$${doc.get('dis_price')}',
                                          style: state.priceTextStyle!.copyWith(color: Colors.white),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  );
                }).toList(),
              ),
              beginOffset: const Offset(0, 0.3),
              endOffset: const Offset(0, 0),
              slideCurve: Curves.linearToEaseOut,
            );
          }
        },
      ),
    ),
  );
}

• 先通过where筛选出匹配driver_id的文档，避免生成大量空容器导致页面无内容。
• 添加加载状态和错误状态的处理，提升数据加载过程中的用户体验。
• 统一空状态逻辑：只要没有匹配的文档（无论是Firebase无数据，还是有数据但无匹配项），都显示添加按钮。

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