Flutter使用Dio调用API报错及数据展示问题求助

错误原因分析 #

1. Null转bool类型错误：代码中判断apidata["error"]，但目标API成功返回时根本没有error字段，导致该值为null，直接作为布尔值使用触发类型转换错误。
2. Response对象无法直接用[]访问：Dio的Response实例不能直接通过下标访问数据，必须通过response.data获取返回的JSON对象后再操作。
3. 数据结构不匹配：API返回的是单个货币对象（嵌套在USDBRL键下），而非data数组，代码中apidata["data"].map(...)会导致空指针或类型错误。
4. UI状态未更新：getData方法中没有调用setState，且loading状态未正确切换，导致UI不会随数据加载状态变化。

修正后的完整代码 #

class PricesScreen extends Stateful Widget {
  const PricesScreen({super.key});

  @override
  State<PricesScreen> createState() => _PricesScreenState();
}

class _PricesScreenState extends State<PricesScreen> {
  final Dio dio = Dio();
  Map<String, dynamic>? apidata; // 用可空类型避免空值问题

  bool error = false;
  bool loading = false;
  String errmsg = "";

  Future<void> getData() async {
    setState(() {
      loading = true; // 开始加载时更新状态
      error = false;
      errmsg = "";
    });

    const baseUrl = "https://economia.awesomeapi.com.br/last/USD-BRL";

    try {
      final Response response = await dio.get(baseUrl);
      if (response.statusCode == 200) {
        // 正确获取USDBRL下的货币数据
        apidata = response.data["USDBRL"];
      } else {
        error = true;
        errmsg = "请求失败，状态码：${response.statusCode}";
      }
    } catch (e) {
      // 捕获网络请求异常（比如无网络、超时等）
      error = true;
      errmsg = "网络请求出错：${e.toString()}";
    } finally {
      setState(() {
        loading = false; // 结束加载时更新状态
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      child: loading
          ? const CircularProgressIndicator()
          : error
              ? Text("Error: $errmsg")
              : apidata == null
                  ? const Text("暂无数据")
                  : CurrencyContainer(
                      name: apidata!["name"],
                      increase: apidata!["varBid"],
                      symbol: apidata!["code"],
                      value: apidata!["high"],
                    ),
    );
  }
}

关键修改说明 #

• 状态管理优化：在getData开始和结束时通过setState更新loading状态，确保UI正确显示加载指示器。
• 数据访问修正：通过response.data["USDBRL"]直接获取目标货币数据，避免对不存在的error、data字段的无效访问。
• 异常捕获：添加try-catch捕获网络请求中的异常（如无网络、API超时等），完善错误处理逻辑。
• 空安全处理：将apidata声明为可空的Map<String, dynamic>?，在UI中判断非空后再使用，避免空指针错误。
• UI适配数据结构：由于API返回单个货币对象，直接用该对象构建CurrencyContainer，移除错误的数组map操作。

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