hi, before we start, this article are continue from preivous post regarding flutter mvvm using provider, injectable, and freeze
MVVM Part 1
MVVM Part 2
The Code Project Is Here...
this article will focused on how to implement the freeze step by step.
Now, How to Use The Freezed.
first.. on your pubspec.yaml on the dependencies sections you have to install (please ignore the version, use the latest one instead)
dependencies:
flutter:
sdk: flutter
freezed: ^2.1.0+1
freezed_annotation: ^2.1.0
and on the dev_dependencies sections you have to install
dev_dependencies:
build_runner: ^2.2.0 //Generating implementation code
flutter_test:
sdk: flutter
json_serializable: ^6.3.1 //Make serializable object(to/from) json
and here is the sample of the code
import 'package:freezed_annotation/freezed_annotation.dart';
part 'task_model.freezed.dart';
part 'task_model.g.dart';
@freezed
class TaskModel with _$TaskModel {
factory TaskModel({
required final String title,
required final String description,
@Default(false) bool isDone,
}) = _TaskModel;
factory TaskModel.fromJson(Map<String, dynamic> json) =>
_$TaskModelFromJson(json);
}
now lets break it into a pieces,
Take a look at How The Class Constructed
@freezed
//This _$TaskModel is not autoGenerated you have to construct
//it manually using this format _${{ClassName}}
class TaskModel with _$TaskModel {
//for this section, you just have to follow these line
/* using this format
factory {{ClassName}}({
Declare all the fields here..
}) = _{{ClassName}}
*/
factory TaskModel({
required final String title,
required final String description,
@Default(false) bool isDone,
}) = _TaskModel;
//Allow your object to be serializable. can do mutation
//fromJson or toJson.
factory TaskModel.fromJson(Map<String, dynamic> json) =>
_$TaskModelFromJson(json);
//this Factory fromJson method is not autogenerated
// so you have to declare it manually with thisFormat
// factory {{ClassName}}.fromJson(Map<String, dynamic> json) =>
// _${{ClassName}}FromJson(json);
}
up until here.. your code will be RED everywhere.. haha dont worry take a look at the import
Take a look at the import
to be able to use @freezed or @unfreezed you have to import this
import 'package:freezed_annotation/freezed_annotation.dart';
and then you have to import this
part 'task_model.freezed.dart';
//this import can be very depend on the class name
//so the format will be
//part '{{className}}.freezed.dart';
this import will allow you to have the immutable or mutable ability of this model.
come to the next one.
you have to import this
part 'task_model.g.dart';
//this import are important because it makes your object are serializable.
//see the fromJson method in code above. without this import it will not run
up until here.. your code will be RED everywhere.. haha dont worry take a look at the code generation..
Lets generate the code.
before we go, make sure you already adjust your pubspec.yaml as the first section of this article already mentioned.
now lets ask the build runner to make the implementation class of our model...
make sure you already do flutter pub get to install the pubspec.yaml
then you run this command
flutter pub run build_runner build --delete-conflicting-outputs
and after it run it supposed to generate the implementation file like this.
..
and here we go.. now you can take a look at your model class, there will be no red anymore.
haha thanks!!..
Top comments (0)