Unlocking Data Persistence in Flutter: A Step-by-Step Guide
The Power of Local Storage
When it comes to building a performant app, one crucial factor is how it fetches and stores data locally. Persistent data storage has been a cornerstone of mobile app development since its early days. In this tutorial, we’ll explore how to create a simple Flutter app that accepts user input and stores it in a SQLite database, ensuring that the data remains even after the app is closed or the device is restarted.
Getting Started
To begin, create a new Flutter project and add the required dependencies, including the sqflite package for using the SQLite database. Open a simulator device or connect a real device to your system and start the app.
Designing the Database
For accessing and working with the database, create a singleton DatabaseHelper class. This class will ensure that we have a single instance of the database connection and global access to the database. In Dart, the factory keyword is used to create a constructor that returns only one instance.
Creating the Users Table
In the DatabaseHelper class, add an initDB() async function that connects to the SQLite database. The getDatabasesPath() method provides the default location of the database file, which you need to append with the name of the database – users_demo.db in this case. The openDatabase() function opens the database, accepting the path of the database file, a version number, and an optional onCreate callback that is executed when a database is created for the first time.
Modeling User Data
Next, create a model class to represent a user’s data in the database. The User model class defines properties that can be expected by the users table in the database, including name, age, and email properties. The class also has a constructor for creating a new user instance.
CRUD Operations
Now, let’s write the DB methods to perform CRUD operations. The DatabaseHelper class provides access to methods such as insert(), update(), query(), and delete() for performing CRUD operations on the database.
Building the User Interface
Create a form that includes fields for name, age, and email. When the Submit button is clicked, the data from these fields will be stored in the respective columns of the users table. Initialize the properties for accessing the DatabaseHelper class, User class, name, age, and email in the main state class of the widget.
Displaying a List of Users
Using the FutureBuilder widget, display the list of users by querying the users table. The FutureBuilder widget determines the current state of the future and allows you to show a different view while the async action is in progress. Pass the retrieveUsers() method as a future to the FutureBuilder widget and display a CircularProgress widget until the data loads.
Deleting Users
Using the Dismissible widget, allow users to delete records by swiping on the data. Call the deleteUser() method in the onDismissed option of the Dismissible widget to delete a user record.
The Importance of Data Persistence
Data persistence at the client app level is crucial. Without it, end-users have to depend on internet availability to store and access data. By using local storage, you can later sync up the data from the local database to your server when the user has a strong network connection.