Flutter Web and Hive

In case it helped :)

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

We will cover briefly about

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

Article here: https://flatteredwithflutter.com/using-hive-in-flutter-web/

Storing data using Hive

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

Basically, 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.

Flutter Web and Hive

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

• Include the following dev dependency

dev_dependencies:
  hive_generator: ^0.7.1

Next Step

• 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;

Final Model — Hive Ready

• 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,

IndexedDB — Browser

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.

---

Flutter Web and Hive — Add to fav on the heart press

Data Operations

With Hive configured along with the data model in the previous step, hence 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

Flutter Web and Hive

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.

In case it helped :)

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

Source code for Flutter Web App..

Comments

[Himujjal Upadhyaya]

gallery.flutter.dev/#/

Try this on mobile. Nothing bad with Flutter for native platforms but for web its a difficult task. It will take the most amount of time.

I think something like Angular-Dart or React-Dart would rather suit Web. Flutter has pixel based rendering not suited for web.