January 02, 2024

Flutter Models: A Guide to Data Management

Efficient data management is important for smooth performance and good user experience when building mobile applications with flutter. Understand model classes in flutter for application's data management.

Flutter Models

A flutter model is like a representation of data that maps to objects in an application. Flutter models help in structure and data management in order to work with complex data structure and make is it easier to work with external resources like API or local databases. In this post we will understand how to create a flutter model class and how to use for better data management.

 

How to Create & Use a Model Class in Flutter (With JSON Examples)

In flutter a model is a class that defines the structure of data an application is supposed to work with. Models allow representation of complex data objects like users, customers, products or posts as dart objects. A basic flutter model typically has:

  • Fields to store and represent data.
  • Constructor to create instances of the model.
  • Factory methods to convert data from JSON or other format to a model or a model to JSON or other format.

Let's start by creating a basic user model to represent a user's data. We will define fields for our user model, a constructor method and factory methods for conversion.

class User {
  // Fields
  final int id;
  final String name;
  final String email;

  // Constructor
  User({
    required this.id, 
    required this.name, 
    required this.email
  });

  // Factory method to create a User object from JSON
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  // Method to convert User object to JSON
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }

  // Function to parse a list of Users from JSON
  static List<User> fromJsonList(List<dynamic> jsonList) {
    return jsonList.map((json) => User.fromJson(json)).toList();
  }
}

Our user model has now the following:

  • Fields: It has three fields, id, name and email.
  • Constructor: It has a constructor to initialize model fields.
  • fromJson: The factory method to convert JSON format to user model.
  • toJson: The factory method that converts user object to a map format which is useful for sending data to APIs.
  • fromJsonList: The factory method that converts list of JSON format and converts it into a list of user objects.

Now that we have created our user model and we have required factory methods to use our model we can use it in application where needed like this:

// A static a JSON response from an API
Map<String, dynamic> userJson = {
  'id': 1,
  'name': 'John Doe',
  'email': '[email protected]',
};

// Create a User object from JSON
User user = User.fromJson(userJson);

// Convert User object back to JSON
Map<String, dynamic> userJson = user.toJson();

While building a flutter application it is sometimes needed to work with list of models. For example receiving a list of users from API and convert it into a list of user model objects. For this case we have our fromJsonList() factory method in our user model. It can be utilized like this:

// A JSON response with multiple users
List<dynamic> usersJson = [
  {'id': 1, 'name': 'John Doe', 'email': '[email protected]'},
  {'id': 2, 'name': 'Jane Smith', 'email': '[email protected]'},
];

// Parse JSON list into a list of User objects
List<User> users = User.fromJsonList(usersJson);

The following code snippet will convert list of user objects i.e. user models to list of JSON.

// Create some User objects
List<User> users = [
  User(id: 1, name: 'John Doe', email: '[email protected]'),
  User(id: 2, name: 'Jane Smith', email: '[email protected]'),
];

// Convert List<User> to List<Map<String, dynamic>>
List<Map<String, dynamic>> jsonList = users.map((user) => user.toJson()).toList();

// Convert to JSON string
String jsonString = jsonEncode(jsonList);

Flutter models provide an elegant way to structure and managing data in application. Creating custom flutter model allows to handle data efficiently and maintain a clear data logic. We explained with example code snippets how to create flutter model class and how to use it to handle data in flutter application and ensure the application is robust and scalable.

Home