In today's mobile-centric world, ensuring users will have a good experience using your apps in regions with a mobile network or internet connection is crucial. Offline-first architecture plays a pivotal role in this case, addressing the critical need to enable users to use your application even in areas with a poor connection.

Strapi is an open-source headless CMS that enables developers to manage content easily and integrate it with various front-end frameworks, such as Flutter.

In this tutorial, you'll learn how to build an offline-first Flutter application with Strapi.

Overview of Offline-First Mobile App Development

Offline-first mobile app development is a development paradigm that gives more attention to the building and designing mobile apps that can function even without the internet. Contrary to the remote data source-only approach, offline-first applications use local storage in an in-memory data source to perform operations against this local data source. As a result, the app will synchronize the data of the local data source and the remote data source as soon as the connection to the internet is restored. This method ensures that data consistency is maintained throughout the app, which means user experience will be smooth from offline to online.

Prerequisites

To follow along with this tutorial, ensure you have met the following requirements.

• Node.js v18 or later.
• A code editor on your computer.
• Node.js package manager v6 and above.
• Python
• Set up your Flutter environment if you haven't already.
• Basic understanding of Flutter and Strapi.

To get the code for this tutorial, visit my GitHub repository and clone it.

Benefits of Offline-First Apps with Flutter and Strapi

Offline-first apps offer several benefits to both users and developers:

• Improved user experience: Offline-first applications can show data even when there is no or poor network connection, thus guaranteeing a continuous experience.
• Increased reliability: With their resilience to network outages or server downtime, the offline-first apps provide peace of mind and a more reliable user experience through local data storage.
• Faster load times: These apps, with their ability to display content faster and with lower latency, achieved by caching data locally, enhance efficiency and productivity.
• Reduced data usage: Offline-first applications minimize the need to always transfer data between the application and the host server, reducing users' data costs, especially in places where mobile data is limited or quite costly.

For example, a field service app is used by technicians in remote areas. A technician can access repair manuals and customer information stored locally and record repair details without an internet connection when they visit rural areas with poor connectivity.

Setting up a New Flutter Project

Once you have met the prerequisites above needed for this tutorial, create a new Flutter project by running the command below:

flutter create my_offline_first_app

The above command will generate a new Flutter project in a folder named my_offline_first_app.

Installing and Configuring Strapi

Strapi is headless CMS and allows you to easily create the backend of your applications with less overhead. To install Strapi, run the command below:

npx create-strapi-app@latest offline_first_app --quickstart

The above command will scaffold a new Strapi application in a folder named offline_first_app. Once installed, the application will run on port 1337 and the admin panel will be opened on your browser.

Next, create your first admin user by filling out the forms. After that, you'll be redirected to your Strapi admin page.

Creating Collections Types

Now from your Content-Type Builder, click on + create new collection type and create a todo collection.

Then add the following fields in your todos collection:

• title: Short Text field
• description: Short Text field
• isCompleted: Boolean field

Add Entries to todos Collection

Next, go to the Content Builder page and add some todos data or entries. Do not forget to publish them.

Enable Public Access to Collection Endpoint

Finally, navigate to Settings > Roles > Public and grant public access to the todos endpoints, and click the "Save" button at the top-right corner.

Offline Data Synchronization in Flutter and Strapi

The major challenge encountered by developers in developing offline-first applications is maintaining data consistency between the local database and remote server. Offline data synchronization is important for offline-first apps because it ensures that all devices and servers have the most up-to-date information, maintaining data integrity across the entire system.

Implementing a Local Database in Flutter

To store data locally, you'll use a local database solution like SQLite or a NoSQL database like Hive. For this tutorial, we'll use the SQLite package for SQLite support and the http package to make API requests to Strapi. To do that, add the sqflite dependency to your pubspec.yaml file:

1
2
3
4
5
dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.3+1
  http: ^1.2.1

Next, create a new folder named features in the lib folder. Create a file inside the features folder and call it database.dart. Inside it define a class to manage the local database:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import 'package:path/path.dart';
import 'package:sqflite_common_ffi/sqflite_ffi.dart';

