How to parse JSON in Dart / Flutter

JSON is a cornerstone in most Android apps, but how do you parse JSON in Dart and Flutter?

As mentioned in my “4 tips to boost your software development career” post, I’ve been experimenting with Flutter recently. Dart, the language used by Flutter, comes with a good library to parse JSON (dart:convert) but after having used gson for years in my Android apps, I had to relearn how to parse JSON.

If you Google gson for Dart , you will also find a library called dson. However, for this code tutorial, I’m focusing on using dart:convert.

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Read content from a JSON file in Flutter

Create a top level assets folder (same level as lib folder), then, inside it, a new directory named data, and then copy the following JSON file, named crossword.json to it.

FYI, this JSON is extracted from my own Flutter app Crosswords To Learn French, which displays crosswords.

The next step is to tell Flutter about our file. Unfortunately, this process is a bit cumbersome, as we need to update the pubspec.yaml file. Thankfully, that yaml file comes with some comments explaining how to add assets to our Flutter app. At the bottom of that file, we find the flutter: section. Typically, for an Android app, we use material design, so I have left that in. The item assets: is what we need to add to the file.

 

Now, all we need is to read the content from the file. This is done asynchronously, using Futures.  Under the lib folder of your app, create a directory data then a new file crossword_parser.dart.

Now, let’s add the code to output the JSON file to a String as well as the imports for dart:async and package:flutter/services.dart.

Then, let’s add a bit more code to wire it all up. We’ll create an entry point method in crossword_parser.dart.

And we’ll call this from main.dart as follows.

If the app is already running on your device/emulator, remove it from recent apps, to force a fresh build, to ensure the assets folder is accessible by the app.

Note: for simplicity, the parsing code is called directly from main(). It means that you cannot use Flutter Hot Reload to see your changes and you must instead choose Run ‘main.dart’.

However, when you run the app now, nothing visible happens. So, let’s log the JSON string to confirm it’s working. Let’s amend our entry point method in crossword_parser.dart.

Let’s run the app again. We now see the JSON printed in the console view.

Parse JSON log

Next, we will parse JSON in Dart using dart:convert.

 

Parse JSON in Dart

dart:convert is a general purpose decoder/encoder for various data representations. One of its format is json. So converting a JSON String to a Map is done in one line. Let’s add the import for dart:convert and a method to parse JSON to crossword_parser.dart.

And let’s call this new method.

We have a top level JSON object which is a simple String, so let’s add some code to print it.

Similarly, we can access the JSON integer value.

To access a JSON Array value, the same principle holds, ie we are using maps. Let’s see how it works.

Now, let’s get organised and create an object representing our object. Let’s call it Crossword, and let’s add it to crossword_parser.dart.

 

And let’s output a Crossword from our parse method.

Finally, let’s use it in loadCrossword().

 

What next?

Well, this was a small JSON file, but with a large JSON file, it’s easy to see the code would get quite messy. So now that you’ve mastered how to parse JSON in Dart with dart:convert, why not try dson?

 

Author: Natalie Masse Hooper

Mobile app developer with 14 years experience. Started with the Android SDK in 2010 and switched to Flutter in 2017. Past apps range from start ups to large tech (Google) and non tech (British Airways) companies, in various sectors (transport, commercial operations, e-commerce).

2 thoughts on “How to parse JSON in Dart / Flutter”

  1. Great tutorial. However, I had some trouble following along the code. Could you please post the full code here or on GitHub? Thanks.

Leave a Reply

Your email address will not be published.