Flutter – Read JSON Data from Assets Folder

Last Updated : 24 Apr, 2025

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

Dart

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

Dart

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

Dart

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

Dart

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()) , 
              ), 
            ); 
          }), 
        ), 
      )