Flutter如何在initState中等待异步数据加载完成后再渲染页面

首先明确两个Flutter/Dart的基础运行逻辑，你之前的方案全部不生效都是因为违背了这两个规则：

• Dart是单线程事件循环模型，任何阻塞UI线程的操作（包括你用的WaitGroup.wait()）都会卡住整个事件队列，你等待的Future回调根本没有执行机会，最终只会导致应用卡死无响应，不可能拿到结果。
• StatefulWidget的initState是同步执行的，执行完毕后框架会立刻调度第一帧渲染，你在initState里注册的任何异步回调（不管是then、await还是FutureBuilder的异步监听），都一定会在第一帧渲染完成之后才会执行，不存在在当前页面第一帧渲染前，在当前页面生命周期内等到异步结果的可能。

• async/await方案：你只是给Future注册了then回调，没有阻塞流程（也不能阻塞），initState执行完时strName还是初始值，第一帧直接渲染默认值；哪怕你在then里加了setState，也只是等异步返回后刷新页面，还是会先显示默认值再更新。
• WaitGroup方案：属于典型的错误用法，wg.wait()直接阻塞了UI线程，5秒延迟的Future任务排在事件队列里根本得不到执行，wg.done()永远不会被调用，应用会直接卡死。
• FutureBuilder方案：本质和回调监听没有区别，首次构建时snapshot处于无数据状态，你如果在这个分支返回显示默认名称的组件，就必然会先渲染默认值，等数据返回后再刷新。

根据你的需求（打开页面不显示默认值，直接展示异步返回的正确内容），有两种可落地的方案：

方案1：跳转页面前提前加载数据（完全符合无默认值、无中间态要求） #

这是唯一能实现“页面第一帧就带正确数据”的方案：在触发页面跳转的位置就发起异步请求，等数据拿到之后再执行路由跳转，把数据通过页面构造函数直接传入，不需要在目标页面的生命周期里等待数据。
示例代码：

// 触发跳转的按钮点击逻辑
onPressed: () async {
  // 可选：在当前页面展示加载态，避免用户点击无反馈
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (_) => const Center(child: CircularProgressIndicator()),
  );
  // 提前拉取需要的数据
  final targetName = await Future<String>.delayed(
    const Duration(seconds: 5), 
    () => "New Name"
  );
  // 关闭加载弹窗
  Navigator.pop(context);
  // 数据拿到后再跳转，直接通过构造函数传值
  Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => MyHomePage(initName: targetName)),
  );
}

// 目标页面改造
class MyHomePage extends StatefulWidget {
  final String initName;
  const MyHomePage({super.key, required this.initName});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 直接用传入的初始化值，不需要默认占位
  late final String strName;

  @override
  void initState() {
    super.initState();
    strName = widget.initName;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(strName)),
      body: Center(
        child: Text(
          strName,
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

方案2：页面内加载，用加载态替代默认值（不需要提前加载，无默认值闪现） #

如果业务逻辑不允许在跳转前加载数据，就不要用"Default Name"这类业务默认值占位，而是用加载状态标记数据是否就绪，第一帧渲染全局加载态，等数据返回后再渲染实际内容，不会出现默认值闪现的问题。
示例代码：

class _MyHomePageState extends State<MyHomePage> {
  // 初始为null，标记数据未加载完成
  String? strName;

  Future<String> _getName() async {
    return Future<String>.delayed(const Duration(seconds: 5), () => "New Name");
  }

  @override
  void initState() {
    super.initState();
    _getName().then((value) {
      setState(() {
        strName = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 加载中显示加载提示，不显示默认业务值
        title: Text(strName ?? "加载中..."),
      ),
      body: Center(
        child: strName == null
          // 未加载完成时显示加载指示器
          ? const CircularProgressIndicator()
          // 加载完成后显示实际内容
          : Text(
              strName!,
              style: Theme.of(context).textTheme.headline4,
            ),
      ),
    );
  }
}

Dart的异步设计本质是事件队列调度，永远不要尝试阻塞UI线程等待异步结果，所有需要等待Future的逻辑都要通过await或者then回调非阻塞执行，阻塞线程唯一的结果就是应用卡死。涉及网络、数据库等IO操作时，统一用上述两种方案处理即可：要么提前加载再跳转，要么用加载态做过渡。

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