Building Offline‑First Flutter Apps with Hive and Connectivity

Introduction

Building resilient mobile apps requires handling intermittent network conditions and ensuring users have a seamless experience whether they’re online or offline. An offline-first strategy means your app functions correctly without a live connection, syncing data in the background when connectivity returns. In Flutter, you can implement this pattern with Hive (a lightweight, blazing-fast key-value store) and connectivity_plus (for monitoring network status). This tutorial shows you how to set up Flutter offline storage, cache data locally with Hive, detect connectivity changes, and synchronize when back online.

Setup and Dependencies

Start a new Flutter project or add to an existing one. In your pubspec.yaml, include:

dependencies:
  flutter:
    sdk: flutter
  hive: ^2.2.3
  hive_flutter: ^1.1.0
  connectivity_plus

Then run flutter pub get. In main.dart, initialize Hive before runApp():

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();
  runApp(MyApp());
}

If you store custom objects, generate Hive adapters using build_runner. For simple key-value pairs, no adapter is necessary.

Caching Data with Hive

Define the data you want to cache—say, a Note model. With Hive you can store primitives, lists, maps, or custom types.

@HiveType(typeId: 0)
class Note extends HiveObject {
  @HiveField(0)
  String id;
  @HiveField(1)
  String content;
  Note({required this.id, required this.content});
}

Register the adapter in main():

Hive.registerAdapter(NoteAdapter());
await Hive.openBox<Note>('notesBox');

To save a note offline:

final box = Hive.box<Note>('notesBox');
await box.put(note.id, note);

To read all cached notes:

final cachedNotes = box.values.toList();

This simple cache ensures your data persists across launches even without connectivity.

Detecting Connectivity Changes

Use connectivity_plus to listen for network state changes. Wrap your main logic in a service or widget.

class ConnectivityService {
  final _connector = Connectivity();
  Stream<ConnectivityResult> get onChange => _connector.onConnectivityChanged;
}

In your UI or controller:

final connectivityService = ConnectivityService();
connectivityService.onChange.listen((status) {
  if (status != ConnectivityResult.none) {
    // Trigger sync logic
  }
});

This lets you know the moment the device goes online, so you can reconcile offline actions with the remote backend.

Sync Strategy

An effective Flutter offline storage solution stores pending operations in Hive and replays them when online. For example, maintain a “sync queue”:

// Pseudocode outline:
// 1. When user creates/edits, save locally and add to queue
await queueBox.add({'action': 'uploadNote', 'data': note.toJson()});

// 2. On connectivity change to online, process the queue
for (var entry in queueBox.values) {
  try {
    await api.uploadNote(entry['data']);
    queueBox.delete(entry.key);
  } catch (_) {
    // leave in queue for next retry
  }
}

This pattern decouples user actions from network reliability, making your app truly offline-first. You can extend it with exponential backoff, conflict resolution, and batching.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By combining Hive for local storage and connectivity_plus for network monitoring, you empower your Flutter apps with a robust offline-first architecture. Users can create, read, update, and delete data seamlessly offline; your sync queue and connectivity listener ensure data integrity when the connection resumes. This approach elevates user trust and keeps engagement high even in low-coverage areas.