Custom Code Showcase
Jd
Jelle de Rijke

Offline database by using Hive not SQFlite

Hi there fellow FlutterFlowers, I noticed all these topics about offline database / storage and had seen a lot of requests for SQFlite or something similar.  • https://community.flutterflow.io/c/suggestions-and-feedback/feature-request-local-alternative-to-firestore#comment_wrapper_16777292 • https://community.flutterflow.io/c/suggestions-and-feedback/sqlite-support-please • https://community.flutterflow.io/c/discuss-and-get-help/is-flutterflow-finally-integrating-sqlite And many, many more. I am also in need of this way to store offline data. I noticed no one seemed to mention that SQFlite does not support web, and Flutterflow custom actions / code / whatever, only supports packages that support web. And that makes sense, because we work in a UI in a webbrowser. So I ALMOST dug into the rabit hole that is called actually coding Flutter in an IDE.... 🤫 but I didn't do that. I fiddled some with the first alternative to SQFlite I could find: Hive. And it works! And it's actually quite easy. Well it took be quite some hours to figure it out, but that has more to do with my lack of understanding of dart than the complexity of it. So here goes, a small tutorial on how to get a local database going with Hive: Setting up a Hive box: Create a custom action with this code:


// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

Future newCustomAction() async {
  // Initialize Hive
  await Hive.initFlutter();

  // Register TypeAdapters if you have custom data models

  // Open the box
  final box = await Hive.openBox('MyHiveBox');

  // Check if the box is empty
  if (box.isEmpty) {
    // Add preloaded data to the box
    await box.put(
        'test_key', 'some value stored in my test_key in my Hive Box');
    await box.put('names', ['Mr Smith', 'Misses Smith']);
    await box.put('cars', [
      'BMW',
      'Mercedes',
      'Opel',
      'Porsche',
      'Nissan',
      'Honda',
      'Mazda',
      'Dodge'
    ]);
    // Add more preloaded data as needed
  }
} And include these pubspec dependencies:

hive: ^2.2.3
hive_flutter: ^1.1.0
crypto: ^3.0.2
meta: ^1.8.0

Now go to custom files main.dart and add your custom function to the initial actions. This way Hive starts on app launch. When you run a new test session you can see the database in chrome inspector>application>storage>indexeddb>myhivebox. Here you can see your boxed/stored values! Getting data from the box: To show this data in the app you add another custom action:


// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

Future?> getCarsFromBox() async {
  // Add your function code here!
  var box = await Hive.openBox('MyHiveBox');
  List carsDynamic = box.get('cars', defaultValue: ['no cars found']);
  List cars = carsDynamic.cast();

  return cars;
}

This should return a string that is a list and is nullable. Now do some list widget a create children from the custom action data and voila you have your stored data displayed in your app! [hiveexample.png] Inserting new data into the box without resetting the box: Create a simple text input field with a button and use this custom action to add a car to the box:


// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

Future putCarinBox(String? name) async {
  // take name from form and put it in MyHiveBox hive box called cars
  var box = await Hive.openBox('MyHiveBox');

  // Get the current list of cars
  List carsDynamic = box.get('cars', defaultValue: ['no cars found']);
  List cars = carsDynamic.cast();

  // Add the new car to the list
  cars.add(name!);

  // Update the 'cars' entry in the box with the updated list
  box.put('cars', cars);
}

et voila cars are added: [stuffadded.png]One thing I thought was pretty cool that the data is persisted on app reboot in the FF preview app on android. To me this opens a whole lot of new options and ideas! Check out the Hive docs: https://docs.hivedb.dev/#/basics/read_write And perhaps someone feels inclined to try some of the similar packages that depend on Hive but have more options or other local storage packages that support web. Happy FF-ing! bg Jelle

4
4 replies