如何从Future函数中获取变量并在Flutter Widget中使用？

你遇到的核心问题是：异步函数内的局部变量无法直接在Widget树中引用，且Widget构建时异步数据尚未返回。以下是具体解决步骤和代码示例：

1. 重构异步函数，返回统一数据模型 #

把原来返回void的param函数改成返回包含所有环境数据的模型类，统一管理需要的变量：

首先定义数据模型类：

class EnvData {
  final String? co2;
  final String? pm25;
  final String? temp;
  final String? humi;

  EnvData({this.co2, this.pm25, this.temp, this.humi});
}

然后修改异步函数：

Future<EnvData> fetchEnvData() async {
  String url1 = "my url";
  final response1 = await http.get(Uri.parse(url1));
  String url2 = "my url";
  final response2 = await http.get(Uri.parse(url2));
  String url3 = "my url";
  final response3 = await http.get(Uri.parse(url3));
  String url4 = "my url";
  final response4 = await http.get(Uri.parse(url4));

  field_1 fieldno1 = field_1.fromJson(jsonDecode(response1.body));
  field_2 fieldno2 = field_2.fromJson(jsonDecode(response2.body));
  field_3 fieldno3 = field_3.fromJson(jsonDecode(response3.body));
  field_4 fieldno4 = field_4.fromJson(jsonDecode(response4.body));

  return EnvData(
    co2: fieldno1.field1,
    pm25: fieldno2.field2,
    temp: fieldno3.field3,
    humi: fieldno4.field4,
  );
}

2. 使用FutureBuilder构建Widget #

Flutter的FutureBuilder可根据异步请求的状态（加载中、成功、失败）动态渲染UI，适配异步数据场景：

// 在State类中初始化Future，避免每次build重复发起请求
late Future<EnvData> _envDataFuture;

@override
void initState() {
  super.initState();
  _envDataFuture = fetchEnvData();
}

// 构建Widget部分
@override
Widget build(BuildContext context) {
  return FutureBuilder<EnvData>(
    future: _envDataFuture,
    builder: (context, snapshot) {
      // 加载中：显示加载指示器
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }
      // 请求失败：显示错误信息
      if (snapshot.hasError) {
        return Center(child: Text('加载失败: ${snapshot.error}'));
      }
      // 无数据：显示提示
      if (!snapshot.hasData) {
        return const Center(child: Text('暂无数据'));
      }

      // 成功获取数据：渲染目标Widget
      final envData = snapshot.data!;
      // 处理co2的类型转换和null安全，避免崩溃
      final co2Value = int.tryParse(envData.co2 ?? '0') ?? 0;

      return Container(
        height: 100,
        margin: const EdgeInsets.only(top: 20, bottom: 20, left: 15, right: 15),
        padding: const EdgeInsets.only(right: 40, left: 30),
        decoration: BoxDecoration(
          color: co2Value > 1000 ? const Color(0xFFF1954A) : const Color(0xFF7dbd0c),
          borderRadius: const BorderRadius.all(Radius.circular(15.0)),
        ),
        child: sub(envData.co2, "2", "CO", "Carbon Dioxide", "ppm"),
      );
    },
  );
}

关键注意点 #

• 避免重复请求：不要在build方法里直接调用fetchEnvData()，否则每次Widget重建都会发起新的网络请求，需将Future存到State变量中并在initState里初始化。
• null安全处理：co2是String?类型，必须处理null情况；同时要转成数字才能和1000比较，用int.tryParse和默认值可避免类型转换失败导致的崩溃。

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