Flutter项目如何在build方法执行前完成Firebase数据下载

你当前代码的核心问题有两个：

• getUserData是异步方法，Flutter的initState生命周期不支持等待异步操作执行完成再触发首次build，因此页面首次构建时必然还未拿到Firebase返回的数据
• 你在异步方法中给contacts赋值后没有调用setState，即使数据下载完成也不会触发页面重绘，只有热重载强制重建页面时才会读取到已经赋值的contacts

方案1：使用FutureBuilder处理单次异步数据（推荐） #

你提到StreamBuilder已被其他下载任务占用，但FutureBuilder完全可以和已有的StreamBuilder嵌套/并列使用，是处理单次异步请求渲染的官方规范方案，示例代码如下：

// 首先在State类中定义Future
late Future<List<dynamic>> _contactsFuture;

@override
void initState() {
  super.initState();
  // 初始化Future
  _contactsFuture = getUserData();
}

// 修改getUserData返回contacts数组
Future<List<dynamic>> getUserData() async {
  var userData = await FirebaseFirestore.instance
      .collection('users')
      .doc(currentUser)
      .get();
  return userData.data()!['contacts'];
}

@override
Widget build(BuildContext context) {
  // 用FutureBuilder包裹需要使用contacts的部分
  return FutureBuilder<List<dynamic>>(
    future: _contactsFuture,
    builder: (context, snapshot) {
      // 加载中展示占位
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }
      // 加载出错展示错误提示
      if (snapshot.hasError) {
        return const Center(child: Text('数据加载失败'));
      }
      // 加载完成拿到数据渲染页面
      final contacts = snapshot.data!;
      // 这里返回你原来的页面布局，直接使用contacts即可
      return 你的原有页面组件;
    },
  );
}

方案2：手动控制加载状态+setState重绘 #

如果你不想使用FutureBuilder，可以新增加载状态标识，数据下载完成后调用setState触发页面重绘即可：

// State类中新增变量
List<dynamic> contacts = [];
bool isLoading = true;

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

getUserData() async {
  var userData = await FirebaseFirestore.instance
      .collection('users')
      .doc(currentUser)
      .get();
  contacts = userData.data()!['contacts'];
  // 赋值完成后修改加载状态，触发重绘
  setState(() {
    isLoading = false;
  });
}

@override
Widget build(BuildContext context) {
  if (isLoading) {
    return const Center(child: CircularProgressIndicator());
  }
  // 直接用contacts渲染原有页面
  return 你的原有页面组件;
}

注意：不存在完全让build方法等待异步下载完成再执行的方案，这是Flutter生命周期的设计决定的，以上两种方案都是通过首次渲染占位内容、数据加载完成后重绘页面的方式，实现用户无感知的正常加载效果。

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