Flutter网络请求报错：List<dynamic>无法转为Map<String,dynamic>致白屏

我在通过网络获取数据时，应用出现白屏现象，推测问题出在WebServices类的返回逻辑，但不确定解决方法。以下是相关代码：

模型类 #

class Character {
     late int id;
     late String name;
     late String status;
     late String species;
     late String type;
     late String gender;
     late String image;
     late String url;
     late String created;

    Character.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    status = json['status'];
    species = json['species'];
    type = json['type'];
    gender = json['gender'];
    image = json['image'];
    url = json['url'];
    created = json['created'];
  }
}

Repo类 #

Future<List<Character>> getAllCharacters() async {
    final characters = await charactersWebServices.getAllCharacters();
    return characters
        .map((character) => Character.fromJson(character))
        .toList();
  }
}

WebServices类 #

Future<List<dynamic>> getAllCharacters() async {
    try {
      Response response = await dio.get('character');
      print(response.data.toString());
      return response.data;
    } catch (e) {
      print(e.toString());
      return [];
    }
  }
}

返回的JSON结构 #

{"info": {
    "count": 826,
    "pages": 42,
    "next": "https://rickandmortyapi.com/api/character?page=2",
    "prev": null
},
"results": [
    {
        "id": 1,
        "name": "Rick Sanchez",
        "status": "Alive",
        "species": "Human",
        "type": "",
        "gender": "Male",
        "origin": {
            "name": "Earth (C-137)",
            "url": "https://rickandmortyapi.com/api/location/1"
        },
        "location": {
            "name": "Citadel of Ricks",
            "url": "https://rickandmortyapi.com/api/location/3"
        },
        "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg"
    }
]}

问题分析与解决方案 #

白屏的核心原因是WebServices类直接返回了整个响应数据，而实际的字符列表嵌套在results字段中。当前代码尝试把包含info和results的整个JSON对象当作列表处理，导致后续映射Character模型时出错，最终数据加载失败出现白屏。

修复步骤 #

1. 修改WebServices类的返回逻辑，提取响应数据中的results字段：

Future<List<dynamic>> getAllCharacters() async {
    try {
      Response response = await dio.get('character');
      print(response.data.toString());
      // 提取results列表返回，而非整个响应数据
      return response.data['results'];
    } catch (e) {
      print(e.toString());
      return [];
    }
  }
}

额外优化建议 #

• 给模型类的fromJson方法添加空值处理，避免JSON字段缺失导致崩溃：

  Character.fromJson(Map<String, dynamic> json) {
    id = json['id'] ?? 0;
    name = json['name'] ?? '未知';
    status = json['status'] ?? '未知';
    species = json['species'] ?? '未知';
    type = json['type'] ?? '';
    gender = json['gender'] ?? '未知';
    image = json['image'] ?? '';
    url = json['url'] ?? '';
    created = json['created'] ?? '';
  }
  

• 在UI层添加加载状态和错误状态处理，比如显示加载指示器或错误提示，避免白屏给用户带来困惑。

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