Flutter How To Use Freeze

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!!..

Blog

Flutter How To Use Freeze

njoee

Now, How to Use The Freezed.

Take a look at How The Class Constructed

Take a look at the import

Lets generate the code.

Join Our Newsletter. No Spam, Only the good stuff.

Related