class DatabaseHelper {
  static const _databaseName = 'my_offline_first_app1.db';
  static const _databaseVersion = 1;

  static Database? _database;

  Future<Database> get database async {
    if (_database != null) return _database!;

    _database = await _initDatabase();
    return _database!;
  }

  Future<Database> _initDatabase() async {
    final databasePath = await getDatabasesPath();
    final path = join(databasePath, _databaseName);

    return await openDatabase(
      path,
      version: _databaseVersion,
      onCreate: _createTables,
    );
  }

  Future<void> _createTables(Database db, int version) async {
    await db.execute('''
      CREATE TABLE todos (
           id INTEGER PRIMARY KEY,
        title TEXT,
        description TEXT,
        isCompleted INTEGER,
        createdAt TEXT,
        updatedAt TEXT,
        publishedAt TEXT,
        isNew INTEGER,
        isUpdated INTEGER
      );
    ''');
  }
}

The DatabaseHelper class creates an instance of the SQLite database and creates three methods _initDatabase() to initialize the database, _createTables for creating the todos table, and the get to access the database instance across the application. Your local database schema has to be the same as your Strapi collection fields to avoid data inconsistencies and conflict.

Fetching Data from Strapi and Caching it Locally

Create a new folder called service in the lib folder. Inside it, create a new file called strapi_service.dart. The new file should have a StrapiService service class that communicates with the Strapi API, as shown in the code snippet below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:offline_first_app/features/core/database.dart';
import 'package:sqflite/sqflite.dart';

class StrapiService {
  static const String baseUrl = 'http://localhost:1337';
  final DatabaseHelper databaseHelper = DatabaseHelper();

    Future<void> fetchAndCacheTodos() async {
    try {
      final response = await http
          .get(Uri.parse('$baseUrl/api/todos'))
          .timeout(const Duration(seconds: 5));
      if (response.statusCode == 200) {
        final responseData = json.decode(response.body);
        final todos = responseData['data'];

        final db = await databaseHelper.database;
        await db.transaction((txn) async {
          for (var todo in todos) {
            await txn.insert(
              'todos',
              {
                "id": todo['id'],
                "title": todo['attributes']['title'],
                "description": todo['attributes']['description'],
                "isCompleted": todo['attributes']['isCompleted'] ? 1 : 0,
                "createdAt": todo['attributes']['createdAt'],
                "updatedAt": todo['attributes']['updatedAt'],
                "isNew": 0,
                "isUpdated": 0,
              },
              conflictAlgorithm: ConflictAlgorithm.replace,
            );
          }
        });
      }
    } catch (e) {
      print('Error fetching todos: $e');
    } finally {
      await _updateTodosStream();
    }
  }
}

In the above code snippet, create a fetchAndCacheUsers method to fetch the todos data from the Strapi backend. It then opens a database transaction, clears the existing todos data in the local database, and inserts the newly fetched todos into the local database.

Notice in the insert function, conditional rendering is used in the isCompleted field, this is because SQLite database does not accept boolean values, rather it represents them as 1 for true and 0 for false.

Handling CRUD Operations in Offline Mode in Flutter

Let's create CRUD (create, read, update, delete) operations in the local database; this way, even if there is no internet, users can still create, update, and delete todos. To do that, update the StrapiService class in the service/strapi_service.dart file to add the methods below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
class StrapiService {
  //... other class varriables
  
  final _todosStreamController =
      StreamController<List<Map<String, dynamic>>>.broadcast();
  Stream<List<Map<String, dynamic>>> get todosStream =>
      _todosStreamController.stream;
      
 Future<List<Map<String, dynamic>>> getLocalTodos() async {
    try {
      final db = await databaseHelper.database;
      final todos = await db.query('todos');
      return todos;
    } catch (e) {
      throw Exception(e);
    }
  }

  Future<void> createLocalTodo(Map<String, dynamic> todo) async {
    final db = await databaseHelper.database;
    final id = await db.insert(
      'todos',
      todo,
      conflictAlgorithm: ConflictAlgorithm.replace,
    );
    todo['id'] = id;
    await uploadTodoToBackend(todo);
    await _updateTodosStream();
  }

