Overview

This guide explores how to integrate SQLite in FlutterFlow for managing data both online and offline, ensuring seamless synchronization with Firebase when connected. By storing data locally, apps can function without internet access, offering faster performance and instant availability. The setup includes configuring SQLite in FlutterFlow, handling data storage, and automatically syncing unsaved data once online. This approach enhances user experience, providing reliable data access and smooth app performance at all times.

Table of Contents:

• Introduction to SQLite
• Why Store Data Locally?
• Integrating SQLite on FlutterFlow Data is stored locally and on Firebase.
• Inserting Data Online and Offline Offline Synchronization with Firebase .
• Conclusion

Introduction to SQLite

SQLite is a simple, serverless database engine to implement local storage in mobile apps. Cloud databases lack this feature as SQLite relies on the device to access data quickly, inherently reducing the need for internet queries.

💡 Did You Know: 🚀 Popular messaging apps like WhatsApp rely on SQLite to locally store chat history. This enables instant access to messages, even without an internet connection.

Why Store Data Locally?

Not all users have an internet connection that is reliable. Local storage ensures:

✅ Instant data access and faster performance

✅ Offline functionality, allow users use the app without internet.

✅ Fast UX, no matter if the network is slow or unreliable.

⚠ Please Note: SQLite is unsupported in FlutterFlow for web-based apps now. Please test it on a real device instead of using FlutterFlow's Test and Run mode.

Source : FlutterFlow Documentation

Integrating SQLite on FlutterFlow Data is stored locally and on Firebase.

Step 1: For example, we will create a small To-Do App that allows users to:

• View a list of tasks.

• Add new tasks to the list.

• Store tasks locally and sync them with Firebase when online.

Step 2: Create an SQLite database

To-Do App that stores tasks locally and, when online, syncs them with Firebase. I am using SQLite Studio, however, you can use any tool of your choice.

• Open SQLite and navigate to the menu.
• Select "Add a Database", enter a name, and specify the path.
• In the menu, find "Create Table", then create a new table.
• Add the necessary columns under the newly created table.
• Next Step: Load this SQLite database (. db file) in the SQLite integration settings in

Step 3: Set up SQLite integration

• FlutterFlow — Navigate to Settings
• Scroll down to the Integrations section, find SQLite, and activate it
• Choose a Database Name.
• Add the database file, which you will find at the specified SQLite database path.

Step 4: Add Read and Update queries

You need to Write read and update queries to extract and modify data to your SQLite database. Refer to the official FlutterFlow documentation for detailed instructions.

Inserting Data Online and Offline Synchronization with Firebase .

In this section, we will manage data insertion based on the internet connection status.

Step 1: Verify Internet Connection

Before inserting data, the app should check if the user is online or offline for that we can write the custom action to check if we are connected with internet or not.

💡 Offline Mode: Save the task to SQLite with isSynced = 0.

💡 Online Mode: Store the task in both Firebase and SQLite with isSynced = 1.

Step 2: Insert Data Based on Internet Status

• Offline Mode: The task is only saved to SQLite with isSynced = 0.

• Online Mode:
  • The task is saved in Firebase (cloud database).
  • The same task is also stored in SQLite with isSynced = 1.

Step 3: Display the List of Tasks

• Retrieve tasks from SQLite and display them in a ListView.
• This ensures users can always see their tasks, even when offline.

Offline Synchronization with Firebase

This section explains how to sync offline tasks with Firebase once the user is online.

Step 1: Detect Online Status

On app launch, determine if the user is online or offline.

Step 2: Find Unsynced Data

Retrieve tasks that were stored offline using the query:

This will return all tasks that haven't been synced with Firebase yet.

Step 3: Sync Data to Firebase

• Iterate through each unsynced task and add it to Firebase.

Step 4: Update SQLite Sync Status

• Once a task is successfully synced to Firebase, update its isSynced value in SQLite:

This ensures that all tasks are correctly marked as synced in the local database.

Conclusion

Using SQLite in FlutterFlow allows your app to function seamlessly even without an internet connection. By implementing offline storage and synchronization, users can:

🚀 Add tasks while offline and see them instantly.

🔄 Sync tasks with Firebase when they reconnect.

📱 Experience a smooth and uninterrupted app experience.

With this setup, your FlutterFlow app ensures data persistence, a fast UI, and offline usability, making it more reliable and user-friendly. 🚀

‍