Handling Offline Mode in Flutter Apps With Hive & Connectivity Plus

A good app isn’t just fast — it’s reliable, even when there’s no internet connection.
Whether your users are traveling, in rural areas, or facing unstable networks, your app should gracefully handle offline mode instead of crashing or showing empty screens.

In this post, we’ll learn how to handle offline mode in Flutter using two amazing packages:
🧠 Hive (for local data storage)
🌐 Connectivity Plus (to check network status)

🧩 Why Offline Mode Matters

When your app loses connection, what happens?

• API calls fail ❌
• Users see blank screens ❌
• Data is lost ❌

That’s frustrating.

Offline mode fixes this by:
✅ Caching important data locally
✅ Notifying users when they’re offline
✅ Syncing updates when the network is back

In short, your app becomes more user-friendly and professional.

⚙️ Step 1: Add the Required Packages

Add these two packages to your pubspec.yaml:

dependencies:
  hive: ^2.2.3
  hive_flutter: ^1.1.0
  connectivity_plus: ^5.0.1
  path_provider: ^2.1.2

Then run:

flutter pub get

📦 Step 2: Initialize Hive

Hive is a lightweight, NoSQL database that stores data locally — perfect for offline apps.

In your main.dart, initialize Hive like this:

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final dir = await getApplicationDocumentsDirectory();
  await Hive.initFlutter(dir.path);
  await Hive.openBox('offlineData');
  runApp(const MyApp());
}

✅ You’ve now created a Hive “box” (think of it like a local storage container).

🌐 Step 3: Check Connectivity with Connectivity Plus

Use the connectivity_plus package to detect network status in real time.

import 'package:connectivity_plus/connectivity_plus.dart';

class NetworkController {
  final Connectivity _connectivity = Connectivity();
  Future<bool> isConnected() async {
    final result = await _connectivity.checkConnectivity();
    return result != ConnectivityResult.none;
  }
  Stream<ConnectivityResult> get onNetworkChange =>
      _connectivity.onConnectivityChanged;
}

✅ This checks if the device is connected to Wi-Fi, mobile data, or offline.

💾 Step 4: Store API Data Locally Using Hive

Whenever your app fetches data from an API, you can store it locally in Hive for offline use.

Get WriteFlow’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example 👇

import 'package:hive_flutter/hive_flutter.dart';

Future<void> saveDataOffline(String key, dynamic data) async {
  final box = Hive.box('offlineData');
  await box.put(key, data);
}
Future<dynamic> getOfflineData(String key) async {
  final box = Hive.box('offlineData');
  return box.get(key);
}

✅ Now, your app has local caching — if the user goes offline, you can still show the stored data.

🧠 Step 5: Combine Hive + Connectivity

Here’s the complete workflow 👇

final network = NetworkController();

Future<void> loadData() async {
  bool online = await network.isConnected();
  if (online) {
    print('🌐 Online: Fetching from API...');
    final response = await fetchDataFromAPI();
    await saveDataOffline('posts', response);
  } else {
    print('📴 Offline: Loading from cache...');
    final cachedData = await getOfflineData('posts');
    print('Cached data: $cachedData');
  }
}

✅ If connected → Fetch fresh data & save to Hive
✅ If offline → Load from Hive cache

🧩 Step 6: Listen for Connectivity Changes

You can also listen for connection changes in real time and show a snackbar alert:

network.onNetworkChange.listen((result) {
  if (result == ConnectivityResult.none) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('⚠️ You are offline')),
    );
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('✅ Back online!')),
    );
  }
});

✅ Gives users live feedback about their network status.

⚡ Bonus: Sync Data When Back Online

When the user reconnects, you can sync unsent data (like forms or messages) to your API.

Example:

if (await network.isConnected()) {
  final unsentData = await getOfflineData('pendingUploads');
  for (var item in unsentData) {
    await uploadToServer(item);
  }
  Hive.box('offlineData').delete('pendingUploads');
}

✅ This ensures data consistency — a key part of true offline-first design.

🧱 Real-World Use Cases

💬 Chat apps — Cache recent messages
🛍 E-commerce — Show products offline
📰 News apps — Cache latest articles
📊 Dashboard apps — Store last fetched analytics

Your users stay productive, even when they lose connectivity.

💡 Best Practices

✅ Always encrypt sensitive data in Hive if needed (HiveAesCipher)
✅ Don’t cache too much data (set limits)
✅ Use timestamps to refresh old cache
✅ Show clear offline indicators
✅ Test your app by turning airplane mode on/off

🏁 Conclusion

Handling offline mode in Flutter is not just a “nice to have” — it’s a must for a great user experience.
By combining Hive for local storage and Connectivity Plus for network monitoring, you can make your app:

✅ Faster
✅ Reliable
✅ User-friendly even without internet

Remember: a good Flutter app works online — a great Flutter app also works offline. 💪