   Future<void> updateLocalTodo(Map<String, dynamic> todo) async {
    final db = await databaseHelper.database;
    final updateData = {
      'title': todo['title'],
      'description': todo['description'],
      'isCompleted':
          todo['isCompleted'] == 1 || todo['isCompleted'] == true ? 1 : 0,
      'updatedAt': DateTime.now().toIso8601String(),
    };
    await db.update(
      'todos',
      updateData,
      where: 'id = ?',
      whereArgs: [todo['id']],
    );
    await updateTodoOnBackend({...todo, ...updateData});
    await _updateTodosStream();
  }
  
  Future<void> deleteLocalTodo(int id) async {
    final db = await databaseHelper.database;
    await db.delete(
      'todos',
      where: 'id = ?',
      whereArgs: [id],
    );
    await _updateTodosStream();
  }
  
    Future<void> _updateTodosStream() async {
    final todos = await getLocalTodos();
    _todosStreamController.add(todos);
  }
 }

The createLocalTodo method attempts to update the Strapi backend when a new todo is created, ensuring synchronization between the local and remote databases. If there's no network connection, it won't successfully upload to the remote database. However, when the user's internet connection is restored, it will use the methods we'll implement later in this tutorial to sync the data. The updateLocalTodo and deleteLocalTodo methods modify records in the local database and update the remote database with these changes. After each operation, the _updateTodosStream() method is named. This method emits the updated list of entries of the todos through a stream, which the UI listens to. As a result, the UI is automatically updated whenever an entry is created, updated, or deleted.

Next, update the StrapiService to add the uploadTodoToBackend method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 //...
  Future<void> uploadTodoToBackend(Map<String, dynamic> todo,
      {bool isSync = false}) async {
      try {
        final response = await http
            .post(
              Uri.parse('$baseUrl/api/todos'),
              headers: {'Content-Type': 'application/json'},
              body: json.encode({
                "data": {
                  "title": todo['title'],
                  "description": todo['description'],
                  "isCompleted": todo['isCompleted'] == 1,
                }
              }),
            )
            .timeout(const Duration(seconds: 5));

        if (response.statusCode == 200 || response.statusCode == 201) {
          final responseData = json.decode(response.body);
          final backendId = responseData['data']['id'];

          final db = await databaseHelper.database;
          await db.update(
            'todos',
            {
              'id': backendId,
              'isNew': 0,
              'updatedAt': DateTime.now().toIso8601String(),
            },
            where: 'id = ?',
            whereArgs: [todo['id']],
          );
          todo['id'] = backendId;
        } else {
          throw Exception('Failed to upload todo');
        }
      } catch (e) {
        print('Error uploading todo: $e');
        throw e;
      }
    }
  
  Future<void> updateTodoOnBackend(Map<String, dynamic> todo) async {
    try {
      final response = await http
          .put(
            Uri.parse('$baseUrl/api/todos/${todo['id']}'),
            headers: {'Content-Type': 'application/json'},
            body: json.encode({
              "data": {
                "title": todo['title'],
                "description": todo['description'],
                "isCompleted": todo['isCompleted'] == 1,
              }
            }),
          )
          .timeout(const Duration(seconds: 5));

      if (response.statusCode == 200) {
        final db = await databaseHelper.database;
        await db.update('todos', {'isUpdated': 0},
            where: 'id = ?', whereArgs: [todo['id']]);
      } else {
        throw Exception('Failed to update todo on backend');
      }
    } catch (e) {
      print('Error updating todo on backend: $e');
      throw e;
    }
  }

The above code defines two functions for interacting with the backend database: uploadTodoToBackend and updateTodoOnBackend. Both functions start by initializing the ConnectivityService() and use it to check for internet connectivity before attempting to update the remote database.

uploadTodoToBackend plays a crucial role in the system, as it is specifically designed to create new todos on the backend. It is invoked when a new todo is created locally and needs to be synced with the remote database, ensuring a seamless data flow.

updateTodoOnBackend is specifically for updating existing todos. It is named when a todo is modified locally, and the changes must be reflected on the backend.

Synchronizing Local Data with the Strapi Backend

