Learn how to use hive in the flutter web. We can store data in flutter web using Hive, which internally uses IndexedDB on the web.
This video shows how to use hive in the flutter web. We can store data in flutter web using Hive, which internally uses IndexedDB on the web.
Flutter Web and Hive | Using Hive in Flutter Web
We will cover briefly about Storing data using Hive Data operations Real-time UI updates
Source Code: https://github.com/AseemWangoo/experiments_with_web
View the demo here
We will cover briefly about
Flutter Web and 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
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.
dev_dependencies: hive_generator: ^0.7.1
@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
@HiveField(0) ------> ADD THIS PART @JsonKey(name: 'article_id') String articleID;
Final Model — Hive Ready
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).
N_ote: 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
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.
Flutter Web and Hive — Add to fav on the heart press
This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.
Profusely examined top Mobile App Development companies in UK with ratings & reviews to help find the best Mobile App Development solution providers.
Flutter has been booming worldwide from the past few years. While there are many popular mobile app development technologies out there, Flutter has managed to leave its mark in the mobile application development world. In this article, we’ve curated the best Flutter app templates available on the market as of July 2020.
Mobile App Development North Carolina In the era of globalization, technology has forced the businesses and industries to jump into the space of competition. Technology has both tangible and intangible benefits that help businesses from different ind...
Looking for a Mobile app development company in Delhi NCR? Here it a list of top mobile app development companies in Delhi for Android & iOS app Development.