Flutter JSON文件写入相关问题及代码报错咨询

问题解答 #

1. 应用运行时能否即时添加数据，还是仅在应用关闭时？ #

可以即时添加，只要调用写入方法就能立刻把数据持久化到JSON文件，完全不需要等应用关闭。写入操作是异步执行的，执行完成后数据就已经存在文件里了。

2. 连接JSON文件是否有多种方式，还是仅通过await getApplicationDocumentsDirectory()？ #

不止这一种方式，常见的文件路径选项包括：

• 临时目录：await getTemporaryDirectory()，适合存储临时数据，系统可能在空间不足时自动清理
• 外部存储目录（仅Android）：await getExternalStorageDirectory()，需要在AndroidManifest.xml中申请存储权限
• 自定义路径：比如指定应用内的其他目录，或者Android的外部公共目录（如Downloads），但需要对应权限配置
  getApplicationDocumentsDirectory()是最常用的选择，因为这里的文件不会被系统主动清理，适合存储需要持久化的用户数据。

报错修复 #

报错1：加载数据时提示 Error loading users: Expected a value of type 'List<dynamic>', but got one of type '_JsonMap' #

• 原因：你代码里预期解析出一个数组（List），但实际JSON文件里存储的是一个对象（Map）。比如你写了List<dynamic> users = jsonDecode(content)，但文件内容是{"users": [{"name":"xxx"}]}这种带顶层键的结构。
• 修复方案：
  要么把JSON文件结构改成纯数组（比如[{"name":"xxx"}, {"name":"yyy"}]）；
  要么调整解析逻辑，先取出对象里的数组字段：

  Map<String, dynamic> data = jsonDecode(content);
  List<dynamic> users = data['users']; // 这里的'users'要和你JSON里的键对应
  

报错2：保存数据时提示 Error saving users: MissingPluginException(No implementation found for method getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider) #

• 原因：path_provider插件没有正确配置或初始化，常见场景：
  • 没在pubspec.yaml里添加依赖，或者添加后没执行flutter pub get
  • 刚添加插件就用热重载启动，热重载不会加载原生插件代码
• 修复步骤：
  1. 在pubspec.yaml的dependencies下添加：

     path_provider: ^2.1.1 # 建议使用最新版本
     

  2. 执行flutter pub get
  3. 停止当前运行的应用，冷启动（不要用热重载）；如果是iOS项目，进入ios目录执行pod install后再启动

完整可运行代码示例 #

import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSON 数据操作 Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const JsonDataPage(),
    );
  }
}

class JsonDataPage extends StatefulWidget {
  const JsonDataPage({super.key});

  @override
  State<JsonDataPage> createState() => _JsonDataPageState();
}

class _JsonDataPageState extends State<JsonDataPage> {
  List<Map<String, dynamic>> _users = [];

  // 获取JSON文件路径
  Future<File> _getJsonFile() async {
    final directory = await getApplicationDocumentsDirectory();
    return File('${directory.path}/users.json');
  }

  // 保存数据到JSON文件
  Future<void> _saveUsers() async {
    try {
      final file = await _getJsonFile();
      // 直接将用户列表转为JSON数组字符串
      final jsonString = jsonEncode(_users);
      await file.writeAsString(jsonString);
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('数据保存成功')),
        );
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error saving users: $e')),
        );
      }
    }
  }

  // 加载数据
  Future<void> _loadUsers() async {
    try {
      final file = await _getJsonFile();
      // 文件不存在则初始化空数组
      if (!await file.exists()) {
        await file.writeAsString(jsonEncode([]));
      }
      final content = await file.readAsString();
      // 解析为List，对应我们存储的数组结构
      final List<dynamic> data = jsonDecode(content);
      setState(() {
        _users = List<Map<String, dynamic>>.from(data);
      });
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('数据加载成功')),
        );
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error loading users: $e')),
        );
      }
    }
  }

  // 添加新用户并即时保存
  void _addUser() {
    setState(() {
      _users.add({
        'id': DateTime.now().millisecondsSinceEpoch,
        'name': '用户${_users.length + 1}',
        'email': 'user${_users.length + 1}@example.com'
      });
    });
    _saveUsers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('JSON 数据操作')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: _addUser,
                  child: const Text('添加用户'),
                ),
                ElevatedButton(
                  onPressed: _loadUsers,
                  child: const Text('加载数据'),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _users.length,
                itemBuilder: (context, index) {
                  final user = _users[index];
                  return ListTile(
                    title: Text(user['name']),
                    subtitle: Text(user['email']),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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