For data consistency, the local data must be synchronized with the Strapi backend server when the app is back online. These steps consist of updating the Strapi server with the data in the local database. The flowchart below further explains how the data synchronization works.

Update your main.dart file to configure the background fetch with the code snippet below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import 'package:background_fetch/background_fetch.dart';
import 'package:flutter/material.dart';
import 'package:offline_first_app/features/core/database.dart';
import 'package:offline_first_app/features/screens/home_screen.dart';
import 'package:offline_first_app/features/services/strapi_service.dart';

@pragma('vm:entry-point')
void backgroundFetchHeadlessTask(HeadlessTask task) async {
  String taskId = task.taskId;
  bool isTimeout = task.timeout;
  if (isTimeout) {
    BackgroundFetch.finish(taskId);
    return;
  }
  final strapiService = StrapiService();
  await strapiService.syncLocalTodosWithBackend();
  BackgroundFetch.finish(taskId);
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final DatabaseHelper databasehleper = DatabaseHelper();
  await databasehleper.database;
  runApp(const MyApp());
  BackgroundFetch.registerHeadlessTask(backgroundFetchHeadlessTask);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Offline First App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

Add a new method to the StrapiService class to handle the background fetch:

1
2
3
4
5
6
7
8
9
10
11
12
13
 Future<void> syncLocalTodosWithBackend() async {
    final localTodos = await getLocalTodos();
    // print(localTodos);
    for (var todo in localTodos) {
      if (todo['isNew'] == 1) {
        await uploadTodoToBackend(todo, isSync: true);
      } else if (todo['isUpdated'] == 1) {
        await updateTodoOnBackend(todo);
      }
    }

    await fetchAndCacheTodos();
  }

The above code will synchronize the todos in the local database with the one from the Strapi server, check for new or updated todos created while the application was offline, and update the Strapi server with those data using the _mergeLocalAndRemoteTodos, which you'll create shortly.

Handling Conflicts and Data Merging During synchronization in Flutter and Strapi

Now, create the _mergeLocalAndRemoteTodos method to properly merge the local and remote data to avoid conflicts during the synchronization process. Also, you need to create a fetchRemoteTodos method to fetch all the todos in the Strapi server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
List<Map<String, dynamic>> _mergeLocalAndRemoteTodos(
    List<Map<String, dynamic>> localtodos,
    List<Map<String, dynamic>> remotetodos,
  ) {
    final mergedtodos = [...localtodos];

    for (var remotetodo in remotetodos) {
      final localtodoIndex =
          mergedtodos.indexWhere((todo) => todo['id'] == remotetodo['id']);

      if (localtodoIndex == -1) {
        mergedtodos.add({
          ...remotetodo,
          'isNew': false,
          'isUpdated': false,
        });
      } else {
        final localtodo = mergedtodos[localtodoIndex];
        final remoteUpdatedAt = DateTime.parse(remotetodo['updatedAt']);
        final localUpdatedAt = DateTime.parse(localtodo['updatedAt']);

        if (remoteUpdatedAt.isAfter(localUpdatedAt)) {
          mergedtodos[localtodoIndex] = {
            ...remotetodo,
            'isNew': false,
            'isUpdated': true,
          };
        } else if (remoteUpdatedAt.isBefore(localUpdatedAt)) {
          mergedtodos[localtodoIndex] = {
            ...localtodo,
            'isNew': false,
            'isUpdated': true,
          };
        }
      }
    }

    return mergedtodos;
  }

  Future<List<Map<String, dynamic>>> fetchRemoteTodos() async {
    final response = await http.get(Uri.parse('$baseUrl/api/todos'));
    if (response.statusCode == 200) {
      final Map<String, dynamic> responseData = json.decode(response.body);
      final List<dynamic> todosData = responseData['data'];
      final List<Map<String, dynamic>> todos = todosData
          .map((todo) => todo['attributes'] as Map<String, dynamic>)
          .toList();
      return todos;
    } else {
      throw Exception('Failed to load todos');
    }
  }
}

With the above code, when the apps regain internet connectivity, the local and remote todos will sync to keep the app's data consistent without conflicts.

Building the Flutter UI

