Build a todo app in flutter with persistent local storage & GetX State Management.
If you are fairly new to flutter and are trying to learn the concepts of state management and persistent local storage then i will have to say you have come to just the right place. In this tutorial we will build a Todo App (Task manager) that will allow us to Create, retreive, Update and Delete tasks (CRUD). We will be able to reflect the state of changing data using GetX.
By the end of this tutorial you will be able to build a todo app that will persist all the data and smoothly reflect changes using transitions, animations and best practices. You will be able to follow along as you build.You can also checkout the full source code to see the full implementation.
Below is the quick GIF preview of what you will be building. If this sound interesting lets go !
Prerequisites:
- Dart & Flutter Installed.
- Basic knowledge on state management.
- IDE( VS Code ,Android Studio or IntelliJIDEA)
- Emulator or physical testing device
Flow & Architecture(MVC):
App flow & architecture below gives a visual summary of how the app will be setup and work. The Project follows recommended clean code architecture with MVC pattern. The Flow diagram gives the top level view of how different components are involved in making the app work starting from very beginning.
The MVC architecture diagram shows clear separation of concern allowing each component to play their role in their separate modules. The OOP(object oriented programming) nature of programming allows access to classes and methods wherever needed. This setup allows for anyone to easily understand the code and scale/manage if needed.
Setting up the Project:
- Start a new flutter project for android/ios.
- Open up the project in your IDE.
- Add all the needed dependencies from pub.dev. For this Project we need:
- get(GetX): State Management Library
- sqflite: SQLite support for Flutter
- path_provider: to access device paths for file storage
- lottie: To add animation effects
- Run this command in terminal to add all dependencies:
flutter pub add get sqflite path_provider lottie - Inside of lib directory create following new directories
model,view,controller&db
- Inside of the
modelwe will define a Model Class for Todo, similarly incontrollerwe will define the logic for CRUD operations.dbwill house the database related operation such as creating connection, SQL queries for the CRUD operations etc. and finally inside of view will be all the UI components and UI for all the screens in the app. - We can start by wiring up our UI. So we will go ahead by creating the pages we need . Check out the Lo-Fi Mockup below with different pages
Lo-fi mockup:
Starting UI Build:
- Inside of the view directory , create following dart files
- ‘todo_home_page.dart’, ‘add_todo_page.dart’ & ‘edit_todo.dart’
Writing in Progress !!
Source Code:
This article is actively in production. Until then, checkout the source code if you would like to see full implementation.
