如何将API路由替换为本地JSON路径并实现数据正常加载

原本通过API调用后端获取数据，现改为加载本地JSON文件，使用以下代码替换原有API调用后，应用无法正常展示数据：

response = await rootBundle.loadString('assets/images/profile/wordjson.json');

效果说明 #

• 当前效果：界面无数据展示
• 预期效果：正常显示植物详情信息
• 后端表结构：字段与下方JSON结构一一对应

本地JSON文件结构 #

{
    "Data": [
        {
            "plantUniqueId": "215dce885e",
            "hpfPlantId": 7,
            "hpfScientificName": "Ctenitis fijiensis (Hooker) Copeland (syn. Ctenitis squamigera uct. Copel.)",
            "hpfLocalName": "Ctenitis fijiensis (Hooker) Copeland (syn. Ctenitis squamigera uct. Copel.)",
            "hpfPlantImgUrl": "images/plants/image_1643057089.5149/101.jpg",
            "hpfBriefDescriptionEng": "[Per jumper siqeleti ni katakata]",
            "hpfBriefDescriptionFj": "1",
            "hpfDistributionEng": "jaba",
            "hpfDistributionFj": "n",
            "hpfMedicalUseFijiEng": "vinivo lekaleka yaco toka ga e dibi, dau tokari vata kei na isuluira;",
            "hpfMedicalUseFijiFj": "r kote 2;",
            "hpfMedicalUseOtherEng": "[Per jumpern siqeleti ni katakata]",
            "hpfMedicalUseOtherFj": "[Per jumper siqeleti ni katakata]",
            "hpfPropertiesInterestEng": "[Per jumper siqeleti ni katakata]",
            "hpfPropertiesInterestFj": "[Per jumper siqeleti ni katakata]",
            "hpfSpecialNoteEng": "[Per jumper siqeleti ni katakata]",
            "hpfSpecialNoteFj": "[Per jumper siqeleti ni katakata]",
            "plantFamily": "[Per jumper siqeleti ni katakata]"
        }
    ]
}

问题排查及解决步骤 #

1. 检查资源配置是否正确 #

在pubspec.yaml中必须声明JSON文件的资源路径，配置后执行flutter pub get并重启应用：

flutter:
  assets:
    - assets/images/profile/wordjson.json
    - assets/images/plants/ # 同时声明图片所在目录，适配JSON中的图片路径

2. 调整JSON解析逻辑 #

原API可能直接返回数组数据，但本地JSON将数组包裹在Data字段下，需修改解析代码：

// 原API解析逻辑（示例）
// List<Plant> plants = Plant.fromJsonList(jsonDecode(response));

// 修改后的本地JSON解析逻辑
String jsonStr = await rootBundle.loadString('assets/images/profile/wordjson.json');
Map<String, dynamic> jsonMap = jsonDecode(jsonStr);
List<Plant> plants = Plant.fromJsonList(jsonMap['Data']);

3. 验证JSON文件有效性 #

使用JSON校验工具检查文件是否存在语法错误，同时确保文件编码为UTF-8，避免读取或解析失败。

4. 适配本地图片路径 #

JSON中的hpfPlantImgUrl为相对路径，本地加载时需拼接完整资源路径：

// 原API图片加载（示例）
// Image.network(plant.hpfPlantImgUrl)

// 修改后的本地图片加载
Image.asset('assets/${plant.hpfPlantImgUrl}')

5. 添加调试日志排查问题 #

通过日志确认是文件读取失败还是解析失败：

try {
  String response = await rootBundle.loadString('assets/images/profile/wordjson.json');
  print('读取到的JSON内容：$response');
  // 解析逻辑
} catch (e) {
  print('读取或解析JSON失败：$e');
}

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