Using the State Management Provider in the Todo List Flutter Application

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.

Post a Comment