Using the State Management Provider in the Todo List Flutter Application

Hello everyone, welcome back at porkaone. On this occasion we will learn flutter state management with the provider. The case study is the Todolist application. Are you curious? Let's follow the tutorial below.

Provider is a state management library that is very easy to learn. State management is a way to manage the state of each widget in the application. If you use stateful then all widgets will be updated, no matter whether they have changes or not. Meanwhile, if you use state management, only certain widgets will have their state updated. This way the application performance is much better.

On this occasion we will create a Todolist application. There is an add button at the bottom which then displays a popup dialog containing a form. If saved, it will be displayed in list form. Scroll to the bottom of the screen to see the results.

Read Another Article ✨

📰 1. How to Create a Select Dropdown with API in Flutter  read more

📰 2. How to Create a Select Input Dropdown in Flutter  read more

📰 3. How to Make a QR Code Scanner in Flutter ENV read more

📰 4. How to Display Youtube Videos in Flutter  read more

Using the State Management Provider in the Todo List Flutter Application

1. Create a new flutter project with the name you want. Use the latest version of flutter or flutter that supports null safety.

2. Open pubspec.yaml then add provider: in it. See example below.

Add Package

3. Create a new file in the lib folder with the name todo_model.dart. Follow the script below.

  import 'package:flutter/foundation.dart';

  class TodoModel extends ChangeNotifier {
    List<String> todos = []; // Create a todo list as a data source
  
    // Method for adding a new todo
    void addTodo(String todo) {
      todos.add(todo);
      notifyListeners(); //Notify the application that a change occurred
    }
  
    // Method to delete todo
    void removeTodo(String todo) {
      todos.remove(todo);
      notifyListeners(); //Notify the application that a change occurred
    }
  }

4. Open the lib/main.dart file then replace it with the script below.

 
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  import 'todo_model.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ChangeNotifierProvider(
        create: (context) => TodoModel(),
        child: MaterialApp(
          title: 'My Todo App',
          home: TodoListScreen(),
        ),
      );
    }
  }
  
  class TodoListScreen extends StatelessWidget {
    final TextEditingController _todoController = TextEditingController();
  
    @override
    Widget build(BuildContext context) {
      final todoModel = Provider.of<TodoModel>(context); // Access TodoModel model data from Provider
  
      return Scaffold(
        appBar: AppBar(
          title: Text('Todo List'), // Displays the title on the AppBar
        ),
        body: ListView.builder(
          itemCount: todoModel.todos.length, // Counts the number of items in the todos list
          itemBuilder: (context, index) {
            final todo = todoModel.todos[index]; // Retrieve todo by index
            return ListTile(
              title: Text(todo), // Displays the todo text as the ListTile title
              trailing: IconButton(
                icon: Icon(Icons.delete), // Displays a delete icon in the trailing part of the ListTile
                onPressed: () {
                  todoModel.removeTodo(todo); // Delete a todo when the delete key is pressed
                },
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            //show dialog popup
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Add Todo'), // Displays the title of the AlertDialog dialog
                  content: TextField(
                    controller: _todoController, // Connect TextEditingController with TextField
                    decoration: InputDecoration(labelText: 'Todo'), // Displays the "Todo" label on the TextField
                  ),
                  actions: [
                    TextButton(
                      child: Text('Cancel'), // Displays the text "Cancel" on the TextButton button
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    TextButton(
                      child: Text('Add'),
                      onPressed: () {
                        final newTodo = _todoController.text;
                        if (newTodo.isNotEmpty) {
                          todoModel.addTodo(newTodo);
                        }
                        _todoController.clear(); // Clears the input value in the TextEditingController
                        Navigator.of(context).pop(); // Closes the dialog after adding a todo
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: Icon(Icons.add), // Displays the add icon on the FloatingActionButton button
        ),
      );
    }
  }

We have done all the steps, it's time to test it. Please run the emulator and if successful, the display will look like the image below.

Easy, right? Now you can use the provider to improve application performance.

That's the tutorial on how to use the state management provider in the Flutter todo list application. Hopefully this short tutorial is useful. If you have any questions, please ask directly in the comments column below. That's all and receive a salary.