Flutter FutureBuilder如何在数据为空或异常时返回指定组件

问题核心原因 #

你遇到的空白问题本质是两个常见的Flutter开发误区：

1. 你直接把platform.invokeMethod('locale')写在FutureBuilder的future参数中，每次页面 rebuild 都会创建新的Future实例、重新发起原生方法调用。无网络场景下原生调用迟迟无法返回，就会导致FutureBuilder反复重置状态，页面持续卡住。
2. 你仅捕获了MissingPluginException一类异常，无网络场景下抛出的网络异常、超时异常等其他错误没有被统一处理，也可能引发渲染异常。

修复方案 #

优先把Future实例缓存到State中，同时统一捕获所有异常兜底返回默认locale，参考代码如下：

// 首先要把当前组件改成StatefulWidget
late Future<String> _localeFuture;

@override
void initState() {
  super.initState();
  // 仅在组件初始化时发起一次locale获取请求
  _localeFuture = _fetchLocale();
}

Future<String> _fetchLocale() async {
  try {
    final res = await platform.invokeMethod('locale');
    // 原生返回空值也兜底用默认值
    return res ?? "is";
  } catch (_) {
    // 所有异常场景统一返回默认locale
    return "is";
  }
}

@override
Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: _localeFuture,
    builder: (context, snapshot) {
      // 加载完成直接用返回值，空值自动兜底
      if (snapshot.connectionState == ConnectionState.done) {
        return App(locale: snapshot.data ?? "is");
      }
      // 加载过程中直接显示默认locale的App，完全避免空白
      return App(locale: "is");
    },
  );
}

补充说明 #

如果你的原生侧locale方法本身包含网络请求逻辑，还可以给这个异步调用加超时时间，避免长时间卡住：

Future<String> _fetchLocale() async {
  try {
    final res = await platform.invokeMethod('locale').timeout(const Duration(seconds: 2));
    return res ?? "is";
  } catch (_) {
    return "is";
  }
}

内容的提问来源于stack exchange，提问作者Lukas Luke Stateczny