Creating Models and ChangeNotifiers in Flutter

3.3.2 Creating Models and ChangeNotifiers

In this section, we delve into the process of creating models and ChangeNotifiers in Flutter, focusing on their role within the Provider package for state management. We will explore how to define a Todo model, implement a TodoProvider using ChangeNotifier, and adhere to best practices for efficient state management. This knowledge is crucial for building robust and scalable Flutter applications.

Defining the Todo Model

The first step in managing state with Provider is to define the data model. In our Todo app example, the Todo model represents individual tasks. This model encapsulates the properties and behaviors of a task, such as its title, description, and completion status.

Creating the Todo Class

The Todo class is a simple Dart class that holds the properties of a task. Below is the implementation of the Todo class:

class Todo {
  String id;
  String title;
  String description;
  bool isCompleted;

  Todo({
    required this.id,
    required this.title,
    required this.description,
    this.isCompleted = false,
  });
}

Explanation:

• Properties:

  • id: A unique identifier for each task, typically a string.
  • title: The name or title of the task.
  • description: A detailed description of the task.
  • isCompleted: A boolean indicating whether the task is completed, defaulting to false.

• Constructor:

  • The constructor initializes the properties, with isCompleted defaulting to false.

This class serves as the blueprint for creating task instances in the app.

Implementing the TodoProvider

The TodoProvider class is responsible for managing the state of the list of todos. It extends ChangeNotifier, which is a part of the Flutter framework that allows widgets to listen to changes in state and rebuild accordingly.

Creating the TodoProvider Class

Below is the implementation of the TodoProvider class:

import 'package:flutter/foundation.dart';

class TodoProvider extends ChangeNotifier {
  List<Todo> _todos = [];

  List<Todo> get todos => _todos;

  void addTodo(Todo todo) {
    _todos.add(todo);
    notifyListeners();
  }

  void updateTodo(String id, String title, String description) {
    final index = _todos.indexWhere((todo) => todo.id == id);
    if (index != -1) {
      _todos[index].title = title;
      _todos[index].description = description;
      notifyListeners();
    }
  }

  void deleteTodo(String id) {
    _todos.removeWhere((todo) => todo.id == id);
    notifyListeners();
  }

  void toggleCompletion(String id) {
    final index = _todos.indexWhere((todo) => todo.id == id);
    if (index != -1) {
      _todos[index].isCompleted = !_todos[index].isCompleted;
      notifyListeners();
    }
  }
}

Explanation:

• State Management:

  • _todos: A private list that holds all the Todo objects.
  • todos: A getter that provides read-only access to the _todos list.

• Methods:

  • addTodo: Adds a new Todo to the list and calls notifyListeners() to update the UI.
  • updateTodo: Updates the title and description of an existing Todo.
  • deleteTodo: Removes a Todo from the list by its id.
  • toggleCompletion: Toggles the isCompleted status of a Todo.

• ChangeNotifier:

  • notifyListeners(): This method is called whenever there is a change in the state that should be reflected in the UI.

Thread Safety and Concurrency

In Flutter, UI operations are typically single-threaded, meaning they run on the main thread. However, when dealing with data that might be accessed or modified from multiple threads, such as when performing network requests or heavy computations, thread safety becomes a concern.

For our TodoProvider, since the operations are simple and run on the main thread, explicit thread safety mechanisms are not necessary. However, if you anticipate concurrent modifications, consider using synchronization mechanisms like Mutex or Dart’s synchronized package to ensure thread safety.

Best Practices

To ensure efficient and maintainable state management, consider the following best practices:

• Encapsulation: Keep the state private and expose only necessary data through getters.
• Single Responsibility: Ensure that the provider focuses solely on state management logic, avoiding UI-related code.
• Efficiency: Use notifyListeners() judiciously to avoid unnecessary UI rebuilds.
• Modularity: Keep your models and providers modular to facilitate testing and maintenance.

Practical Example

Let’s integrate the TodoProvider into a simple Flutter app to see it in action. Below is a basic setup that demonstrates how to use the provider in a Flutter application.

Setting Up the Provider

First, add the provider package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

Then, wrap your app with a ChangeNotifierProvider to provide the TodoProvider to the widget tree:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TodoProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoListScreen(),
    );
  }
}

Building the Todo List Screen

Create a TodoListScreen widget to display the list of todos:

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final todoProvider = Provider.of<TodoProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: ListView.builder(
        itemCount: todoProvider.todos.length,
        itemBuilder: (context, index) {
          final todo = todoProvider.todos[index];
          return ListTile(
            title: Text(todo.title),
            subtitle: Text(todo.description),
            trailing: Checkbox(
              value: todo.isCompleted,
              onChanged: (value) {
                todoProvider.toggleCompletion(todo.id);
              },
            ),
            onLongPress: () {
              todoProvider.deleteTodo(todo.id);
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add a new Todo
          todoProvider.addTodo(Todo(
            id: DateTime.now().toString(),
            title: 'New Todo',
            description: 'Description',
          ));
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Explanation:

• Provider Access: Use Provider.of<TodoProvider>(context) to access the provider instance.
• ListView.builder: Dynamically builds the list of todos using the provider’s data.
• Checkbox and Long Press: Allows toggling completion and deleting todos, respectively.

Conclusion

By defining a Todo model and implementing a TodoProvider with ChangeNotifier, we have created a robust foundation for managing state in a Flutter application. This approach not only simplifies state management but also enhances the scalability and maintainability of the app.

Additional Resources

• Flutter Provider Documentation
• Official Flutter Documentation
• Dart Language Tour

By following these guidelines and utilizing the Provider package, you can effectively manage state in your Flutter applications, ensuring a smooth and responsive user experience.

Quiz Time!