如何修复Flutter报错type 'null' is not a subtype of type 'map string dynamic '

报错根源 #

• 你调用的地震API返回的根结构是JSON对象，不是数组，原代码中json[0]取值为null，将null传入要求Map<String,dynamic>类型的Album.fromJson方法，直接触发type 'null' is not a subtype of type 'Map<String, dynamic>'报错。
• 额外兼容问题：API返回的events字段是地震事件数组类型，原代码中将其定义为String类型，即使解决第一个报错后续也会出现类型不匹配问题。

修正代码 #

1. 调整接口请求方法与实体类定义 #

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// 调整请求方法，直接返回地震事件列表
Future<List<Event>> getEarthquakeEvents() async {
  final response = await http.get(Uri.parse('https://cdn.knmi.nl/knmi/map/page/seismologie/all_induced.json'));
  if (response.statusCode == 200) {
    final json = jsonDecode(response.body);
    List eventsJson = json['events'] as List;
    return eventsJson.map((item) => Event.fromJson(item)).toList();
  } else {
    throw Exception("请求失败，状态码：${response.statusCode}");
  }
}

// 替换原Album类，定义符合API返回结构的Event实体
class Event {
  final String place;
  final double mag;
  final String time;
  final double lat;
  final double lon;

  Event({
    required this.place,
    required this.mag,
    required this.time,
    required this.lat,
    required this.lon,
  });

  factory Event.fromJson(Map<String, dynamic> json) {
    return Event(
      place: json['place'] as String,
      mag: json['mag'] as double,
      time: json['time'] as String,
      lat: json['lat'] as double,
      lon: json['lon'] as double,
    );
  }
}

2. 调整页面逻辑适配列表返回 #

将原页面中Future<Album>? _futureAlbum改为Future<List<Event>>? _futureEvents，调整按钮点击时的赋值逻辑，以及FutureBuilder的实现：

// 按钮点击逻辑
onPressed: () {
  setState(() {
    _futureEvents = getEarthquakeEvents();
  });
},

// FutureBuilder实现
FutureBuilder<List<Event>> buildFutureBuilder() {
  return FutureBuilder<List<Event>>(
    future: _futureEvents,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context, index) {
            Event event = snapshot.data![index];
            return ListTile(
              title: Text(event.place),
              subtitle: Text("震级：${event.mag} | 时间：${event.time}"),
            );
          },
        );
      } else if (snapshot.hasError) {
        return Text('${snapshot.error}');
      }
      return const CircularProgressIndicator();
    },
  );
}

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