Flutter - Read JSON Data from Assets Folder

A JSON object contains data in the form of key/value pair. The keys are strings and the values are the JSON types. Keys and values are separated by a colon. Each entry (key/value pair) is separated by a comma. We will learn how to read the data already stored in your project folder in your app with just a simple function. Sometimes it happens that we have some that are stored in your project folder/assets folder in your project directory. You want to access that data in your application and have to use it in the same.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Create json file in your asset folder and add the data you want to use in your applications

Json Data

// Data you want to get and show or use it
{"data":[
    {
        "title": "How to Add .env File in Flutter?",
        "link": "https://www.geeksforgeeks.org/how-to-add-env-file-in-flutter/"
    },
    {
        "title": "Flutter - Select Single and Multiple Files From Device",
        "link": "https://www.geeksforgeeks.org/flutter-select-single-and-multiple-files-from-device/"
    },
    {
        "title": "Autofill Hints Suggestion List in Flutter",
        "link": "https://www.geeksforgeeks.org/autofill-hints-suggestion-list-in-flutter/"
    },
    {
        "title": "How to Integrate Razorpay Payment Gateway in Flutter?",
        "link": "https://www.geeksforgeeks.org/how-to-integrate-razorpay-payment-gateway-in-flutter/"
    },
    {
        "title": "How to Setup Multiple Flutter Versions on Mac?",
        "link": "https://www.geeksforgeeks.org/how-to-setup-multiple-flutter-versions-on-mac/"
    },
    {
        "title": "How to Change Package Name in Flutter?",
        "link": "https://www.geeksforgeeks.org/how-to-change-package-name-in-flutter/"
    },
    {
        "title": "Flutter - How to Change App and Launcher Title in Different Platforms",
        "link": "https://www.geeksforgeeks.org/flutter-how-to-change-app-and-launcher-title-in-different-platforms/"
    },
    {
        "title": "Custom Label Text in TextFormField in Flutter",
        "link": "https://www.geeksforgeeks.org/custom-label-text-in-textformfield-in-flutter/"
    }
   
]
}

Step 3: Add the file path in pubspec.yaml file

assets:
    - assets/sample_json.json
  # path for the json file

Step 4: Add this code to your 1 file of your choice in the project folder/lib directory

import 'dart:convert';

import 'package:flutter/services.dart' as root_bundle;

class ReadJsonFile{
    static Future<Map> readJsonData({required String path}) async {
    
    // read json file
    final jsondata = await root_bundle.rootBundle.loadString(path);
    
    // decode json data as list
    final list = json.decode(jsondata) as Map;

    // map json and initialize
    // using DataModel
    return list;
  }
}

Step 5: Call this function where you want to access the data

floatingActionButtonLocation:
          FloatingActionButtonLocation.miniCenterFloat,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
      ReadJsonFile.readJsonData(path: "assets/sample_json.json").then((value) {
    
    });
        },
        label: const Text("Read data from json file"),
      ),

Step 6: Store this variable and use it where you want

floatingActionButtonLocation:
          FloatingActionButtonLocation.miniCenterFloat,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
      ReadJsonFile.readJsonData(path: "assets/sample_json.json").then((value) {
      setState(() {
        myList=value["data"];
      });
    });
        },
        label: const Text("Read data from json file"),
      ),

Step 7: We will here show the data that is in the same json file

Center(
        child:
        myList.isEmpty?const Text("Please click below button to get the data"):  Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children:List.generate(myList.length, (index) {
            return Card(
              child: ListTile(
                onTap: (){
                  launchUrl(Uri.parse(myList[index]["link"].toString()));
                },
                title: Text(myList[index]["title"].toString()),
                subtitle:Text(myList[index]["link"].toString()) ,
              ),
            );
          }),
        ),
      )

Output:

1. Before pressing the button

2. After pressing the button