Now that you have implemented all the logic for your offline-first app build the UI for your application and use them. Create a new folder, screens, in the lib folder, and inside the screens folder, create a new home_screen.dart file and add the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import 'package:flutter/material.dart';
import 'package:offline_first_app/features/services/strapi_service.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final StrapiService strapiService = StrapiService();

  @override
  void initState() {
    super.initState();
    strapiService.fetchAndCacheTodos();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Todo List'),
      ),
      body: StreamBuilder<List<Map<String, dynamic>>>(
        stream: strapiService.todosStream,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else {
            final todos = snapshot.data ?? [];
            return ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
                final todo = todos[index];
                return ListTile(
                  title: Text(todo['title']),
                  subtitle: Text(todo['description']),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Checkbox(
                        value: todo['isCompleted'] == 1,
                        onChanged: (value) {
                          if (value != null) {
                            strapiService.updateLocalTodo({
                              ...todo,
                              'isCompleted': value ? 1 : 0,
                            });
                          }
                        },
                      ),
                      IconButton(
                        icon: const Icon(Icons.delete),
                        onPressed: () {
                          showDialog(
                            context: context,
                            builder: (context) {
                              return AlertDialog(
                                title: const Text('Delete Todo?'),
                                content: const Text(
                                    'Are you sure you want to delete this todo?'),
                                actions: [
                                  TextButton(
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                    child: const Text('Cancel'),
                                  ),
                                  TextButton(
                                    onPressed: () {
                                      strapiService.deleteLocalTodo(todo['id']);
                                      Navigator.pop(context);
                                    },
                                    child: const Text('Delete'),
                                  ),
                                ],
                              );
                            },
                          );
                        },
                      ),
                    ],
                  ),
                  onLongPress: () {
                    showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          title: const Text('Delete Todo?'),
                          content: const Text(
                              'Are you sure you want to delete this todo?'),
                          actions: [
                            TextButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text('Cancel'),
                            ),
                            TextButton(
                              onPressed: () {
                                strapiService.deleteLocalTodo(todo['id']);
                                Navigator.pop(context);
                              },
                              child: const Text('Delete'),
                            ),
                          ],
                        );
                      },
                    );
                  },
                );
              },
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

The above creates a StatefulWidget HomePage screen. It initializes the StrapiService and creates an instance of it. When the widget initializes, it calls the fetchAndCacheTodos method to fetch the todos you created in your Strapi admin and cache them so users can access them offline.

With the StreamBuilder, you listen to changes in the todo list. The StreamBuilder loops through the todos and displays them on the screen, adding a checkbox and delete icon to each to update the status and delete an entry of the todos. This approach allows the UI to update in real-time whenever the todo list changes.

You also have the FloatingActionButton to allow users to create new todos, see the image below. For the update and delete actions, it calls the updateLocalTodo and deleteLocalTodo methods, respectively. These methods modify the local database and attempt to sync changes with the remote database.

Next, update the onPressed parameter in the FloatingActionButton class to create a modal to add new todos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//...
 floatingActionButton: FloatingActionButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text(
                  'New Todo',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                TextField(
                  controller: _titleController,
                  decoration: const InputDecoration(labelText: 'Title'),
                ),
                TextField(
                  controller: _descriptionController,
                  decoration:
                      const InputDecoration(labelText: 'Description'),
                ),
                ElevatedButton(
                  onPressed: () {
                    final newTodo = {
                      'title': _titleController.text,
                      'description': _descriptionController.text,
                      'isCompleted': 0,
                      'createdAt': DateTime.now().toIso8601String(),
                    };
                    strapiService.createLocalTodo(newTodo);
                    _titleController.clear();
                    _descriptionController.clear();
                    Navigator.pop(context);
                  },
                  child: const Text('Create Todo'),
                ),
              ],
            ),
          );
        },
      );
    },
    child: const Icon(Icons.add),
  ),

See the image below:

Then inside the _HomePageState class, after the line where you initialized the StrapiService class, add the code below to handle the form state for the title and description fields.

1
2
3
4
5
6
7
8
9
10
11
//...
final TextEditingController _titleController = TextEditingController();
final TextEditingController _descriptionController = TextEditingController();


 @override
  void dispose() {
    _titleController.dispose();
    _descriptionController.dispose();
    super.dispose();
  }

