Flutter类型转换异常：List<RainfallThai>无法转为RainfallThai?

错误根源 #

API返回的是**List<RainfallThai>数组数据**，但你的代码错误地将其强制转换为单个RainfallThai?对象，导致类型不匹配异常：type 'List<RainfallThai>' is not a subtype of type 'RainfallThai?' in type cast。

具体修改步骤 #

1. 调整状态变量类型

将单个对象类型改为列表类型，适配API返回结构：

// 原代码
RainfallThai? _dataFromAPI;

// 修改后
List<RainfallThai> _dataFromAPI = [];

2. 修正API请求处理逻辑

移除错误的类型转换，直接接收列表数据，同时更新方法返回类型：

// 原代码
Future<RainfallThai?> getRainfallThai() async {
  var url = Uri.parse('https://retoolapi.dev/n3bsFG/rainfallthai');
  var response = await http.get(url);
  setState(() {
    _dataFromAPI = rainfallThaiFromJson(response.body) as RainfallThai?;
  });
  return _dataFromAPI;
}

// 修改后
Future<List<RainfallThai>> getRainfallThai() async {
  var url = Uri.parse('https://retoolapi.dev/n3bsFG/rainfallthai');
  var response = await http.get(url);
  final List<RainfallThai> data = rainfallThaiFromJson(response.body);
  setState(() {
    _dataFromAPI = data;
  });
  return _dataFromAPI;
}

3. 更新UI渲染逻辑

原代码只能展示单个对象属性，现在改为列表组件渲染多条数据：

// 原代码body部分
body: Column(
  children: [
    LinearProgressIndicator(),
    Text(_dataFromAPI?.provinceName ?? 'Loading...')
  ],
),

// 修改后body部分
body: Column(
  children: [
    const LinearProgressIndicator(),
    Expanded(
      child: _dataFromAPI.isEmpty
          ? const Center(child: Text('Loading...'))
          : ListView.builder(
              itemCount: _dataFromAPI.length,
              itemBuilder: (context, index) {
                final item = _dataFromAPI[index];
                return ListTile(
                  title: Text(item.provinceName ?? '无省份名称'),
                  subtitle: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('区域: ${regionValues.reverse[item.region]}'),
                      Text('平均降雨量: ${item.avgRain} mm'),
                    ],
                  ),
                );
              },
            ),
    ),
  ],
),

完整修改后的Dashboard代码 #

import 'package:flutter/material.dart';
import 'package:flutter_report/RainfallThai.dart';
import 'package:http/http.dart' as http;

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

  @override
  State<DashboardSd> createState() => _DashboardSdState();
}

class _DashboardSdState extends State<DashboardSd> {
  List<RainfallThai> _dataFromAPI = [];

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

  Future<List<RainfallThai>> getRainfallThai() async {
    var url = Uri.parse('https://retoolapi.dev/n3bsFG/rainfallthai');
    var response = await http.get(url);
    final List<RainfallThai> data = rainfallThaiFromJson(response.body);
    setState(() {
      _dataFromAPI = data;
    });
    return _dataFromAPI;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text(
          "ทดลองดึง API",
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
        ),
      ),
      body: Column(
        children: [
          const LinearProgressIndicator(),
          Expanded(
            child: _dataFromAPI.isEmpty
                ? const Center(child: Text('Loading...'))
                : ListView.builder(
                    itemCount: _dataFromAPI.length,
                    itemBuilder: (context, index) {
                      final item = _dataFromAPI[index];
                      return ListTile(
                        title: Text(item.provinceName ?? '无省份名称'),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('区域: ${regionValues.reverse[item.region]}'),
                            Text('平均降雨量: ${item.avgRain} mm'),
                          ],
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

额外注意事项 #

• 处理枚举值显示：使用regionValues.reverse[item.region]将枚举类型转换回对应的泰文区域名称
• 空值安全：所有可选属性（如provinceName、avgRain）都添加了空值判断，避免空指针异常
• 加载状态：通过_dataFromAPI.isEmpty判断是否处于加载中，替换原有的空值判断逻辑

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