Flutter中initState异步逻辑未完成时build提前调用如何解决

Flutter生命周期中，initState执行时遇到异步方法不会阻塞线程，会直接继续执行后续的build方法，不会等待异步任务完成。另外你的原有代码还存在一个隐藏问题：pullUserData中赋值完成后没有调用setState，就算异步任务执行完成，也不会触发UI重绘，参数还是旧的空值。

完全可以用FutureBuilder实现需求，这是官方推荐的异步加载后渲染的标准方案，不需要手动管理加载状态、不需要手动调用setState，实现逻辑更简洁。
下面是修改后的home_screen.dart完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:mood/components/friends_feed.dart';
import 'package:mood/components/nav_drawer.dart';
import 'package:mood/services/user_data.dart';

class LandingScreen extends StatefulWidget {
  static const String id = 'landing_screen';

  @override
  _LandingScreenState createState() => _LandingScreenState();
}

class _LandingScreenState extends State<LandingScreen> {
  // 保存异步任务的Future，避免每次build重复触发请求
  Future<UserData> _userDataFuture;

  @override
  void initState() {
    super.initState();
    _userDataFuture = pullUserData();
  }

  Future<UserData> pullUserData() async {
    UserData userData = UserData();
    await userData.getUserData();
    return userData;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<UserData>(
      future: _userDataFuture,
      builder: (context, snapshot) {
        // 异步任务加载中，显示加载占位
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: Text('Mood'),
              centerTitle: true,
            ),
            body: const Center(child: CircularProgressIndicator()),
          );
        }
        // 异步任务出错，显示错误提示
        if (snapshot.hasError) {
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: Text('Mood'),
              centerTitle: true,
            ),
            body: Center(child: Text('加载用户数据失败：${snapshot.error}')),
          );
        }
        // 加载完成，渲染正常页面
        final userData = snapshot.data;
        return Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            title: Text('Mood'),
            centerTitle: true,
          ),
          drawer: NavDrawer(userData.auth),
          body: FriendsFeed(userData.friendsList),
        );
      },
    );
  }
}

上述写法直接让异步方法返回UserData实例，不需要在State中定义冗余的全局变量，直接通过snapshot.data取值即可。

如果你不想用FutureBuilder，也可以通过布尔变量手动管理加载状态：

• 新增变量bool _isLoading = true;、FirebaseAuth auth;、List<dynamic> friendsList;
• 在pullUserData的赋值完成后调用setState(() => _isLoading = false);
• build方法中根据_isLoading的值判断返回加载占位还是正常页面

你的user_data.dart中存在空安全风险：如果用户未登录，_auth.currentUser为空时调用getCurrentUserUID会触发空指针异常，建议在getUserData方法中先判断当前用户是否存在，再执行后续逻辑。

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