Now a days in the REST world, JSON is very much important and it transfers between client and server.

JSON (JavaScript Object Notation) is a lightweight data-interchange format

Ok, How do we serialize and deserialize JSON in flutter ??? 🤔🤔

As from my knowledge we can do it three ways 😇
1) Manual
2) Json2Dart using websites
3) Auto Generation

Consider the following model class

class ManualPost {
  int userId;
  int id;
  String title;
  String body;
}

Manual

Convert class to JSON

methods toJson & jsonEncode would help us here.

Map<String, dynamic> toJson() =>
      {'userId': userId, 'id': id, 'title': title, 'body': body};
var post = ManualPost();
post.id = 1;
post.userId = 1;
post.title = "Title";
post.body = "Body";
print(jsonEncode(post));

The above will print like this
{"userId":1,"id":1,"title":"Title","body":"Body"}

Now will see the reverse

JsonString to Class

jsonDecode will help us to get the Map from the json string

With the Map result we can create the instance of our model in two steps
1) Create a constructor with properties
2) Create instance using static funtion fromJson

ManualPost({this.userId, this.id, this.title, this.body});

ManualPost.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        userId = json['userId'],
        title = json['title'],
        body = json['body'];

Json2Dart using websites

There are lot's of website which does the above manual stuff's
one of the website which i used is JsonToDart

AutoGeneration

Thanks to the packages json_serializable, build_runner & json_annotation
These will help us to generate the fromJson & toJson for the model classes.

Let us see in action.!!!!

Add the json_annotation as dependency in pubspec yaml file
Similarly add json_serializable & build_runner as dev dependency in pubspec yaml file.

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^3.0.1
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.9.0
  json_serializable: ^3.3.0

We are only two steps ahead to generate fromJson & toJson
1) Annotate the class using @JsonSerializable() & attributes using @JsonKey(name:'key')

@JsonSerializable()
class AutoGenPost {
  @JsonKey(name: 'userId')
  int userId;
  @JsonKey(name: 'id')
  int postId;
  @JsonKey(name: 'title')
  String title;
  @JsonKey(name: 'body')
  String body;

2) Run the command flutter pub run build_runner build in your favorite terminal

This will do the magic to create a file like 'filename.g.dart'.

part of 'auto_gen_post.dart';

AutoGenPost _$AutoGenPostFromJson(Map<String, dynamic> json) {
  return AutoGenPost()
    ..userId = json['userId'] as int
    ..postId = json['id'] as int
    ..title = json['title'] as String
    ..body = json['body'] as String;
}

Map<String, dynamic> _$AutoGenPostToJson(AutoGenPost instance) =>
    <String, dynamic>{
      'userId': instance.userId,
      'id': instance.postId,
      'title': instance.title,
      'body': instance.body,
    };

Now we can refer this file in our model and we can call from & to Json of the generated methods.

part 'filename.g.dart';
factory Class.fromJson(Map<String, dynamic> json) => _$ClassFromJson(json);
Map<String, dynamic> toJson() => _$ClassToJson(this);

That's it... we now able to do the serialization and deserialization in flutter 🥰🥰

Some of us might come from C# or Java world, where we have used runtime serialization and de-serialization using generics and reflection. Whereas in flutter we don't have such functionality as of today, due to some limitations. 😫😫

Check out the official documentation for more info
Flutter Docs

for full sample
Github Repo

Happy fluttering😇😇