OK, I posted earlier but found a bug that needed fixing!
I have got something that may help others. If you are looking for a way to store data on the local device rather than in the cloud, this is for you. I needed this for a windows desktop application that cannot pass data through a firewall and so needed it's own datastore. It is designed for larger form factors - but the database pricipals should work for Android/iOS.
This application is now submitted to the marketplace.
This FlutterFlow Project is PUBLIC too!
There is a trick with using hive and it has to do with not being able to use build-runner. I ended up manually coding what the build runner would produce for adapters. I'd love to do this with Isar database, but the developer is writing a new way for web to work. So until this Hive will do!
Here is the write up I made. If you can't access this app through the marketplace, dm me and I'll send a link your way. I have tested on web browser and windows 11 desktop.
INTRO
A sample FlutterFlow application is presented that creates and maintains a Hive database that will persist on the device through the use of Custom-Actions. Some basic adjustments were made to circumvent the need to run Hive-Generator and Flutter Build Runner. This sample application can be leveraged to learn about how to incorporate Hive into other applications. The application is for maintaining an item master of products. This was put together without programming skills nor design skills so it could be better organized – constructive criticism is welcome.
GOALS AND OBJECTIVES
The purpose of this exercise is to build an application that will be used on a Windows Desktop. There are several databases for Flutter that can accomplish this including: Hive, Isar, Realm, SQFlite and others. Of these only hive has the built in feature of working in web-environment – meaning it will work in a browser. All of these others do not support working in browsers. Since a value of working in FlutterFlow is to be able to rapidly see changes to code, Hive is the only ‘today’ solution.
In the browser, Hive re-puposes IndexedDB. The Indexed Database API (commonly referred to as IndexedDB) is a JavaScript application programming interface (API) provided by web browsers for managing a NoSQL database of JSON objects which runs inside of the security sandbox of a browser. Of these other databases, Isar (which is the successor to Hive from the development-team standpoint) is working toward browser support. Once Isar is fully supporting browser environments we’ll give it a try too.
BUILT-IN FEATURES
The following features are available:
2 Pages: Main Page containing the active Item Master list view. Main page has Page State named listRefresh which is of DataType itemFlow. This Page State is used to generate an subset of the database to be used in the ListView. There is also a data entry page for creating and editing item records. The data entry page has a Page State named itemDetailPageState of Data Type fullHiveClassItem.
Navigation: Users can jump between the two pages of the application by using simple buttons.
Database: A single database (Hive Box) for holding item records locally.
Record Definition: An item record consists of 7 fields: sku, name, description, unit of measure, manufacturer, weight, and cube. Each item record has a hive ID. It is defined in the custom action setupItemHive.
ListView: The item master list only renders the hive ID, sku, name and description. It references the DataType itemFlow which gets populated through the custom actions refreshListSummary and sortList. The rendered list by default, renders highest value of the Hive ID on top to smallest value entry on bottom. So most recently created items on top. Default rendering occurs on main page load.
CRUD: Each item can be DELETED using action addItem, RETREIVED using action getItemDetail, EDITED/UPDATED using action updateItem , and COPIED/CLONED into a new record using action getDupeItem.
Data Types: 2 FlutterFlow DataTypes are employed for rendering the Hive data in the FlutterFlow user interface. DataType #1 is itemFlow which builds the list using hiveID, sku, name, and description. DataType #2 is fullHiveClassItem represents the fields used to create or edit an existing item.
App State: There is one App State named fullItem which mirrors the fullHiveClassItem. Which can be used during CRUD activities.
Page states: Main page has Page State named listRefresh which is of DataType itemFlow. The data entry page has a Page State named itemDetailPageState of Data Type fullHiveClassItem.
Search: The database can be dynamically filtered using search. The search searches across the SKU, NAME, and DESCRIPTION fields.
Sort: Each column of the database listview can be resorted at any time.
THINGS OF NOTE
Wish-List features would be good to add but limited by time.
Storing Images: There is a way to store image files in Hive, I just didn’t do the legwork to incorporate it here. Again, it would be really helpful for folks looking to set user defaults etc.
Showing file paths: When on native platforms such as windows, ios, android, etc it is good to show in the app where the database files are stored. Ran into recent path_provider bug in FlutterFlow, so had to abandon this effort. However, in the Chrome browser you can access the database using F12.
Should also have date fields such as created and updated. Again, I didn’t have the time.
Would also like to have ability to keep item state so you can archive an item rather than immediately deleting it. Again, I didn’t have the time.
Setting up drop-downs that are populated into their own database.
Importing from csv.