Imagine this: you’re using an app in a remote area, far from any Wi-Fi connection. Suddenly, the app freezes or crashes, leaving you frustrated. Many apps depend on a constant internet connection, which can lead to poor user experiences. But what if your app could work seamlessly even without an internet connection?

In this blog, I’ll guide you step-by-step on how to build offline-first Flutter apps. Using a simple To-Do app as an example, we’ll explore how to store data locally and sync it with the server when connectivity is restored. By the end, you’ll be equipped to create apps that ensure a smooth experience—whether users are online or offline.

Common Problems Users Face Without Wi-Fi

Understanding the challenges users face with online-dependent apps helps highlight the importance of offline functionality. Here are some common issues:

• App Freezes or Crashes: Apps often fail to handle actions without the internet.
• Data Loss: Offline actions, such as filling forms or adding tasks, are lost when connectivity returns.
• Poor User Experience: Slow loading or incomplete data during low connectivity frustrates users.

These issues emphasize the need for apps that provide reliability even when users are offline.

Why Offline Functionality is Important

Adding offline functionality brings numerous benefits:

• Improved User Experience: Users can continue interacting with the app without interruptions.
• Increased Reliability: The app works independently of network conditions.
• Greater Flexibility: Users can engage with the app in remote areas or low-connectivity zones.

By building offline-first apps, you not only enhance user satisfaction but also make your app more versatile.

Key Strategies for Building Offline Flutter Apps

To implement offline functionality, you’ll need to leverage:

1. Local Storage

Flutter provides several solutions for local data storage:

• SQLite: Best for structured data and complex queries.
• Hive: A lightweight NoSQL database, ideal for performance-critical tasks.
• Shared Preferences: Suitable for small key-value pairs like user settings.

2. Connectivity Check

Use the connectivityplus package to detect online and offline states and manage syncing accordingly.

3. Data Syncing

Sync data with the server when a connection is available to ensure consistency between local and remote databases.

Build an Offline Flutter To-Do App

• Let’s create a simple To-Do app that:
• Stores tasks locally using SQLite.
• Detects connectivity status.
• Syncs tasks with a server when online.
• Displays real-time feedback on connectivity and syncing.

Step 1: Setting Up the Flutter Project

Create a new Flutter project:

flutter create offlinetodoapp

Navigate to your project folder:

cd offlinetodoapp

Add dependencies:

dependencies:

  flutter:

    sdk: flutter

  sqflite: ^2.0.0+4

  connectivity_plus: ^2.3.0

  fluttertoast: ^8.0.9

• Sqflite will allow us to interact with the SQLite database.
• connectivityplus will help check if the device is online or offline.
• fluttertoast will give feedback to users when tasks are added or synced.

Install dependencies:

flutter pub get

Step 2: Create the Database Helper

Create a database_helper.dart file to handle database operations:

import ’package:sqflite/sqflite.dart’;

import ’package:path/path.dart’;

class DatabaseHelper {

  static Database? _database;

  static Future<Database> getDatabase() async {

    if (database != null) return database!;

    database = await initDatabase();

    return _database!;

  }
 static Future<Database> _initDatabase() async {

    String path = join(await getDatabasesPath(), ’tasks.db’);

    return await openDatabase(

      path,

      version: 1,

      onCreate: (db, version) async {

        await db.execute(

          ’CREATE TABLE tasks(id INTEGER PRIMARY KEY, title TEXT)’,

        );

      },

    );

  }

  static Future<void> addTask(String title) async {

    final db = await getDatabase();

    await db.insert(’tasks’, {’title’: title});

  }

  static Future<List<Map<String, dynamic>>> getTasks() async {

    final db = await getDatabase();

    return await db.query(’tasks’);

  }

  static Future<void> deleteTask(int taskId) async {

    final db = await getDatabase();

    await db.delete(’tasks’, where: ’id = ?’, whereArgs: [taskId]);

  }

}

  // Create or open the database

  static Future<Database> _initDatabase() async {

    String path = join(await getDatabasesPath(), ’tasks.db’);

    return await openDatabase(

      path,

      version: 1,

      onCreate: (db, version) async {

        // Create the tasks table

        await db.execute(

          ’CREATE TABLE tasks(id INTEGER PRIMARY KEY, title TEXT)’,

        );

      },

    );

  }


  // Add a task to the database

  static Future<void> addTask(String title) async {

    final db = await getDatabase();

    await db.insert(’tasks’, {’title’: title});

  }

  // Get all tasks from the database

  static Future<List<Map<String, dynamic>>> getTasks() async {

    final db = await getDatabase();

    return await db.query(’tasks’);

  }

  // Delete a task from the database

  static Future<void> deleteTask(int taskId) async {

    final db = await getDatabase();

    await db.delete(’tasks’, where: ’id = ?’, whereArgs: [taskId]);

  }

}

Step 3: Set Up the Main UI

Set up the app’s main interface in main.dart:

import ’package:flutter/material.dart’;

import ’package:fluttertoast/fluttertoast.dart’;

import ’package:connectivityplus/connectivityplus.dart’;

import ’database/database_helper.dart’;

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: ToDoApp(),

    );

  }

}

class ToDoApp extends StatefulWidget {

  @override

  ToDoAppState createState() => ToDoAppState();

}

class _ToDoAppState extends State<ToDoApp> {

  final TextEditingController _taskController = TextEditingController();

  List<Map<String, dynamic>> _tasks = [];

 
  @override

  void initState() {

    super.initState();

    _loadTasks();

  }

  void _loadTasks() async {

    final tasks = await DatabaseHelper.getTasks();

    setState(() {

      _tasks = tasks;

    });

  }

  void _addTask() async {

    final title = _taskController.text;

    if (title.isNotEmpty) {

      await DatabaseHelper.addTask(title);

      setState(() {

        _tasks.add({’title’: title});

      });

      _taskController.clear();

      Fluttertoast.showToast(msg: ’Task added!’);

    }

  }


  void _syncTasks() async {

    final isConnected = await Connectivity().checkConnectivity() != ConnectivityResult.none;

    if (isConnected) {

      Fluttertoast.showToast(msg: ’Syncing tasks with server...’);

      // Simulate server sync here.

    } else {

      Fluttertoast.showToast(msg: ’No internet connection.’);

    }

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text(’Offline To-Do App’)),

      body: Padding(

        padding: const EdgeInsets.all(16.0),

        child: Column(

          children: [

            TextField(

              controller: _taskController,

              decoration: InputDecoration(labelText: ’Enter Task’),

            ),

            SizedBox(height: 10),

            ElevatedButton(

              onPressed: _addTask,

              child: Text(’Add Task’),

            ),

            ElevatedButton(

              onPressed: _syncTasks,

              child: Text(’Sync Tasks’),

            ),

            Expanded(

              child: ListView.builder(

                itemCount: _tasks.length,

                itemBuilder: (context, index) {

                  return ListTile(

                    title: Text(_tasks[index][’title’]),

                  );

                },

              ),

            ),

          ],

        ),

      ),

    );

  }
}

Conclusion

Building offline-capable apps ensures users enjoy a seamless experience regardless of their connectivity. By leveraging local storage and syncing strategies, Flutter empowers developers to create resilient and user-friendly apps.

Start implementing offline-first features today and make your app indispensable for users everywhere!