Run the below command to install the dependencies.<\/strong><\/p>\n We compare model classes with and without freezed. A model class generation without freezed means the “boilerplate” code isn’t useful in complex applications with a lot of functionality. A model class generation without freezed has a lot of code, and this approach doesn’t scale. Using the package, we can eliminate a lot of boilerplate code.<\/p>\n Leverage World-Class Flutter Talent!<\/span> Firstly, you need to create a class that has the @freezed() annotation.<\/p>\n The next step is to define a class with mixins.<\/p>\n Now we add a factory method as a constructor with a list of all the arguments\/properties. Here we have defined @Default inside the factory method which comes from \u2018freezed_annotation\u2019<\/strong>.The @Default annotation is used to set a default value for non-required properties.<\/p>\n We have now created our constructor. Next, we want to implement fromJson\/toJson.<\/strong> In the freezed package, fromJson and toJson are not generated, but it knows what json_serializable is.<\/p>\n Consider this snippet.<\/p>\n Here we are done with a UserModel<\/strong> class with freezed code generation.<\/p>\n The above code snippet shows two lines of code that use part and contain freezed, and these are the ones that let the freezed package know when to generate code for us whenever we run the build_runner.<\/p>\n Now we’re really getting close to the end. Our code generator will generate some errors if we miss something or add a typo.<\/p>\n The next step is to navigate within the terminal to the folder where our project is located and execute the following command.<\/p>\n You will now see new files in your project explorer.<\/p>\n You can find the code in the .freezed.dart files. The code generator has added the following to each model class:<\/p>\n A list of all the store arguments\/properties inside the factory method was made final<\/p>\n The data class you have successfully created!<\/p>\n The method returns an updated instance with the new properties.<\/p>\n The state is updated when its value changes in state management solutions. State management solutions update the state when its value is changed. Here’s when copyWith comes in handy.<\/p>\n To demonstrate, Assume the UserModel object we created in our state. You’ll notice that we get immutability by default. We are also unable to directly assign the properties as expected despite getting the copyWith generated for us.<\/p>\n The error message indicates that there is a getter for the isActive, but no setter has been created, so value assignment is not possible. <\/p>\n The correct way to assign new values is as follows.<\/p>\n We have implemented the following for the user who clicks on the switch under the list view. We will update the value of the isActive user to true or false. Let\u2019s create a function that attaches it to the switch onChange property and just passes in the current index of that item.<\/p>\n On clicking any of the ListTile we will see the below output. <\/p>\n In our latest blog we try to cover the Flutter BLoC tutorial<\/a> with state management using the BLoC pattern.<\/p>\n Here’s the source code of code generation with the freezed package: flutter-freezed-example.<\/a> Take a look at the code, clone the repository and play around with the code.<\/p>\nflutter pub get<\/pre>\n
![\"Flutter](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Flutter.jpg\")
<\/p>\n
\nWant to develop a cost-effective Flutter application? Stuck with the question: where can you find proficient developers? Contact Bacancy now and hire flutter developers<\/a> from us!<\/strong><\/i><\/p>\nCreating Model Classes with freezed <\/h2>\n
import 'package:freezed_annotation\/freezed_annotation.dart';\r\n\r\n@freezed\r\nclass UserModel{}<\/pre>\nDefine Class with Mixins<\/h2>\n
import 'package:freezed_annotation\/freezed_annotation.dart';\r\n\r\n@freezed\r\nclass UserModel with _$UserModel{}<\/pre>\nCreate a Constructor <\/h2>\n
import 'package:freezed_annotation\/freezed_annotation.dart';\r\n\r\n@freezed\r\nclass UserModel with _$UserModel {\r\n const factory UserModel({\r\n required String firstName,\r\n required String lastName,\r\n required String emailId,\r\n @Default(false) bool isActive,\r\n }) = _UserModel;<\/pre>\nimport 'package:freezed_annotation\/freezed_annotation.dart';\r\n\r\npart 'user_model.freezed.dart';\r\npart 'user_model.g.dart';\r\n\r\n@freezed\r\nclass UserModel with _$UserModel {\r\n const factory UserModel({\r\n required String firstName,\r\n required String lastName,\r\n required String emailId,\r\n @Default(false) bool isActive,\r\n }) = _UserModel;\r\n\r\n factory UserModel.fromJson(MapGenerate Code using freezed <\/h2>\n
flutter pub run build_runner build --delete-conflicting-outputs<\/pre>\n
![\"Flutter](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Flutter-2.jpg\")
<\/p>\n\n
Using the “copyWith” method<\/h2>\n
\nThe original UserModel object’s values would have been used to create a new UserModel object if we wanted to update our state.<\/p>\n![\"Using](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Flutter-1.jpg\")
<\/p>\nvoid _updateActiveUser(int index) {\r\n userModel[index] = userModel[index].copyWith(\r\n isActive: !userModel[index].isActive);\r\n setState(() {});\r\n}\r\n\r\n\/\/ \u2026\r\n\r\nchild: Column(\r\n children: [\r\n ListView.builder(\r\n shrinkWrap: true,\r\n itemCount: userModel.length,\r\n itemBuilder: (BuildContext context, int index) {\r\n return Container(\r\n margin: EdgeInsets.only(top: 20, left: 20, right: 20),\r\n decoration: BoxDecoration(\r\n color: Colors.grey.shade200,\r\n borderRadius: BorderRadius.all(Radius.circular(10)),\r\n ),\r\n padding: EdgeInsets.all(10),\r\n child: ListTile(\r\n title: Text(userModel[index].firstName + \" \" + userModel[index].lastName),\r\n subtitle: Text(userModel[index].emailId),\r\n trailing: Transform.scale(\r\n scale: 1,\r\n child: Switch(\r\n onChanged: (val) {\r\n _updateActiveUser(index);\r\n },\r\n value: userModel[index].isActive,\r\n activeColor: Colors.blue,\r\n activeTrackColor: Colors.grey.shade700,\r\n inactiveThumbColor: Colors.white12,\r\n inactiveTrackColor: Colors.grey.shade700,\r\n )),\r\n ),\r\n );\r\n }),\r\n ],\r\n)<\/pre>\n![\"Flutter](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Flutter-3.jpg\")
<\/p>\nGithub Repository: Flutter Freezed Example<\/h2>\n
Conclusion<\/h2>\n