Flutter中FutureBuilder处理API数据时遇类型错误及空指针异常

问题分析 #

你遇到的两个问题本质都是Dart空安全和类型模糊导致的：

1. 类型不匹配：未指定FutureBuilder泛型时，snapshot.data默认是可空的Map<dynamic, dynamic>?，直接赋值给非空Map会触发类型错误；强行加!虽然能过编译，但数据为空时会直接崩溃。
2. 空指针异常：嵌套访问content["main"]["temp"]时，若API返回的main字段不存在或为null，直接调用[]会触发空指针；另外temp是数值类型，直接传给Text组件（要求String类型）也会隐含类型问题。

修复步骤 #

1. 明确泛型类型，消除类型模糊 #

给FutureBuilder指定Map<String, dynamic>泛型，同时修正getWheather的返回类型，让类型系统帮你提前排查问题：

// 修改getWheather的返回类型
Future<Map<String, dynamic>> getWheather(String appID, String city) async {
  String apiURL =
      "https://api.openweathermap.org/data/2.5/weather?id=$city&appid=${util.appID}&units=metric";
  http.Response response = await http.get(Uri.parse(apiURL));
  // 强制转换为明确的Map类型
  return json.decode(response.body) as Map<String, dynamic>;
}

// 修改FutureBuilder的泛型参数
Widget updateTempWidget(String city) {
  return FutureBuilder<Map<String, dynamic>>(
      future: getWheather(util.appID, city),
      builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
        // 后续逻辑...
      });
}

2. 安全访问嵌套字段，避免空指针 #

访问嵌套Map时，用**可选链操作符?做逐层null检查，同时用空值合并运算符??**兜底默认值，还要把数值转为String类型适配Text组件：

// 替换原来的ListTile部分
ListTile(
  title: Text(
    "${content["main"]?["temp"] ?? "N/A"}°C",
    style: tempStyle(),
  ),
)

3. 完善状态判断逻辑 #

用switch语句清晰处理Future的不同连接状态，避免遗漏等待、错误等场景：

builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
  switch (snapshot.connectionState) {
    case ConnectionState.waiting:
      return CircularProgressIndicator();
    case ConnectionState.done:
      if (snapshot.hasError) {
        return Text("加载失败: ${snapshot.error}");
      }
      if (!snapshot.hasData || snapshot.data!.isEmpty) {
        return Text("无数据");
      }
      final content = snapshot.data!;
      return Container(
        child: Column(
          children: [
            ListTile(
              title: Text(
                "${content["main"]?["temp"] ?? "N/A"}°C",
                style: tempStyle(),
              ),
            )
          ],
        ),
      );
    default:
      return CircularProgressIndicator();
  }
}

完整修改后的关键代码 #

Future<Map<String, dynamic>> getWheather(String appID, String city) async {
  String apiURL =
      "https://api.openweathermap.org/data/2.5/weather?id=$city&appid=${util.appID}&units=metric";
  http.Response response = await http.get(Uri.parse(apiURL));
  return json.decode(response.body) as Map<String, dynamic>;
}

Widget updateTempWidget(String city) {
  return FutureBuilder<Map<String, dynamic>>(
      future: getWheather(util.appID, city),
      builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return CircularProgressIndicator();
          case ConnectionState.done:
            if (snapshot.hasError) {
              return Text("加载失败: ${snapshot.error}");
            }
            if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Text("无数据");
            }
            final content = snapshot.data!;
            return Container(
              child: Column(
                children: [
                  ListTile(
                    title: Text(
                      "${content["main"]?["temp"] ?? "N/A"}°C",
                      style: tempStyle(),
                    ),
                  )
                ],
              ),
            );
          default:
            return CircularProgressIndicator();
        }
      });
}

内容的提问来源于stack exchange，提问作者Abu Bakkar Siddik Rana