Flutter How To Use Freeze
Tags: flutter, mobile, programming, devjournal
Published: 2022-08-13 04:33:00

hi, before we start, this article are continue from preivous post regarding flutter mvvm using provider, injectable, and freeze
[MVVM Part 1](https://dev.to/noveriojoee/mvvm-with-flutter-52p6)
[MVVM Part 2](https://dev.to/noveriojoee/mvvm-with-flutter-part2freeze-48m9)
[The Code Project Is Here...](https://github.com/noveriojoee/what_to_do_app_flutter)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ints7ex7ksn1hxrdj7yc.png)
..

and here we go.. now you can take a look at your model class, there will be no red anymore.

haha thanks!!..