Flutter类型转换错误：Null无法转为List<dynamic>及图片列表传递方案

问题根源 #

你遇到的type 'Null' is not a subtype of type 'List<dynamic>' in type cast错误，本质是API返回的ogImages字段为null，但你在解析或传递时直接将其强转为List类型，导致类型不匹配。以下是具体的修复步骤：

1. 模型层：给列表字段兜底空值 #

在定义News和OgImage模型时，必须处理API返回字段为null的情况，避免直接强转List。

手动解析示例

class OgImage {
  final String url;
  OgImage({required this.url});

  factory OgImage.fromJson(Map<String, dynamic> json) {
    return OgImage(
      url: json['url'] ?? '', // 给url字段兜底空字符串
    );
  }
}

class News {
  final List<OgImage> ogImages;
  News({required this.ogImages});

  factory News.fromJson(Map<String, dynamic> json) {
    // 关键：如果og_images为null，直接返回空列表
    final dynamic imagesRaw = json['og_images'];
    final List<dynamic> imagesJson = imagesRaw is List ? imagesRaw : [];
    
    return News(
      ogImages: imagesJson.map((img) => OgImage.fromJson(img)).toList(),
    );
  }
}

使用json_serializable的示例

如果用序列化工具，通过@JsonKey给列表设置默认值：

import 'package:json_annotation/json_annotation.dart';

part 'news.g.dart';

@JsonSerializable()
class OgImage {
  final String url;
  OgImage({required this.url});
  factory OgImage.fromJson(Map<String, dynamic> json) => _$OgImageFromJson(json);
}

@JsonSerializable()
class News {
  @JsonKey(defaultValue: []) // 兜底空列表
  final List<OgImage> ogImages;
  News({required this.ogImages});
  factory News.fromJson(Map<String, dynamic> json) => _$NewsFromJson(json);
}

2. Controller层：确保数据安全传递 #

在HTTP请求后解析数据时，不要直接传递可能为null的列表，确保解析后的数据始终是List<OgImage>类型：

Future<List<News>> fetchNews() async {
  final response = await http.get(Uri.parse('你的API地址'));
  if (response.statusCode == 200) {
    final List<dynamic> newsData = json.decode(response.body);
    return newsData.map((json) => News.fromJson(json)).toList();
  } else {
    throw Exception('加载新闻失败');
  }
}

3. Widget层：处理空列表场景 #

在NewsCard中接收列表后，先判断是否为空，避免空指针或异常：

class NewsCard extends StatelessWidget {
  final List<OgImage> ogImages;
  const NewsCard({super.key, required this.ogImages});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          // 列表为空时显示占位图，否则取第一张图
          ogImages.isNotEmpty
              ? Image.network(ogImages.first.url, errorBuilder: (ctx, err, stack) => const Placeholder())
              : const Placeholder(),
          // 其他新闻内容组件
        ],
      ),
    );
  }
}

额外排查点 #

如果API返回的og_images有时是单个对象而非数组，需在模型解析时兼容这种情况：

factory News.fromJson(Map<String, dynamic> json) {
  final dynamic imagesRaw = json['og_images'];
  List<dynamic> imagesJson = [];
  
  if (imagesRaw is List) {
    imagesJson = imagesRaw;
  } else if (imagesRaw is Map) {
    // 单个对象转为列表
    imagesJson = [imagesRaw];
  }

  return News(
    ogImages: imagesJson.map((img) => OgImage.fromJson(img)).toList(),
  );
}

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