Reading and Writing JSON Files in Flutter

In Flutter, working with JSON files is a common requirement for various tasks, such as storing configuration data, handling API responses, and managing local databases. Understanding how to read from and write to JSON files is crucial for building robust and data-driven Flutter applications.

Why Work with JSON Files in Flutter?

• Configuration: Store app settings and configurations in a structured format.
• Data Persistence: Persist data locally for offline access.
• API Communication: Serialize and deserialize data for network requests.

Reading JSON Files in Flutter

To read a JSON file in Flutter, you typically need to perform the following steps:

1. Add the necessary dependencies.
2. Load the JSON file as a string.
3. Parse the string into a Dart object.

Step 1: Add Dependencies

Ensure that you have the flutter/services.dart library, which is part of the Flutter SDK and doesn’t require additional dependencies in pubspec.yaml. If you need to work with complex JSON structures, you might consider adding the json_annotation and json_serializable packages for code generation.

# Example of adding json_annotation and json_serializable
# dev_dependencies:
#   build_runner: ^2.0.0
#   json_serializable: ^6.0.0

Step 2: Load the JSON File

To load a JSON file, you can use the rootBundle to access assets within your Flutter project. First, place your JSON file (e.g., config.json) in the assets directory, and update your pubspec.yaml to include the assets directory:

flutter:
  assets:
    - assets/

Next, load the JSON file:

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

Future<String> loadJsonData() async {
  return await rootBundle.loadString('assets/config.json');
}

Step 3: Parse the JSON String

After loading the JSON string, you need to parse it using jsonDecode from dart:convert:

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

Future<Map<String, dynamic>> readJson() async {
  final jsonData = await rootBundle.loadString('assets/config.json');
  final data = jsonDecode(jsonData);
  return data;
}

Usage in a Flutter Widget:

import 'package:flutter/material.dart';

class ReadJsonScreen extends StatefulWidget {
  @override
  _ReadJsonScreenState createState() => _ReadJsonScreenState();
}

class _ReadJsonScreenState extends State<ReadJsonScreen> {
  Map<String, dynamic> _configData = {};

  @override
  void initState() {
    super.initState();
    _loadConfigData();
  }

  Future<void> _loadConfigData() async {
    final data = await readJson();
    setState(() {
      _configData = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Read JSON Example'),
      ),
      body: Center(
        child: Text(
            _configData.isNotEmpty ? 'Config: ${_configData['appName']}' : 'Loading...'),
      ),
    );
  }
}

Writing JSON Files in Flutter

Writing JSON files involves the following steps:

1. Convert your Dart object to a JSON string.
2. Save the JSON string to a file.

Step 1: Add Dependencies

To write files, you’ll need the path_provider package to find appropriate locations for storing files and the dart:io library to perform file operations.

dependencies:
  path_provider: ^2.0.0

Step 2: Convert Dart Object to JSON String

Use the jsonEncode function from dart:convert to convert your Dart object (e.g., a Map or a custom class) to a JSON string:

import 'dart:convert';

Map<String, dynamic> myData = {'name': 'Flutter App', 'version': '1.0.0'};
String jsonData = jsonEncode(myData);

Step 3: Save JSON String to a File

Use the dart:io library along with path_provider to get a directory and save the JSON data to a file:

import 'dart:io';
import 'package:path_provider/path_provider.dart';

Future<String> getFilePath() async {
  final directory = await getApplicationDocumentsDirectory();
  return '${directory.path}/data.json';
}

Future<File> saveJsonToFile(String jsonData) async {
  final file = File(await getFilePath());
  return file.writeAsString(jsonData);
}

Usage Example:

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

Future<String> getFilePath() async {
  final directory = await getApplicationDocumentsDirectory();
  return '${directory.path}/data.json';
}

Future<File> saveJsonToFile(Map<String, dynamic> data) async {
  final jsonData = jsonEncode(data);
  final file = File(await getFilePath());
  return file.writeAsString(jsonData);
}

Future<Map<String, dynamic>> readJsonFromFile() async {
  try {
    final file = File(await getFilePath());
    final jsonData = await file.readAsString();
    return jsonDecode(jsonData);
  } catch (e) {
    print("Couldn't read file: $e");
    return {};
  }
}

class WriteJsonScreen extends StatefulWidget {
  @override
  _WriteJsonScreenState createState() => _WriteJsonScreenState();
}

class _WriteJsonScreenState extends State<WriteJsonScreen> {
  Map<String, dynamic> _data = {'name': 'Sample App', 'version': '1.0.0'};

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    final loadedData = await readJsonFromFile();
    setState(() {
      _data = loadedData.isNotEmpty ? loadedData : _data;
    });
  }

  Future<void> _saveData() async {
    await saveJsonToFile(_data);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Write JSON Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Data: ${_data}'),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _data['name'] = 'Updated App Name';
                  _data['version'] = '2.0.0';
                });
                _saveData();
              },
              child: Text('Update and Save Data'),
            ),
          ],
        ),
      ),
    );
  }
}

Best Practices for Working with JSON in Flutter

• Error Handling: Always include error handling when reading and writing files to handle cases where the file does not exist or cannot be accessed.
• Asynchronous Operations: Perform file operations asynchronously to avoid blocking the main thread.
• Data Validation: Validate the structure and content of your JSON data to prevent runtime errors.
• Model Classes: Use model classes and serialization libraries (e.g., json_annotation, json_serializable) to manage complex JSON structures efficiently.

Conclusion

Reading from and writing to JSON files is fundamental to Flutter development. By following the steps outlined in this guide and adopting best practices, you can effectively manage data in your Flutter applications. Whether you’re configuring settings, persisting data locally, or exchanging information with APIs, mastering JSON handling will enable you to build more powerful and reliable apps.