Starting with Flutter: JSON & Serialization

JSON is a great format to pass data through web and more. Every developer will be facing this dreaded issue: how the **** do I translate a JSON into an object? We are now here to check what Flutter gives us to serialize JSON objects. For the sake of this article we’ll consider serializing an “Event” object composed like this:

Manual serialization

Manual serialization is natively supported by Dart with the dart:convert library. On our data class we’ll need to create 2 functions called fromJson and toJson which, respectevely, will translate a json into our Event and vice versa. fromJson takes a Map<String, dynamic> and will give you an instance of the data class, toJson is a class function which gives a Map starting from data parameters.

Then serialize and deserialize is an easy line of code:

This is easy but be aware that you would probably have also to face more complex objects (like nested JSONs) or you could wish for a more “automatic” way to to this operation.


Code generation libraries

We’ll see a very useful package called json_serializable, published by Google, which automatically generates code to serialize and deserialize our data class.

First we need to add our dependencies, we’ll need to add also dev_dependencies because there will be code generation from json_serializable that we don’t want on our build:

Then on our Event class we’ll need to say that’s a json_serializable class using annotations and allow the class to access private members in generated files:

This will generate code for encoding and decoding all parameters in this class. You can change the name the decoding will find by adding an annotation to the parameter this way:

You can also set some defaults, required elements or to ignore some fields:

Last passage is to run a command to generate JSON serialization code with a watcher that, is some data classes change, also the serialization code will be recreated:

in the end we’ll just have to call our dear old jsonDecode and fromJson:

That’s it.

If your class have a nested class you’ll need to JsonSerialize also the nested class and on your “father class” you’ll need to change this annotation:

That’s it. It may seem not the easiest thing in the world but it’s better than doing it manually, also if you change something on your object you don’t need to change the way the serialization works, you’ll just need to redo the command or let the watcher do it. Pretty handy!