Flutter调用Laravel API获取服务器数据显示异常求助

1. 修复ApiResponse类的解析逻辑 #

你的核心错误是预期获取ApiResponse<Map<String, dynamic>>实例，但实际得到了Null，首先要确保API响应的解析过程不会返回Null：

• 如果是手动解析JSON，在fromJson工厂方法里给所有必填字段设置默认值，示例：

  factory ApiResponse.fromJson(Map<String, dynamic> json) {
    return ApiResponse(
      success: json['success'] ?? false,
      data: json['data'] as Map<String, dynamic>? ?? {},
      message: json['message'] ?? '',
    );
  }
  

• 如果用json_serializable，给可能为Null的字段添加@JsonKey(defaultValue: ...)注解，避免解析时生成Null实例。

2. 完善API请求的异常处理 #

网络请求环节（比如用http或dio包）必须处理所有可能的失败场景，不能让请求方法返回Null：

Future<ApiResponse<Map<String, dynamic>>> getServers() async {
  try {
    final response = await http.get(Uri.parse('your-api-url'));
    if (response.statusCode == 200) {
      final jsonData = jsonDecode(response.body);
      return ApiResponse.fromJson(jsonData);
    } else {
      // 处理HTTP错误码，返回带错误信息的ApiResponse
      return ApiResponse(success: false, message: '请求失败：${response.statusCode}');
    }
  } catch (e) {
    // 捕获网络异常、解析异常等，返回错误实例
    return ApiResponse(success: false, message: e.toString());
  }
}

3. 列表展示前做安全校验 #

在更新列表UI前，必须先判断ApiResponse的状态和数据是否有效，避免直接使用Null数据：

void fetchServers() async {
  final apiResponse = await apiService.getServers();
  if (apiResponse.success && apiResponse.data.isNotEmpty) {
    setState(() {
      // 从data中提取服务器列表
      serverList = apiResponse.data['servers'] as List;
    });
  } else {
    // 提示错误信息
    print(apiResponse.message);
  }
}

4. 验证前后端JSON结构一致性 #

把Postman返回的JSON和Flutter中打印的response.body做对比：

• 检查字段名大小写（比如Laravel返回success，Flutter里不要写成Success）
• 确认嵌套层级是否匹配（比如后端返回data是包含servers的Map，而不是直接返回列表）
• 打印调试代码：print(response.body)，看实际拿到的响应内容是否符合预期

5. 禁止强制类型转换 #

不要用as ApiResponse<...>这种不安全的强制转换，一旦响应解析失败就会抛出类型错误。必须通过fromJson工厂方法生成实例，确保返回的永远是ApiResponse对象，而不是Null。

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