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.w3wiki.net/how-to-add-env-file-in-flutter/" }, { "title": "Flutter - Select Single and Multiple Files From Device", "link": "https://www.w3wiki.net/flutter-select-single-and-multiple-files-from-device/" }, { "title": "Autofill Hints Suggestion List in Flutter", "link": "https://www.w3wiki.net/autofill-hints-suggestion-list-in-flutter/" }, { "title": "How to Integrate Razorpay Payment Gateway in Flutter?", "link": "https://www.w3wiki.net/how-to-integrate-razorpay-payment-gateway-in-flutter/" }, { "title": "How to Setup Multiple Flutter Versions on Mac?", "link": "https://www.w3wiki.net/how-to-setup-multiple-flutter-versions-on-mac/" }, { "title": "How to Change Package Name in Flutter?", "link": "https://www.w3wiki.net/how-to-change-package-name-in-flutter/" }, { "title": "Flutter - How to Change App and Launcher Title in Different Platforms", "link": "https://www.w3wiki.net/flutter-how-to-change-app-and-launcher-title-in-different-platforms/" }, { "title": "Custom Label Text in TextFormField in Flutter", "link": "https://www.w3wiki.net/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()) , ), ); }), ), ) |
Output:
1. Before pressing the button
2. After pressing the button