Make your apps available offline using Flutter and SQLite

Make your apps available offline using Flutter and SQLite

Make your apps available offline using Flutter and SQLite

Introduction

Today, we know that Internet-powered devices are being used at convenient places at convenient times. Users most significantly feel like using such a service-to check how it works, to see how technology produces wonders, to ease themselves from the pressure of going physically to the place to get their work done, to use it as a helping hand when no one else is around to assist them. The buying of products and services using smartphones, either through native or web applications is increasing. Despite all the other considerations, the fact remains that it is difficult to rely on mobile networks. It is very normal that there are high, medium, or very low coverage areas and sometimes no coverage at all. Besides, when cellular networks are barred, there are emergencies. To experience such high latencies and network failure rates, modern mobile apps must be well-equipped. With the battery constraints and several other variables that would put a mobile application to the test, networks can be crappy, broken, and low, most often needing offline support. Regardless of server availability, developer skills, or device support, offline app support is required in case of an organization that has a global audience and it is necessary to save and secure data.

Today lost internet connection means missing records, supply chain interruptions, missed orders, customer dissatisfaction and so much more, and to tell there are a lot more and this is the reason the need to keep the systems functioning offline as well as it does online as an efficient business method to be productive all time.

Let’s take an example of warehouses where the manager needs to track the entry and exit of trucks and commodities, in a warehouse management application and the network may be unavailable as warehouses are located in remote areas.

Weak access to the network is directly proportional to a bad user experience. This contributes to resentment and turning the users off. It would be a strategic advantage to build a mobile app on the better side of the range, one that can also be made available offline, requiring some initial investment in the production of the back-end and front-end and making use of device storage to enable offline access. Nevertheless, an offline app that works will save consumer devices with transactional and master data, sync data that has been processed for a prolonged time seamlessly, and easily manage conflicts about data synchronization.

In this blog, we will look at how we can have our flutter mobile application work offline in conjunction with SQLite to handle the offline data and sync it with Mysql online database when the network is available.

image1

Suppose we have to send some information from the application to our online DB, and the Internet is not available on the device at a certain time. At that point, we can store the data in local device SQLite DB and automatically send it to the server when the Internet is available in the future, instead of prompting the user with an error that the Internet is not available. We will see how we can achieve this here.

Network Make API call and store in online DB, also save in SQLite DB.(1)
No Network Store in SQLite DB with 0 and sync with the online DB when the network is back.(update its status(1) as it is synched)

Getting started with the Flutter Application

Create a new Flutter application, we will call it dbsync_app. 

We will add the plugins needed for the app

  • SQLite: SQLite plugin for Flutter, which will handle all DB transactions.
  • provider: state management plugin
  • path_provider: plugin to access the file system
  • Flutter_offline: plugin to handle offline/online connectivity in a clean way
  • http/dio: To make network calls

We need to follow the two main steps in our application as follows

  1. Setting up the Sqlite DB with required tables and operations which will handle the offline data.
  2. Offline builder has the logic to handle the operations depending on the status of network connectivity.

Let’s get started with the creation of a SQLite DB instance as shown in below DatabaseHelper class. We will use a simple table with 2 columns for saving the data in this blog.

Next, we would create the offline builder, which calls a function which fetches unsynced records from SQLite and make an API call to store in an online DB.

Syncitnow function, which will be called when the network is available.

Above function gets the unsynced records in SQLite DB with status 0 and makes API calls to store each record in the online DB.

The following HTTP calls are made to store the data into the database: 

  1. addName: makes an API call and stores the data in an online DB as well as a record in the SQLite DB.
  2. Sync: make API call to store unsynced records in online DB.

In the online call to DB, you will notice a call to saveName.php which is connecting to the MySQL database. We will see how we set that up in the next steps.

Sqlite DB queries to handle the DB operations as follows:

Setting up the MySQL Database

We have installed a local instance of the MySQL database and have it running.

image2

Next, we will create a PHP script to handle the insertion into the database, which will be called from our mobile app when the network is online. This script will connect with the online database and perform the operations in presence of the network.

Creating a web service using XAMPP:

We will create a folder in the root directory (in my case it is htdocs eg:C:\xampp\htdocs\SqliteSync\saveName.php).           

Now create a PHP file inside the folder named saveName.php with the following code.

Testing Script

Now it’s time to test the PHP script we created. In my case the URL is  

http://localhost/SqliteSync/saveName.php

We can test it from POSTMAN by calling the POST method with name and status to be saved in the database.

Now putting it all together, we can test the mobile application.

Test Application

Run your application. And then try saving the name when the internet is available. Next, turn off the internet and again try saving your name.

When the internet is available again the data will be automatically sent to MySQL.

Below is the screenshot of how the records are rendered on the app, the tick mark indicative of the record being synced with online DB and the cross indicative of an unsynced record.

  You can find the complete source code at    https://github.com/abhilashahyd/dbsync_app

Conclusion

Offline applications inherently make lives simpler, make jobs more productive and time-efficient. Apps must be offline-first so that when connectivity is weak, they do not slow down. We live in the ‘high-tech’ age, where smartphone users expect their mobile apps not only to have a decent level of performance and user experience but to be outstanding. Offline support is an aspect of these standards today and can no longer be overlooked. You will significantly boost the user experience of the mobile app and increase the efficiency of your team by adding support for most of the offline scenarios.

Leave a comment

Translate »
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.