Flutter 本地JSON数据无法加载到ListTile显示报错如何修复？

排查核心错误点 #

• 你贴的State类存在明显语法缺失：FutureBuilder的builder回调、switch分支、build方法都没有做闭合，Dart语法检查不通过会直接触发报错
• 资产路径未配置：你没有在pubspec.yaml中声明assets/plants.json的资源路径，会导致loadString读取资源失败抛出异常
• JSON解析不兼容：
  1. 若你的JSON根节点不是数组，而是外层包裹了业务字段（比如结构为{"data": [{},{}]}），直接调用body.map会触发类型错误
  2. Plants数据类的fromJson方法和JSON字段不匹配，比如JSON字段为plant_name但数据类写的是name、字段类型不匹配都会抛出解析异常
• 现有错误提示过于笼统，无法定位具体问题，建议先打印完整错误信息

修复后的代码 #

1. 修复State类语法&错误提示 #

class _PlantPageState extends State<PlantPage> {
  @override
  Widget build(BuildContext context) => Scaffold(
    body: FutureBuilder<List<Plants>>(
      future: PlantsApi.getPlantsLocally(context),
      builder:(context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return const Center(child: CircularProgressIndicator());
          default:
            if (snapshot.hasError) {
              // 打印完整错误信息方便定位
              debugPrint('加载错误：${snapshot.error}，堆栈：${snapshot.stackTrace}');
              return Center(child: Text('加载失败：${snapshot.error}'));
            } else {
              final plants = snapshot.data as List<Plants>;
              return buildPlants(plants);
            }
        }
      }
    )
  );

  Widget buildPlants(List<Plants> plants) => ListView.builder(
    itemCount: plants.length,
    itemBuilder: (context, index) {
      final plant = plants[index];
      return ListTile(
        title: Text(plant.name ?? "名称未配置"),
      );
    }
  );
}

2. 修复JSON拉取逻辑的兼容性 #

import 'dart:convert';
import 'package:flutter/services.dart';

class PlantsApi {
  static Future<List<Plants>> getPlantsLocally(BuildContext context) async {
    final assetBundle = DefaultAssetBundle.of(context);
    final data = await assetBundle.loadString('assets/plants.json');
    final body = json.decode(data);
    // 校验JSON根节点类型
    if (body is List) {
      return body.map<Plants>((e) => Plants.fromJson(e)).toList();
    } else {
      // 若你的JSON外层有包裹字段，比如结构为{"list": [...]}，请替换为body['list'].map
      throw Exception('JSON根节点不是数组，请检查你的JSON结构');
    }
  }
}

3. 资源配置校验 #

打开pubspec.yaml，确认flutter节点下已经配置了对应资源路径：

flutter:
  assets:
    - assets/plants.json

完成以上修改后请再次运行，控制台会打印具体的错误信息，如果是解析错误请同步检查你的Plants数据类字段和JSON结构是否完全匹配。

内容的提问来源于stack exchange，提问作者Jan Kenzi Masangkay