Building Offline-First Apps in Flutter: Using Hive and Flutter Cache Manager for Caching and Storing Data Locally

Mobile apps have become an integral part of our daily lives, but there are still times when we don't have internet connectivity. To ensure a seamless user experience, it's important to build apps that work offline. Fortunately, Flutter provides many tools and packages to create offline mode apps.

One of the key components of offline mode is data caching. By caching data, we can store information locally on the device, allowing the app to retrieve and display data even when there is no internet connection. In Flutter, we can use the Hive package to store data locally.

Hive is a lightweight, fast, and efficient NoSQL database that can be used to store key-value pairs. Hive stores data in boxes, which are essentially tables in the database. Each box contains records, which are key-value pairs.

To use Hive in your Flutter app, you need to follow these steps:

Step 1: Add Hive dependency in pubspec.yaml

 dependencies:
 hive: ^2.0.4

Step 2: Initialize Hive in your main.dart file

 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
 import 'package:path_provider/path_provider.dart'
        as path_provider;

 void main() async {
  // Initialize Hive
  WidgetsFlutterBinding.ensureInitialized();
  final appDocumentDirectory =
   await path_provider
      .getApplicationDocumentsDirectory();
    Hive.init(appDocumentDirectory.path);

    runApp(MyApp());
 }

Step 3: Create a Hive model

 import 'package:hive/hive.dart';

 import 'person.g.dart';

   @HiveType(typeId: 0)
  class Person {
   @HiveField(0)
   String name;

 @HiveField(1)
 int age;

 Person({
 required this.name,
 required this.age,
   });
 }

Step 4: Add data to Hive 

 import 'package:hive/hive.dart';

 final personBox = Hive.box<Person>('persons');

 void addPerson() {
  final person = Person(name: 'John Doe', age: 25);
   personBox.add(person);
 }

Step 5: Get data from Hive

 import 'package:hive/hive.dart';

 final personBox = Hive
    .box<Person>('persons');

 void getPerson() {
  final person = personBox.get(0);
  print(person?.name); // Output: John Doe
  print(person?.age); // Output: 25
 }

Step 6: Close Hive

 import 'package:hive/hive.dart';

 void closeHive() async {
   await Hive.close();
 }

In this implementation, we created a simple Person model and used it to store data in Hive. We added a person to the Hive box using addPerson() and retrieved the person using getPerson(). Finally, we closed the Hive box using closeHive().

Next, we need to cache network requests to ensure that we can display data even when there is no internet connection. For this, we can use the flutter_cache_manager package.

Flutter Cache Manager is a Flutter library that provides a cache for remote files that can be used to optimize the user experience of apps that depend on downloading files. With Cache Manager, you can download and cache remote files with just a few lines of code.

To use Cache Manager in your Flutter app, you need to follow these steps:

Step 1: Add Cache Manager dependency in pubspec.yaml

 dependencies:
 flutter_cache_manager: ^3.1.2

Step 2: Import Cache Manager in your Dart file

 import 'package:flutter_cache_manager/flutter_cache_manager.dart';

Step 3: Cache network requests

 final url = 'https://example.com/image.png';
 final file = await DefaultCacheManager().getSingleFile(url);

In this implementation, we used the getSingleFile() method provided by Cache Manager to download and cache an image from a URL. The downloaded file is stored in the cache directory, which is managed by Cache Manager. By caching network requests, we can ensure that the app can retrieve and display data even when there is no internet connection.

In conclusion, building offline mode apps is essential to provide a seamless user experience. By using packages like Hive and Cache Manager, we can store data locally and cache network requests to ensure that the app works even when there is no internet connection. With these tools, we can build apps that are not only reliable but also provide a great user experience.

Here is the complete code snippet:

 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
 import 'package:flutter_cache_manager'
    '/flutter_cache_manager.dart';
 import 'package:path_provider'
    '/path_provider.dart' 
 as path_provider;

 part 'person.g.dart';

 void main() async {
  // Initialize Hive
  WidgetsFlutterBinding.ensureInitialized();
  final appDocumentDirectory =
  await path_provider
      .getApplicationDocumentsDirectory();
  Hive
      .init(appDocumentDirectory.path);

  runApp(MyApp());
 }

 class Person {
  @HiveField(0)
  String name;

  @HiveField(1)
  int age;

  Person({
    required this.name,
    required this.age,
  });
 }

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Offline Mode Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Offline Mode Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment:
            MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => addPerson(),
                child:
                Text('Add Person to Hive'),
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () => getPerson(),
                child:
                Text('Get Person from Hive'),
              ),
              SizedBox(height: 16),
              FutureBuilder<File>(
                future: cacheImage(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return
                      Image.file(snapshot.data!);
                  } else {
                    return
                      CircularProgressIndicator();
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  final personBox =
  Hive.box<Person>('persons');

  void addPerson() {
    final person = 
    Person(name: 'John Doe', age: 25);
    personBox.add(person);
  }

  void getPerson() {
    final person = 
    personBox.get(0);
    print(person?.name); // Output: John Doe
    print(person?.age); // Output: 25
  }

  Future<File> cacheImage() async {
    final url =
        'https://via.placeholder.com/150';
    final file = 
    await DefaultCacheManager().getSingleFile(url);
    return file;
  }

  @override
  void dispose() {
    // Close Hive
    Hive.close();
    super.dispose();
  }
}

Conclusion 

In this blog post, we discussed how to build offline mode apps in Flutter. We saw how to use Hive to store data locally and how to use flutter_cache_manager to cache network requests. Building offline-first apps can significantly improve the user experience and increase user engagement. By using Flutter's built-in caching and storage packages, you can ensure that your app works seamlessly even when there is no internet connection. This not only improves the user experience but also  makes your app more reliable. We hope this blog post has helped you understand how to build offline mode apps in Flutter. If you have any questions or comments, feel free to leave them below. 

Happy coding!