Leverage Your App Code with Freezed and JsonSerializable

The Problem

Picture this: You’re working on your Flutter app, and everything is going smoothly. You’re on a roll, cranking out code faster than your coffee maker brews your morning espresso. Then it hits you — you need to create immutable data classes with tons of boilerplate code. Not to mention, you also need to serialize and deserialize JSON. Suddenly, your joyful coding session feels like trying to untangle earphones — frustrating and time-consuming.

Enter Freezed and JsonSerializable, your new best friends in the Flutter world. These packages will transform your coding life, saving you from the mundane boilerplate and letting you focus on the fun parts of app development.

The Heroic Duo: Freezed and JsonSerializable

Freezed is a code generator for unions/pattern-matching/copy-with in Dart. It simplifies creating immutable classes and takes away the pain of boilerplate code.

JsonSerializable is a powerful tool that helps you serialize and deserialize your data classes to and from JSON. Combined with Freezed, you get a streamlined, maintainable codebase.

Before and After: Using Freezed and JsonSerializable

To truly appreciate the magic of Freezed and JsonSerializable, let’s look at a concrete example. We’ll start with the old-school, manual approach, and then see how much cleaner and simpler it becomes with these packages.

Before Freezed and JsonSerializable

Here’s what the traditional approach looks like for creating an immutable data class and handling JSON serialization:

Notice how much boilerplate code we have to write. This approach requires a lot of manual coding, which is error-prone and hard to maintain.

After Freezed and JsonSerializable

Now, let’s see the same functionality using Freezed and JsonSerializable.

First, add the dependencies in your pubspec.yaml file:

dependencies:
 flutter:
   sdk: flutter
 freezed_annotation: ^2.0.0
 json_annotation: ^4.0.1

dev_dependencies:
 build_runner: ^2.0.0
 freezed: ^2.0.0
 json_serializable: ^4.0.1

Then, create your data class with Freezed and JsonSerializable:

import 'package:freezed_annotation/freezed_annotation.dart';

part 'superhero.freezed.dart';
part 'superhero.g.dart';

@freezed
class Superhero with _$Superhero {
  const factory Superhero({
    required String name,
    required String power,
    required bool isHuman,
  }) = _Superhero;

  factory Superhero.fromJson(Map<String, dynamic> json) => _$SuperheroFromJson(json);
}

Run the build runner to generate the necessary code:

flutter pub run build_runner build

Using the generated code is straightforward and clean:

void main() {
 final hero = Superhero(name: ‘Spiderman’, power: ‘Web-slinging’, isHuman: true);
 
 // Serialize to JSON
 final json = hero.toJson();
 print(‘Serialized: $json’);
 
 // Deserialize from JSON
 final newHero = Superhero.fromJson(json);
 print(‘Deserialized: ${newHero.name}, ${newHero.power}, ${newHero.isHuman}’);
}

The Difference

With Freezed and JsonSerializable, you reduce your boilerplate code significantly. You no longer need to write repetitive code for things like copyWith, toJson, fromJson, equals, hashCode, and toString. These packages handle all of that for you, making your code cleaner, easier to read, and maintain.

Bonus

There are many other options in freezed that you can explore, like you can also create a mutable class with freezed just annotate that class with @unfreezed. To know more goto :

freezed | Dart package

Conclusion

Using Freezed and JsonSerializable transforms your code from a tangled mess of boilerplate to a streamlined, maintainable work of art. It’s like upgrading from a rusty bicycle to a sleek sports car — everything is faster, smoother, and a lot more fun. So, embrace these tools and take your Flutter development to the next level. Happy coding! 🚀

And remember, with great code comes great responsibility. Use these tools wisely and your Flutter app will soar like a superhero. 🦸‍♂️🦸‍♀️

I hope you found this article enjoyable! If you appreciate the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!

Follow Me

Aakash Pamnani - Medium

aakash-pamnani - Overview

https://www.linkedin.com/in/aakashpamnani/

x.com

Thank you for taking the time to read this article. If you enjoyed it, feel free to explore more of my articles and consider following me for future updates. Your support is greatly appreciated!