Flutter问题：如何过滤返回列表中含空Container的Widget

你的核心问题是：子Widget通过FutureBuilder在无数据时返回空Container，但这些Widget已被加入_widgetList()的列表，导致最终列表包含空元素。要解决这个问题，需要在构建列表前先判断每个子Widget是否有有效数据，再决定是否将其加入列表，而非让子Widget返回空Container。

下面提供两种实用实现方案：

方案1：将数据逻辑上移，统一管理加载状态 #

把各个子Widget的Future请求移到父组件中，并行获取所有数据后，根据数据是否存在构建最终Widget列表。这种方式符合单一职责原则，由父组件控制数据加载和列表过滤。

步骤1：重构子Widget，接收外部数据 #

去掉子Widget内部的FutureBuilder，改成直接接收Mydata参数的纯UI组件：

// 原widget1改为接收数据的UI组件
Widget widget1(Mydata data) {
  return Stack(
    children: [
      widcard(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              Padding(padding: EdgeInsets.all(8)),
              Text(data.fistarticle),
            ],
          ),
        ),
      ),
    ],
  );
}

// widget2同理
Widget widget2(Mydata data) {
  // 与widget1结构一致，接收data渲染UI
}

步骤2：父组件统一加载数据并构建列表 #

在父组件中使用Future.wait并行获取所有数据，过滤无数据项后生成最终列表：

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<Mydata?>>(
    // 并行发起所有数据请求
    future: Future.wait([fetchdatas1(), fetchdatas2()]),
    builder: (context, snapshot) {
      // 全局加载状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return loading();
      }

      // 数据加载完成，过滤并构建列表
      if (snapshot.hasData) {
        final dataResults = snapshot.data!;
        final List<Widget> widgetList = [];
        
        // 根据数据是否存在添加对应Widget
        if (dataResults[0] != null) {
          widgetList.add(widget1(dataResults[0]!));
        }
        if (dataResults[1] != null) {
          widgetList.add(widget2(dataResults[1]!));
        }

        return Column(children: widgetList); // 用你需要的容器包裹列表
      }

      // 无数据或加载失败的兜底
      return Container();
    },
  );
}

方案2：保留子Widget结构，提前判断数据状态 #

如果不想大规模修改子Widget内部逻辑，可以先获取每个子Widget的数据结果，再决定是否将其加入列表。

实现代码 #

// 异步构建过滤后的Widget列表
Future<List<Widget>> _filteredWidgetList() async {
  // 并行获取所有数据
  final dataFutures = [fetchdatas1(), fetchdatas2()];
  final dataResults = await Future.wait(dataFutures);

  final List<Widget> list = [];
  // 根据数据是否存在添加原Widget（此时原Widget的FutureBuilder会直接拿到缓存数据，不会返回空Container）
  if (dataResults[0] != null) list.add(widget1());
  if (dataResults[1] != null) list.add(widget2());

  return list;
}

// 在父组件build中使用FutureBuilder渲染列表
@override
Widget build(BuildContext context) {
  return FutureBuilder<List<Widget>>(
    future: _filteredWidgetList(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return loading();
      }
      // 加载完成后渲染过滤后的列表
      return Column(children: snapshot.data ?? []);
    },
  );
}

方案对比 #

• 方案1：彻底分离数据逻辑和UI组件，代码结构更清晰，适合需要统一管理加载状态的场景。
• 方案2：改动较小，适合子Widget结构复杂、不想重构的场景，但子Widget内部仍保留FutureBuilder，存在少量冗余逻辑。

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