Flutter Freezed — The complete crash course
--
Introduction
Freezed is a code-generation package that helps you to create data classes in Dart. It prevents you from writing hundreds of error-prone lines. Sometimes you just want a class that accepts its values in a constructor, a toString method and maybe value equality. That alone is a lot. But now imagine you want objects to remain immutable. For that you need an extra copyWith method. If you know how to implement all this in Dart, you surely know that it takes a many lines of code to achieve this. And that’s where freezed comes in…
Installation
First, you need to add the freezed package to your dev_dependencies and add freezed_annotation as a dependency. To generate code, we still need the build_runner package in the dev_dependencies. Also we want to use the package jsonn_serializable to handle json easier (toJson and fromJson).
Now you have to run flutter pub get and you have everything set up!
The whole thing now looks like this in your pubspec.yaml file:
Usage
First you need to create a class with the @Freezed() annotation.
This now looks like this:
Now you have to specify a super class that mixes in:
It may be that your linter shows problems. This is quite normal and we will fix that soon.
Now we can get started on our first “feature”, which we discussed at the beginning. We want to create a constructor.
For this, we use a const factory constructor, which points to a class with the same name as yours. The only difference is that this class has an underscore.
Again, you don’t have to worry about your linter showing an error. This class does not exist yet, but will soon be generated by freezed.
Now you can specify in that constructor any field that you want. You don’t have to use the this. syntax, because this part is handled by freezed.
Here is a small example you could use for authentication:
But sometimes you need a default value. For example, if the user can eventually become a premium user, but is not one when the account is created. For this, you can use the @Default Decorator:
Very good! Now we have already created our constructor. Next we want to implement fromJson.
Again, we are using classes that have not been generated yet, so don’t worry!
Well, that alone was impressive! We created a full data class in 12 lines. However. We are now missing the copyWith() method or the toJson() method, right?
Well, not quite. Freezed does an incredible amount of work for us. It generates, without us doing anything, the following things:
toString()method==operatorhashCodegetter variablecopyWith()methodtoJson()method
I think at the latest now you can understand why freezed is so helpful.
As a last step we have to add onepart declaration below the imports.
It’s this:part 'my_class.freezed.dart';
part is "[...] a symptom for using library level privacy as opposed to class level privacy." (https://stackoverflow.com/questions/18403551/whats-the-reasoning-behind-part-and-part-of-in-dart-libraries)
Errors occur here as well, but you ignore them. These files have not been created yet, but we are doing that now.
Okay, now we really come to the last step.
We now navigate inside the terminal to the folder of our project and execute the following command:
flutter pub run build_runner build --delete-conflicting-outputs.
Now you will find new files in your project.
Congratulations, you have now successfully built a data class in freezed!
How to update your data class
Well, now you want to change something. Let’s say in this example a part of the constructor. Well, this is much easier than you think. First you just add a new field to your normal file. In this example it is now username.
The next step is to execute the command we just executed.
flutter pub run build_runner build --delete-conflicting-outputs
That was easy, wasn’t it?
Conclusion
In this article you have learned the basics of the package freezed. You have seen how easy it is to use and how much time it saves you. We created a complete data class for authentication with 16 lines we wrote ourselves.
In the next few articles I will introduce more somewhat complicated packages and explain them. If you don’t want to miss this, I recommend you to follow me.
I really hope you enjoyed it! If so, I would be very happy if you could give this post some claps!
Want to check out some more quality content from me? Then I recommend you check out my Twitter account and follow me there too! You’ll get daily motivation there and find great threads about programming and productivity!
Thanks for reading, I wish you a great day and happy coding!
Sources to read more about freezed:
