How to Load JSON Assets into Flutter App?

How to Load JSON Assets into Flutter App?

JSON is Stands for JavaScript Object Notation and is a way to store information in an organized, easy-to-access manner. We can store assets in a JSON format and can parse JSON. Okay, so let’s learn how to load JSON assets into Flutter App.

Are you as excited as us to explore the same? Let’s dive into the same.

How to Load JSON Assets into Flutter App?

When you’re calling loadString, it’s actually an asynchronous method call. You can tell because it returns a Future<value> rather than just a value. This means that it doesn’t immediately have a result of String, but will at some point in the future.

There are two main ways of dealing with asynchronicity in Dart; the first being to use async and await, the second being to use the futures directly. See the dart guide on Asynchronous Programming.

If you use future.then directly, you can do it from a normal function i.e. from initState, etc. You simply specify the callback and in the callback what to do with the result.

void printDailyNewsDigest() {
  final future = gatherNewsReports();
  future.then((news) => print(news));
}

If you want to use async() and await() make a custom function like the below:

Future<Void> printDailyNewsDigest() async {
  String news = await gatherNewsReports();
  print(news);
}

If you override a function you also need to make sure you don’t change the return value. That should get caught by dart 2’s typing most of the time, but void -> Future doesn’t seem to be.

You can also try the below way:

String data = await DefaultAssetBundle.of(context).loadString("assets/data.json");
final jsonResult = json.decode(data);

I use the following to parse JSON in assets:

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
//...
Future<Map<String, dynamic>> parseJsonFromAssets(String assetsPath) async {
    print('--- Parse json from: $assetsPath');
    return rootBundle.loadString(assetsPath)
        .then((jsonStr) => jsonDecode(jsonStr));
  }

Usage async:

parseJsonFromAssets(path)
    .then((dmap) => {
    // here you get json `dmap` as Map<String, dynamic>
    print(dmap);
}));

Usage Sync:

Map<String, dynamic> dmap = await parseJsonFromAssets('assets/test.json');

create a custom method like the below:

loadJson() async {
  String data = await rootBundle.loadString('assets/json/keyboard.json');
  jsonResult = json.decode(data);
  print(jsonResult);
}

So now, we need to call that method in the initState() like below:

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) async {
    await loadJson();
  });
}

Now we to define JSON on the assets like below:

flutter:
  uses-material-design: true
  assets:
    - assets/json/keyboard.json

Conclusion:

Thanks for being with us on a Flutter Journey !!!

Keep Learning !!! Keep Fluttering !!!

So in this article, We have been through how to load JSON assets into Flutter App.

Drop us your valuable suggestion/feedback to serve you better.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.