Search⌘ K
AI Features
Home
Courses
The Complete Guide to Flutter

Solution: State Management

Explore how to manage app state effectively in Flutter by implementing and using the flutter_riverpod package. Learn to update, add, and delete tasks while ensuring UI reflects these changes in real-time. This lesson guides you through practical examples to help you build responsive and scalable Flutter apps.

We'll cover the following...

Solutions

Follow the steps below and compare your answers to each challenge you attempted in the previous lesson.

Challenge 1: Add Packages

We go to line 16 of the pubspec.yaml file and replace # TODO-1: Add flutter_riverpod package with the line below:

YAML
  flutter_riverpod: ^1.0.0

Challenge 2: Complete the TasksChangeNotifier class

Dart
import 'dart:collection';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../models/task.dart';
final tasksProvider = ChangeNotifierProvider<TasksChangeNotifier>((ref) => TasksChangeNotifier());
class TasksChangeNotifier extends ChangeNotifier {
  final List<Task> _tasks = [];
  UnmodifiableListView<Task> get tasks {
    return UnmodifiableListView(_tasks);
  }
  int get tasksLength => _tasks.length;
  void addTask(String task) {
    _tasks.add(Task(name: task));
    notifyListeners();
  }
  void deleteTask(index) {
    _tasks.removeAt(index);
    notifyListeners();
  }
  void toggleDone(index) {
    _tasks[index].isDone = !_tasks[index].isDone;
    notifyListeners();
  }
}

  1. We first import the flutter_riverpod package (line 4).

  2. On line 7, we declare a tasksProvider object, which creates and exposes an instance of TasksChangeNotifier to be accessed elsewhere within the application.

  3. Line 19 allows us to add a single task to the list of tasks given its string name. Note that after adding a new task to the list, we call the notifyListeners() method (line 20), which notifies the users of the TasksChangeNotifier object that the object changes.

  4. On line 24, we delete the task occupying the provided index and then ...