Flutter中如何解析JSON文件数据？及pubspec.yaml配置报错处理

一、先解决pubspec.yaml的报错 #

你遇到的Expected a key while parsing a block mapping错误是YAML文件缩进不规范导致的。YAML对缩进要求严格，assets必须是flutter节点下的子项，缩进要和同级的uses-material-design保持一致（统一用2个空格，不能混用Tab和空格）。

正确配置示例：

flutter:
  uses-material-design: true
  # 缩进与上方uses-material-design保持一致
  assets:
    - assets/your_json_file.json  # 替换为你的JSON文件实际路径

二、解析并展示JSON文件数据的步骤 #

1. 准备JSON文件 #

在项目根目录创建assets文件夹，将你的JSON文件（比如data.json）放入其中。示例JSON内容：

[
  {"name": "示例1", "description": "第一条测试数据"},
  {"name": "示例2", "description": "第二条测试数据"}
]

2. 加载并解析JSON #

通过rootBundle读取assets中的文件，再用json.decode将字符串转为可操作的数据结构，最后用组件展示：

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

class JsonDisplayPage extends StatelessWidget {
  const JsonDisplayPage({super.key});

  // 异步加载并解析JSON
  Future<List<dynamic>> _loadJsonData() async {
    String jsonContent = await rootBundle.loadString('assets/data.json');
    return json.decode(jsonContent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('JSON数据展示')),
      body: FutureBuilder(
        future: _loadJsonData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasData) {
              List<dynamic> jsonData = snapshot.data as List<dynamic>;
              // 用ListView渲染数据列表
              return ListView.builder(
                itemCount: jsonData.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('名称：${jsonData[index]['name']}', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
                        const SizedBox(height: 4),
                        Text('描述：${jsonData[index]['description']}', style: const TextStyle(fontSize: 14, color: Colors.grey)),
                        const Divider(height: 20)
                      ],
                    ),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Center(child: Text('加载失败：${snapshot.error}'));
            }
          }
          // 加载中显示加载指示器
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

3. 额外说明 #

• 如果你的JSON是单个对象（而非数组），解析时要转为Map<String, dynamic>，示例：Map<String, dynamic> data = json.decode(jsonString);
• 确保JSON文件格式合法，避免出现逗号遗漏、引号不匹配等语法错误
• assets路径必须和pubspec.yaml中配置的完全一致

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