models in flutter

Create a models in flutter apps in 2025-latest

by

In this blog, we focus on Create a models in flutter apps. We cover a models topics, including Flutter, Dart. Here in this tutorial is designed to give you step-by-step guidance, so you not only learn the theory but also apply it in real projects of the Models in flutter.

models in flutter

Introduction models in flutter:

In modern app development, managing and organizing data efficiently is essential. A model class in Flutter helps us structure the data we receive from APIs or local sources. It acts as a blueprint, defining the properties and behavior of an object in our application.

For example, in a user management system, a User model class can represent each user with properties like userId, name, and address. By using model classes, we can:

  • Easily parse JSON data received from APIs into Dart objects.
  • Convert objects back to JSON when sending data to servers.
  • Maintain a clean and organized code structure for better readability and maintainability.

In this tutorial, we will create a simple User model class, implement fromJson and toJson methods, and prepare it for API integration. This forms the foundation for working with dynamic data in Flutter applications.

Creating a Models in Flutter :

  • Create a file inside the lib folder named model.dart.
  • Create a class named User. Inside this class, define properties that match the data types from our API model
    • userId of type int
    • name of type String
    • address of type String
  • Create a constructor for this class. Use the const keyword and mark all properties as required
class User {
  final int userId;
  final String name;
  final String address;

  const User({
    required this.userId,
    required this.name,
    required this.address,
  });
}
  • Create a fromJson method to convert JSON data into a User object. This will be a factory constructor that takes a Map<String, dynamic> as a parameter:
factory User.fromJson(Map<String, dynamic> json) {
  return User(
    userId: json['userId'],
    name: json['name'],
    address: json['address'],
  );
}
  • This method creates an instance of the User class from the JSON data.
  • Make sure the keys inside the brackets match the property names of the class.
  1. Create a toJson method to convert a User object back into JSON format. This method returns a Map<String, dynamic>
Map<String, dynamic> toJson() {
  return {
    'userId': userId,
    'name': name,
    'address': address,
  };
}

This method does the opposite of fromJson, converting the object into key-value pairs.

Step to Use Your Model in the UI:

class User {
  final int userId;
  final String name;
  final String address;

  const User({
    required this.userId,
    required this.name,
    required this.address,
  });

  // Convert JSON to User object
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      userId: json['userId'],
      name: json['name'],
      address: json['address'],
    );
  }

  // Convert User object to JSON
  Map<String, dynamic> toJson() {
    return {
      'userId': userId,
      'name': name,
      'address': address,
    };
  }
}

Example JSON Data : 

final jsonData = [
  {"userId": 1, "name": "John Doe", "address": "123 Street, City"},
  {"userId": 2, "name": "Jane Smith", "address": "456 Avenue, City"},
];

Converting JSON to List of Users

List<User> users = jsonData.map((json) => User.fromJson(json)).toList();

Using the Users in Flutter UI

import 'package:flutter/material.dart';
import 'user.dart'; // Import the User model

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Sample JSON data
    final jsonData = [
      {"userId": 1, "name": "John Doe", "address": "123 Street, City"},
      {"userId": 2, "name": "Jane Smith", "address": "456 Avenue, City"},
    ];

    // Convert JSON to User objects
    List<User> users = jsonData.map((json) => User.fromJson(json)).toList();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('User List')),
        body: ListView.builder(
          itemCount: users.length,
          itemBuilder: (context, index) {
            final user = users[index];
            return ListTile(
              title: Text(user.name),
              subtitle: Text(user.address),
              leading: CircleAvatar(child: Text(user.userId.toString())),
            );
          },
        ),
      ),
    );
  }
}

Read officials Documentation : Click Here

Watch Tutorials :

Conclusion:

Model classes in Flutter are a fundamental part of app development. They help us structure and organize data in a clean and maintainable way. By creating models, we can easily parse JSON data from APIs into Dart objects and convert objects back to JSON for sending data to servers.
Using models improves code readability, reduces errors, and makes state management and data handling much simpler in your Flutter applications.
Once you understand models, integrating APIs, building complex apps, and managing dynamic data becomes much more straightforward. They form the foundation for any robust Flutter project.

Leave a Comment