Simplifying Code Generation in Flutter: Automatic Generation of Model Classes

Generating toJson and fromJson methods for a Flutter model class.

Flutter is an open-source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. In case you're new to Flutter, you can learn more about it here

What are models in Flutter?

"Model" typically refers to a class that represents data or business logic in an application. Models are used to define the structure and behavior of data entities such as users, products, or any other domain-specific objects. They often contain properties to represent the attributes of the object and methods to define its behavior.

“Don’t repeat yourself” (DRY) Principle

To achieve maximum productivity in software engineering, it is essential to follow the principle of not repeating oneself. Automating repetitive tasks is a quick and efficient way to achieve this. For instance, when dealing with a project containing numerous models, manually writing toJson and fromJson for every class can be overwhelming and error-prone. That is where code generation comes in.

By automating these repetitive tasks using code generation in Flutter models, you can free up your time to focus on more important aspects of the project. To achieve this, you only need to define your model class, and your toJson and fromJson methods are created for you automatically.

Let’s get started.

Let’s create a simple Todo model class.

However, we need toJson and a fromJson methods in this model,

To get the ground running, we’ll need three dependencies (2 dev_dependencies and 1 normal dependency),

build_runner: ^2.3.3
json_serializable: ^6.6.1
json_annotation: ^4.8.0

Your pubspec.yaml should look something like this:

Pubspec.yaml

Now we need to tell Flutter that our Todo needs a toJson and fromJson method, and how do we do this?

1. import ‘package:json_annotation/json_annotation.dart’;
2. Add part 'todo_model.g.dart'; after import statements.
3. Annotate our Todo class with @JsonSerializable(explicitToJson: true)

To explain further, steps 1 and 3 are fairly straightforward.

Step 2, however, is where we need to pay the most attention. Let’s break the statement into three parts: part || ‘todo_model || .g.dart’,

The first and last parts remain the same; they don’t change. The middle part, however, must be the name of the file containing the model we want to work on (not the name of the model class itself).

After we've done that, our Todo class should look like this:

Next, we run the following command in the terminal:

flutter pub run build_runner build --delete-conflicting-outputs

This generates a todo_model.g.dart class (in the same folder as our todo_model.dart file) containing our generated toJson and fromJson methods, like below.

Lastly, we call this function from our Todo class like this:

And there you go. Now you can add a new field to the Todo class and run the command again, and your toJson and fromJson classes are regenerated with the newly added fields.

We’ve come to the end of the first part of this series, next, we will be looking into generating API requests with code generation. Let me know what you think in the comment section, and don’t forget to give a clap if you learned a thing or two, Thank you.