Flutter Web and Hive | Using Hive in Flutter Web

Flutter Web and Hive | Using Hive in Flutter Web

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

**

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

Image for post

Flutter Web and Hive

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.

Image for post

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

Image for post

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());

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,

Image for post

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.

Image for post

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

Full article: https://flatteredwithflutter.com/using-hive-in-flutter-web/

flutter mobile-apps web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How long does it take to develop/build an app?

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.

Top Mobile App Developers & Leading App Development Companies in UK

Profusely examined top Mobile App Development companies in UK with ratings & reviews to help find the best Mobile App Development solution providers.

Top 25 Flutter Mobile App Templates in 2020

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

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

Top 7 Mobile App Development Companies in Delhi NCR

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.