Implementing Background Synchronization Strategies in Flutter

Now implement a background synchronization to synchronize the local and remote data in the HomePage screen. Add the code below after the initState function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//...
 @override
  void initState() {
    super.initState();
    strapiService.fetchAndCacheTodos();
    strapiService.syncLocalTodosWithBackend();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    await BackgroundFetch.configure(
        BackgroundFetchConfig(
            minimumFetchInterval: 15,
            stopOnTerminate: false,
            enableHeadless: true,
            requiresBatteryNotLow: false,
            requiresCharging: false,
            requiresStorageNotLow: false,
            requiresDeviceIdle: false,
            requiredNetworkType: NetworkType.ANY),
        _onBackgroundFetch,
        _onBackgroundFetchTimeout);
    setState(() {});

    if (_enabled) {
      await BackgroundFetch.start();
    }
    if (!mounted) return;
  }

  void _onBackgroundFetch(String taskId) async {
    await strapiService.syncLocalTodosWithBackend();
    BackgroundFetch.finish(taskId);
  }

  void _onBackgroundFetchTimeout(String taskId) {
    BackgroundFetch.finish(taskId);
  }

The above code sets up background fetching and synchronization for a todo application. The initState() method first fetches and caches todos, then sync local todos with the backend and finally initializes the platform state for background operations.

The initPlatformState() method configures BackgroundFetch with specific settings, such as fetch interval and device requirements. It also sets up callbacks for background fetch events and timeouts and starts the background fetch process if enabled.

The onBackgroundFetch() method is called when a background fetch event occurs, triggering a sync of local todos with the backend before signaling task completion. If a background fetch task times out, the onBackgroundFetchTimeout() method is called to finish the task properly.

For this to work, you need to add the background_fetch package to your pubspec.yaml file:

1
2
3
4
5
6
7
dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.3+1
  http: ^1.2.1
  connectivity: ^3.0.6
  background_fetch: ^1.3.4

When implementing background synchronization, one is bound to encounter issues like large datasets being uploaded simultaneously, leading to data conflicts or network interruptions. These conflicts emerge if, at any given time, modifications are done on both the local and remote server sides of our application. Also, intermediate disruptions might occur during this type of connection syncing. To address this disruption, your code should have proper error-handling mechanisms, and logs should be produced whenever an error occurs. Test the synchronization at different network speeds all time round. Users should be allowed to synchronize manually in case the automated one fails.

NOTE: With the initPlatformState(), the background fetch runs every 15 minutes to check if the Strapi server is back online and then syncs the data stored in your device's local database with your Strapi backend.

Authentication and Authorization in Strapi and Flutter Offline-First App

To implement authentication and authorization in the application, follow the steps below:

• Set up Strapi authentication
  • Configure Strapi's authentication provider
  • Create necessary API endpoints for login, registration, and token refresh
• Implement client-side authentication in the Flutter App
  • Create login and registration screens
  • Implement API calls to authenticate users Store and manage authentication tokens securely
• Handle user sessions
  • Implement a token refresh mechanism
  • Create a session management system to maintain user state
• Implement authorization:
  • Set up role-based access control in Strapi
  • Implement client-side checks for user permissions Secure API requests
  • Add authentication headers to API requests
  • Handle unauthorized access gracefully

For a detailed step-by-step guide, refer to this guide on Mastering Flutter Authentication with Strapi CMS: A Step-by-Step Guide.

Demo Time!

When we test our app, we should observe the following: 1. We can create a to-do item while offline. 2. Any data created when offline is synched and stored in Strapi after 15 minutes.

Conclusion

Throughout this tutorial, you've learned how to build an Offline-First Flutter Apps with Strapi. You have set up a Strapi project, installed the Strapi, created a collection Type, and created data using the Strapi Content Manager. You created a Flutter application to make API requests to the Strapi Server, cache the data for offline access, and create data synchronization backgrounds and strategies to sync the local database with the Strapi Server. Explore the Strapi and Flutter documentation to learn other features you can add to your app.