And does it work on the web?

works!

Editing Notes

For the task of editing Notes I will need a screen for each type.

Going back to main.dart

I’m going to alter the ListTile to support a onTap event, this will open the corresponding Widget for the Note Type:

getNoteInfo 2.0

In the same way we navigate to create a new Note, the same will be done for editing. To edit the note its going to be required the “note.key” and “note.title”, to identify by the Parent id and add the title to the new screen AppBar.

Text Notes

Going to get started with the easy one, I’m going to get the Item for this note and assign it to the “TextEditingController”, this makes it easier to load/save the content:

loading text note

Using the parent key that was passed earlier, a search can be done for the corresponding item of that Note using the “singleWhere” method. The result is going to be saved because this item is going to be edited and saved again in the box:

saving text note

When the save button is pressed, the text in the “TextEditingController” is going to the TextNote that was loaded earlier, and using the put method from Hive, I’m going to update the item the Box with that key value.

Text Note editing!

Check List Notes

This is where things start to get a little tricky for me…

This one is going to be a little different, since there could be many items inside a Check List, we will need to handle an array.

Like on the Text one, we start with the Parent ID, with that I can load all the Check List items to a List. This function will be called at the beginning/adding notes/deleting notes process. The item order will start from position 0, we will add reorder later (also ascending).

loading check list note items id

With that done I can use that array to fill a ListView with ListTiles, each tile will have the check box, text, and delete button. Another extra is the key value, key value has to be unique (I’m using the Hive Box item key), this will be used to replace “ListView with “ReorderableListView”. This piece of code will be bigger but I like to give the full picture:

check list edit

Breaking it down

At start we use loadNoteItems() to fill our array of CheckListNote items. The body like before will be made of a SafeArea (just to be safe) and a ListView. If there is nothing in the array, we get a simple “No items” text, else I’m using the spread operator with a “for” to fill the ListView with ListTiles. In the ListTile the leading widget will be the check box for the done option, title widget will be for the editable Text Field, and last the trailing widget will be used for the delete icon.

The last thing to note in the ListTile is that I’ve made a small StatelessWidget for the Text Field, it will update the item inside the Box container, but there is no need to update the view (State):

filling the ListTiles

The “CheckBox” uses the same put() function Hive to update the Box, but before that it also calls a function “getUpdateItemInfo(item);”, this is done because since we are calling a setState, if the item’s text was changed, this will update the item in the initial List (to avoid overwriting the old title):

getUpdateItemInfo

“CheckListItemText” requires the item ID for updating it later. Snipped for the text field widget:

CheckListItemText

For adding new items to the list, I will use yet again my faithful floatActionButton:

adding new item

Like I did when creating notes, I’m going to add the new item at position 0 and reorder all existing items to +1. After that is done loadingNoteItems() and setState will do the rest.

How does it look like so far:

Check List Items

Now the last thing to add to this screen is reordering, for this I will go the easy way and replace the ListView with a ReorderableListView (it was also widget of the week!), all it requires is a unique key (that I already had before) for every item and a onReorder function to update the item position both in the Hive Box and the List (the reorder function is pretty much the same that was used to edit the Notes position on the main screen):

ReorderableListView

Result:

drag and drop video

Bonus:

To keep track of when a note was last changed, I went to my “code” folder and created a “code.dart” file, this will have a function to update the Note “dateUpdated”:

code

This function will be called when changes are made to a note, usage example:

Code().changeUpdatedDate(widget.noteParent);

Viewing/Editing Note

Going to create a new screen for editing the Note title/description or simply for deleting it. I’m going to add a new file to my screens folder, “edit_note.dart”.

Back at my “main.dart” I’m going to add a trailing Icon to the ListTile for navigation:

adding info icon to ListTile

The new screen will receive the unique note Key, which is provided by the Box!

In the new screen we will also be displaying the created and updated date/time info, for that I want to format the date, we will need to add the “intl” package and add a new function to my “code.dart”:

intl

At build I’m going to use the singleWhere I’ve used before to get the Note info :

edit note screen

The form is mostly the same as it was for creating the Note, but the buttons functions have changed:

Edit/Delete screen

For the save button its pretty simple:

updateNoteInfo

For the Delete button it will also be very simple, the only new thing here is the “AlertDialog”, this allows to get a action confirmation from the user:

deleteNote

confirmation

Conclusion

There was (is) a lot to learn about Hive, I’ve had a pretty good experience with it, and it’s very different (for me) compared MS SQL which I’m most used to.

The main thing I took out of this project was that it was easier to debug on the Android and try to see if it works on the Web too after, there were times when there was bugs but there was no clear way of seeing the error output. But this is something that is only related to Flutter, since web is still is in Beta there are some tools that need to be added for the Web development to be smooth too.

One code base is pretty good, and there is still a lot of work to be done. But the “code once, work everywhere” is possible (even if hard).

I hope the Flutter team keeps the good work on the Web integration, enabling more single code base projects!

PS: Since Hive uses local data storage, if for some reason the storage is cleared, notes will be lost! A good next step would be to make the notes synchronize with a server or some storage, or export them.

Flutter Notes (web)