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
Dart
import 'dart:convert' ;
import 'package:flutter/services.dart' as root_bundle;
class ReadJsonFile{
static Future<Map> readJsonData({required String path}) async {
final jsondata = await root_bundle.rootBundle.loadString(path);
final list = json.decode(jsondata) as Map;
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
Last Updated :
08 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...