如何让多个FutureBuilder共享同一Firebase请求Future且仅请求一次？

当然有靠谱的解决办法！这种场景在Flutter开发中太常见了——重复发起Firebase请求不仅浪费带宽，还可能导致不同FutureBuilder拿到的数据不一致。下面给你分享几个实用方案：

方案1：在State类中提前初始化Future（最基础直接） #

核心思路是不要在build方法里创建Future，因为build会被多次触发（比如屏幕旋转、父组件重绘），每次都会重新执行请求。我们把Future的初始化放在initState里，这样只会执行一次。

示例代码：

class YourPage extends StatefulWidget {
  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  // 提前声明Future变量
  late Future<QuerySnapshot> _firebaseDataFuture;

  @override
  void initState() {
    super.initState();
    // 在这里初始化Firebase请求，仅执行一次
    _firebaseDataFuture = FirebaseFirestore.instance
        .collection('your_collection')
        .get();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 第一个FutureBuilder，共用同一个Future
        FutureBuilder(
          future: _firebaseDataFuture,
          builder: (context, snapshot) {
            // 处理快照逻辑
            if (snapshot.hasData) {
              return Text('数据总量: ${snapshot.data?.docs.length}');
            } else if (snapshot.hasError) {
              return Text('出错了: ${snapshot.error}');
            }
            return CircularProgressIndicator();
          },
        ),
        // 第二个FutureBuilder，同样共用
        FutureBuilder(
          future: _firebaseDataFuture,
          builder: (context, snapshot) {
            // 另一个UI的处理逻辑
            if (snapshot.hasData) {
              return ListTile(
                title: Text('第一条数据标题: ${snapshot.data?.docs.first.get('title')}'),
              );
            }
            return CircularProgressIndicator();
          },
        ),
      ],
    );
  }
}

方案2：使用状态管理工具（比如Provider/FutureProvider） #

如果你的页面结构比较复杂，或者这个Future需要在多个页面共享，用状态管理会更优雅。以FutureProvider为例，它可以在组件树的某个层级提供Future，所有子组件都能共享这个Future的结果，且仅执行一次请求。

示例代码：

// 在父组件（比如MaterialApp或者页面的父容器）中提供Future
class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureProvider<QuerySnapshot>(
      create: (context) => FirebaseFirestore.instance.collection('your_collection').get(),
      initialData: null,
      child: YourPage(),
    );
  }
}

// 在你的页面中，多个FutureBuilder直接读取共享的Future结果
class YourPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 直接通过context获取共享的Future
    final firebaseDataFuture = context.watch<Future<QuerySnapshot>>();
    
    return Column(
      children: [
        FutureBuilder(
          future: firebaseDataFuture,
          builder: (context, snapshot) {
            // 处理UI逻辑
            if (snapshot.hasData) {
              return Text('数据总量: ${snapshot.data?.docs.length}');
            }
            return CircularProgressIndicator();
          },
        ),
        FutureBuilder(
          future: firebaseDataFuture,
          builder: (context, snapshot) {
            // 另一个UI的处理逻辑
            if (snapshot.hasData) {
              return Text('第一条数据ID: ${snapshot.data?.docs.first.id}');
            }
            return CircularProgressIndicator();
          },
        ),
      ],
    );
  }
}

方案3：用AsyncMemoizer缓存Future结果 #

Dart的async库提供了AsyncMemoizer类，专门用来确保异步操作只执行一次。即使你多次调用它包裹的方法，也只会触发一次请求，后续调用直接返回缓存的结果。

示例代码：

class YourPage extends StatefulWidget {
  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  final AsyncMemoizer<QuerySnapshot> _memoizer = AsyncMemoizer();

  // 定义获取数据的方法，用memoizer包裹
  Future<QuerySnapshot> _fetchFirebaseData() {
    return _memoizer.runOnce(() {
      return FirebaseFirestore.instance.collection('your_collection').get();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FutureBuilder(
          future: _fetchFirebaseData(), // 多次调用也只会发起一次请求
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('数据总量: ${snapshot.data?.docs.length}');
            }
            return CircularProgressIndicator();
          },
        ),
        FutureBuilder(
          future: _fetchFirebaseData(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('最后一条数据内容: ${snapshot.data?.docs.last.get('content')}');
            }
            return CircularProgressIndicator();
          },
        ),
      ],
    );
  }
}

额外提醒 #

如果后续需要刷新数据（比如用户下拉刷新），你可以：

• 对于方案1：重新给_firebaseDataFuture赋值，并调用setState
• 对于方案2：更新FutureProvider的create回调（可以结合ChangeNotifier实现）
• 对于方案3：重新创建一个AsyncMemoizer实例，再调用_fetchFirebaseData()

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