Storing data in Flutter Web using Hive

Flutter Web and Hive

Hive in Flutter Web

How to store data in browser in Flutter Web? Hmm…

All in one Flutter resource: https://flatteredwithflutter.com/using-hive-in-flutter-web/

Pre-Requisite:

This article assumes the reader knows about code generation in the Flutter.

Begin…

View the demo here

Website: https://web.flatteredwithflutter.com/#/

We will cover briefly about

1. Storing data using Hive
2. Data operations
3. Real-time UI updates

Storing data using Hive

Hive is a lightweight and key-value database. It supports mobile, desktop, and browser.

We can save data from primitives like strings to complex custom objects.

Note: Install both hive and hive_flutter

Data to save:

We have generated a custom model (ArticlesModel) using code generation.

Now we want to extend this model and make it Hive customizable.

• Include the following dev dependency

dev_dependencies:
  hive_generator: ^0.7.1

• Add the following annotation on top of the model’s JSON annotation

@HiveType(typeId: 1) ------> ADD THIS PART
@JsonSerializable(nullable: false)

typeId is an annotated id (integer)for a class.

Note: This annotation creates a default Adapter class with

“YourClass” + “Adapter”
// FOR OUR CASE, ArticlesModelAdapter

• Next, annotate each field with

@HiveField(0) ------> ADD THIS PART
@JsonKey(name: 'article_id')
String articleID;

• Finally, run the code generation command.

flutter pub run build_runner build --delete-conflicting-outputs

Configure Hive

Inside your main.dart, initialize Hive using

await Hive.initFlutter();

and register the adapter which was generated using code generation above. We specify the type of model (in our case ArticlesModel).

Hive.registerAdapter<ArticlesModel>(ArticlesModelAdapter());

Note: For web-browsers, the data is saved inside IndexedDB, which is done by Hive, we don’t write extra code for that.

See how it looks inside the browser,

Finally, we open a box (everything inside the Hive is a box)

await Hive.openBox<ArticlesModel>('favorites')

//String field here is required and uniquely identifies a box

In case the box is already open, we get the instance. No extra code for checking if the box is opened.

Data Operations

With Hive configured along with the data model in the previous step, we can now proceed with the implementation of operations:

1. Insert data
2. Read data
3. Delete data

• Let’s get the opened box using

final _favBox = Hive.box<ArticlesModel>('favorites')

• For data insertion,

_favBox.put('key', 'value') ---> GENERIC

_favBox.put(data.articleID, data) ---> OUR CASE SPECIFIC

As the box is of type ArticlesModel, hence the data (‘value’) is of type ArticlesModel. We assign article id as the key.

• For reading data,

List<ArticlesModel> get fetchFromFavBox => _favBox.values.toList();

values: returns all the items inside the box

• For deleting data,

_favBox.delete('key') ---> GENERIC

_favBox.delete(data.articleID); ---> OUR CASE SPECIFIC

While inserting we assigned articleID as key, hence we delete using the same key.

Note: In case the key doesn’t exist, nothing happens!

Real-time UI updates

In today’s world, we need everything instantly, the same goes for our insertion, deletion operations inside the Hive.

What we want to achieve

• Show the insertion, deletion instantly
• No, reload, please!

Hive exposes listeners for the Hive Boxes. We utilize this listener on the box to show updates instantly.

final _favBox = Hive.box<ArticlesModel>(HiveBoxes.favBox);
// FROM ABOVE

Box<ArticlesModel> get favBox => _favBox;

favBox.listenable() ----> LISTENABLE exposed BY HIVE

Note: listenable is present inside hive_flutter

We can wrap this listenable inside ValueListenableBuilder

Each time any changes are made to the box’s entries, it gets notified to us.

Note: You can provide [keys] filter inside listenable for listening to specific keys.

Interesting Articles related to Flutter Web:

Hosted URL: https://web.flatteredwithflutter.com/#/

Source code for Flutter Web App.