Flutter Read JSON File from Assets : Guide [2024] (2024)

Flutter is an open-source UI (User Interface) software development toolkit created by Google. It is used for building natively compiled applications for mobile, web, and desktop from a single codebase. Flutter allows developers to use a single codebase to create applications for both Android and iOS platforms, as well as for web and desktop applications.

In this tutorial, we will explore how to read a JSON file from assets in Flutter project. You’ll find detailed explanations, practical examples, and best practices to make your JSON file handling smooth and efficient. So, let’s dive into the world of Flutter and JSON!

What is JSON?

JSON, which stands for JavaScript Object Notation, is a lightweight data interchange format. It is easy for humans to read and write, and it is easy for machines to parse and generate. JSON is often used to transmit data between a server and a web application, as an alternative to XML (eXtensible Markup Language).

1. Data Format: JSON is primarily a data format that represents structured data as key-value pairs. The data is enclosed in curly braces {} and can be nested to represent complex structures.
2. Key-Value Pairs: Data in JSON is organised into key-value pairs. Each key is a string, and values can be strings, numbers, objects, arrays, boolean values, or null. The key and value are separated by a colon (:), and pairs are separated by commas (,). For Example :

{
 "name": "John Doe",
 "age": 25,
 "isStudent": false,
 "grades": [90, 85, 92]
}

Flutter Project Setup :

To Create a new flutter Project, follow this steps :

1. Open your terminal or command prompt.
2. Enter the following command :

flutter create json_read_app

Reading JSON File from Assets :

The lib folder is where most of your code will reside, including the Dart files responsible for reading the JSON file.

Now that we have set up our Flutter project, it’s time to read the JSON file from the assets directory by following steps:

1. Prepare JSON file : First, Create the assets folder in your root directory of your project. Inside your assets folder put the your JSON file (e.g., data.json).
2. Update Pubspec.yaml : The pubspec.yaml file is where you declare your project’s dependencies and assets. Open the pubspec.yaml file and make the following changes:

flutter:
 assets:
 - assets/data.json

This change informs Flutter to include data.json in the assets bundle during the build process.

Load the JSON File :

Next, you need to load the JSON file from the assets and parse its contents into Dart objects. Here’s how you can achieve this:

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

Future<Map<String, dynamic>> loadJsonFromAssets(String filePath) async {
 String jsonString = await rootBundle.loadString(filePath);
 return jsonDecode(jsonString);
}

The above code defines a function, loadJsonFromAssets, which takes the file path as input and returns a Future that resolves to a Map<String, dynamic>. The function uses the rootBundle.loadString method to load the JSON file as a string and then uses jsonDecode from the dart:convert library to convert the string into a Dart map.

Accessing Data from the JSON :

Once the JSON data is loaded into a Dart map, you can access the individual values using their keys. Here’s an example of how you can retrieve data from the JSON:

Map<String, dynamic> jsonData = await loadJsonFromAssets('assets/data.json');
String name = jsonData['name'];
int age = jsonData['age'];

FAQs :

How can I validate the JSON data before parsing it in Flutter?

To validate JSON data before parsing, you can use libraries like json_serializable to generate model classes and perform serialisation and deserialisation. This helps ensure that the incoming JSON data matches the expected structure.

Can I read multiple JSON files from assets in a Flutter project?

Yes, you can read multiple JSON files from assets in a Flutter project. Simply include all the file paths in the pubspec.yaml file under the flutter > assets section.

Is it possible to write data back to the JSON file in Flutter?

Yes, Flutter allows you to write data back to a JSON file. You can use the dart:io library to read and write files.

What is the difference between JSON and XML?

JSON is a lightweight data format that is easy to read and write, making it more popular for modern applications. XML, on the other hand, is more verbose and complex but offers advantages like human-readable structure and support for comments.

How can I handle large JSON files in Flutter?

For large JSON files, consider using libraries like json_stream that provide stream-based JSON parsing, allowing you to process data incrementally without consuming excessive memory.

Can I use third-party libraries for JSON handling in Flutter?

Yes, Flutter has several third-party libraries dart:convert and json_serializable that aid in JSON handling, serialisation, and deserialisation.

In this comprehensive guide, we explored the process of reading a JSON file from assets in Flutter. We learned about the importance of JSON in app development, the anatomy of a JSON file, and the step-by-step process of reading and accessing JSON data in Flutter. Additionally, we covered best practices to enhance your JSON file handling skills.

By mastering JSON file handling in Flutter, you can efficiently manage and process data, ensuring a smooth and responsive user experience for your mobile applications. Embrace the power of JSON and unleash the full potential of your Flutter projects!