Flutter中如何在build方法调用前为变量正确赋值？

我有如下一个简单的StatefulWidget：

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late String _email;

  void getEmail() async {
    // 执行一些操作并设置 _email 的值
  }

  @override
  void initState() {
    super.initState();
    getEmail(); // 在initState中调用该方法
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: SafeArea(
        child: Text(_email),
      ),
    );
  }
}

运行时会出现_email为null的异常，我原以为initState()会在build方法前调用，但实际不符合预期。请问该如何解决此问题？另外，若将变量声明为String _email = '';，UI会先显示空白再加载正确邮箱值，这也是我不希望的。

核心原因 #

initState确实会在第一次build前执行，但getEmail是异步方法——调用它后会立即返回，initState直接执行完毕并触发build，此时异步操作还未完成，_email要么未完成初始化（late变量抛出异常），要么是空字符串（显示空白）。

方案1：使用FutureBuilder绑定异步状态 #

直接将异步获取逻辑与UI渲染绑定，根据异步状态展示对应内容：

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<String> _getEmail() async {
    // 替换为实际异步逻辑，比如从本地存储/网络获取
    await Future.delayed(const Duration(seconds: 1));
    return "user@example.com";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder<String>(
          future: _getEmail(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              // 加载中显示占位符
              return const Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              // 出错时显示提示
              return const Text("获取邮箱失败");
            } else {
              // 成功获取后展示邮箱
              return Text(snapshot.data!);
            }
          },
        ),
      ),
    );
  }
}

方案2：手动维护加载状态 #

通过状态变量跟踪异步操作进度，在不同状态下渲染对应UI：

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? _email;
  bool _isLoading = true;

  void getEmail() async {
    try {
      // 实际异步操作逻辑
      await Future.delayed(const Duration(seconds: 1));
      setState(() {
        _email = "user@example.com";
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
      });
      // 这里可以添加错误处理逻辑
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: _isLoading
            ? const Center(child: CircularProgressIndicator())
            : _email != null
                ? Text(_email!)
                : const Text("获取邮箱失败"),
      ),
    );
  }
}

方案3：缓存异步结果避免重复调用 #

如果不想用FutureBuilder但希望复用异步结果，可以用late Future<String>存储：

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Future<String> _emailFuture;

  Future<String> _getEmail() async {
    await Future.delayed(const Duration(seconds: 1));
    return "user@example.com";
  }

  @override
  void initState() {
    super.initState();
    _emailFuture = _getEmail();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder<String>(
          future: _emailFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return const Text("获取失败");
            } else {
              return Text(snapshot.data!);
            }
          },
        ),
      ),
    );
  }
}

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