DEV Community

Cover image for Introducing Hive UI: A Flutter Package for Easily Managing Your Hive Database
Amr Said
Amr Said

Posted on

Introducing Hive UI: A Flutter Package for Easily Managing Your Hive Database

Introducing Hive UI: A Flutter Package for Easily Managing Your Hive Database
https://pub.dev/packages/hive_ui/
If you're a Flutter developer, you're probably familiar with Hive - a lightweight and blazing-fast key-value store that is perfect for storing small amounts of data on the device. However, managing and interacting with your Hive database can be a tedious task, especially when it comes to viewing and editing the data.

Image description

Image description

Image description

Image description
That's why we've developed Hive UI, a new Flutter package that makes it easy to manage your Hive database. With Hive UI, you can easily explore all of your database boxes, edit table rows, add new rows, search for boxes by column name and value, and delete rows or entire boxes.

Hive UI is built on top of the Hive package and is fully compatible with it. To use Hive UI, you'll need to have Hive installed and a box open. Additionally, you'll need to implement the toJson and fromJson methods for every box that you want to use with Hive UI.

To get started with Hive UI, add the package to your pubspec.yaml file and run flutter pub get. Then, add all of your boxes to a static variable like this:

static Box<Box> get hiveBox =>
      Hive.box<Box>("name");

static Map<Box<dynamic>, dynamic Function(dynamic json)> get allBoxes => {
        hiveBox: (json) =>
            hiveBox.fromJson(json)}

Enter fullscreen mode Exit fullscreen mode

To view your boxes in the Hive UI, simply navigate to the HiveBoxesView widget and pass in your boxes and any desired options, like this:

Navigator.push(
    context,
    HiveBoxesView(
        hiveBoxes: allBoxes,
        onError: (String errorMessage) =>
            PopUpHelper.showToast('', errorMessage),
        dateFormat: DateFormat('yyyy-MM-dd'),
        appBarColor: primaryColor,
        columnTitleTextStyle: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 14.sp,
        ),
        rowTitleTextStyle: TextStyle(fontSize: 12.sp),
      )
  );

Enter fullscreen mode Exit fullscreen mode

Hive UI also provides options for

customizing the look and feel of the UI, such as the app bar color, column title text style, and row title text style.

In addition to viewing and editing data, Hive UI also provides a search feature that allows you to search for boxes by column name and value. This can be incredibly useful when working with large amounts of data and need to quickly find a specific piece of information.

Another powerful feature of Hive UI is the ability to delete rows or entire boxes. This can be useful for cleaning up old data or for testing purposes. The delete feature is easy to use and can be accessed directly from the Hive UI.

Hive UI also includes a copy feature that allows you to copy the selected value, and also select specific color for the selected row.

One of the best things about Hive UI is that it is open-source and actively maintained, so you can always be sure that you're using the latest version of the package. And if you encounter any issues or have any suggestions for new features, you can submit them on the GitHub repository.

Overall, Hive UI is a must-have package for any Flutter developer working with Hive. It makes managing and interacting with your Hive database a breeze, and its powerful features and customization options make it a valuable addition to any project. So, if you're looking for an easy way to manage your Hive database, give Hive UI a try and see how it can help you work more efficiently and effectively.

Top comments (0)