We will cover briefly about
- Storing data using Hive
- Data operations
- Real-time UI updates
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.
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
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
- Finally, run the code generation command.
flutter pub run build_runner build --delete-conflicting-outputs
Inside your main.dart, initialize Hive using
and register the adapter which was generated using code generation above. We specify the type of model (in our case ArticlesModel).
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,
We open a box (everything inside the Hive is a box)
//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.
With Hive configured along with the data model in the previous step, hence we can now proceed with the implementation of operations:
- Insert data
- Read data
- 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.
Hosted URL: https://web.flatteredwithflutter.com/#/
Source code for Flutter Web App.