JSON Serialization In Dart/Flutter With Built_Value

In this post, we will learn about JSON serialization in Dart/Flutter with Built_Value library. We will setup a serializer and see it in action.

Introduction

We have already covered introduction to built_value and it’s implementation detail in our previous posts. Now we are ready to jump into JSON serialization in dart/flutter with the built_value library.

As we have mentioned previously, Dart does not have good support for JSON serialization. You have to write quite a bit of code for every object that you wish to Serialize and De-serialize. This is where the power of Built Value types kick in.

Setup Serializers In Dart/Flutter With Built_Value

There are basically two steps to enable Serialization support for Built Value models:

• Add a static Serializer in your model definition.
• Define a top level Serializer that holds serializers for each of your models.

Create Built Value Type Model

Using the same Contact model from our previous post, let’s setup serialization. Add a static serializer to your model like this:

static Serializer<Contact> get serializer => _$contactSerializer;

Complete code for Contact Model:

import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';

part 'contact.g.dart';

abstract class Contact implements Built<Contact, ContactBuilder> {
  Contact._();
  factory Contact([updates(ContactBuilder b)]) = _$Contact;

  static Serializer<Contact> get serializer => _$contactSerializer;

  int get id;
  String get fullName;
  @nullable
  int get age;
  @nullable
  String get mobile;
  @nullable
  bool get isFriend;
}

After adding the serializer, regenerate the ‘contact.g.dart‘.

flutter packages pub run build_runner build

You will notice that our generated model now has a serializer.

Create Top-Level Serializer For All Models

Next, add a new file called “serializers.dart”.

import 'package:built_value/serializer.dart';

import 'contact.dart';

part 'serializers.g.dart';

//add all of the built value types that require serialization
@SerializersFor([
  Contact,
])
final Serializers serializers = _$serializers;

You can notice that it is again a multi-part file. The attribute @SerializersFor holds an array of built value types. It also has an instance of the default serializer.

The default serializer can be extended to add any number of other serializers using the builder pattern. More on that later.

Next, run the build_runner build command again to generate file ‘serializers.g.dart‘.

Serialization In Action

To see things in action, let’s test our first serializer.

var contact1 = Contact((b) => b
..id = 1
..fullName = "Stack Secrets");

print(serializers.serialize(contact1));

The code above will output a serialized array of values which looks like Dart’s primitive data types.

[Contact, id, 1, fullName, Stack Secrets]

Adding JSON Serialization With Built_Value

Let’s add JSON serialization to the Contact built value type. Adjust your serializer as follows and regenerate the auto generate code.

import 'package:built_value/standard_json_plugin.dart';
...

final Serializers serializers =    (_$serializers.toBuilder()..addPlugin(StandardJsonPlugin())).build();

We have added the “StandardJsonPlugin” plugin in the default serializer’s implementation. Now when we run the same code as before:

var contact1 = Contact((b) => b
..id = 1
..fullName = "Stack Secrets");

print(serializers.serialize(contact1));

We will get a JSON format output.

{$: Contact, id: 1, fullName: Stack Secrets}

Wrapping Up

In this post we looked at how we can setup JSON serialization in Dart/Flutter with built_value library. We continued from our previous post and added a basic serializer to our built value model.

Next, we will look at JSON Serialization and De-Serialization in more detail.