Getting Started with Flutter Hive 🚀

hey friends welcome to getting started with flatter Hive tutorial today we'll dive into Hive a fast lightwe no esql database that has been working perfectly for storing data in our flatter apps locally on August this year the other of Hive Simon Choy who happens to be the author of Isa as well shared that he'll be investing more time in the continuous development of Hive which happens to be the current pre-release version 4.0.0 with this update it shows that there's a growth trajectory for H so why not dive into how it works together before the big version release so in our tutorial we'll work we'll create a calendar app and manage our events through the calendar and all these will be stored and retriev from our hi database the user will have the option to create and also select a category for the events and we'll also be able to enter a specific information for event which will be stored in the hi database also in the process of creating our event we'll have the option to upload a file and we'll be able to see how we upload files in the hive database once we add we'll be able to see our events in the main screen we can even decide to update the event name and click on update and it will update the information uh that we have sent to H database we'll see the events based on the different dates this is where we'll get to see the process the concept of quering and also you'll be able to see events based on a specific category let's start by creating a new flatter application we'll head over to our IDE and enter flatter create calendar app this will create an app for us now let's navigate to it and here we have our project next thing we're going to do is we'll proceed to install The Hive dependencies in our flatter application so over at our terminal let's just proceed to install them let's enter the command flatter Pub add we'll start by the first package will be Hive and then we'll have Hive flatter so you see that you can actually Implement Hive without Hive is not dependent on the flatter framework so hi flatter is more dependent on the flatter framework but you can also use a hive itself which is this one the first one then we're going to add development dependencies which will be Hive generator and the build Runner this will help us incode generation so let's enter and there we have it if we head over to a pspec you'll get to see so here we have our dependencies and now that we have that let's proceed to the next step now that we have hi installed let's initialize our database in the main do do file so we'll head over there and all we have to do we're going to do this in the main function and all we have to do is add one line of code so we'll set our main function as a sync and then we'll proceed to call Hive class Dot and then we'll call the extension method init flatter and this will do everything for us it will initialize the hi database for us if you're not uh dependent on on the if you're not dependent on the flatter framework you can use the inite extension method but what you need to do you'll have to specify the path but with the neat flat it has already handled that for us boxes in Hive are similar to tables in a database they help us organize and store our data so back to our um code we'll proceed to on our main function we'll proceed to config a few things first uh we'll first create some variables outside the main function so we're going to have two boxes in our H database one box will contain information about the categories the other box will contain information about the events so let's just Define them here by using the late because we won't be initializing them in this point but within the main function so we'll have a variable of type box and we'll call it category box then we'll have another box that we will call event box and there we have it now that we have those two we want to give a name to our two boxes so we'll just create string variables here category box name is equals to sorry categories and then we'll have another one for events event box name is equals to events there we have it now that we have those inside our main function all we have to do is call our box and initialize it by passing in and calling the hive class Hive Dot and calling in the method open box then we'll pass the name of our Cate our box which is category box name and we'll do the same for Event Event box we'll initialize it and Define the name of the box so it will be a wait hive. openen box and name it event box name and there we have it that's a simple way of creating boxes uh we just uh Define variables of type box and we all we've also defined strings that will represent the names of the boxes and then we've just opened the boxes inside the main function so next we're going to have a look at a few terminologies that are used in Hive that we'll get to interact with starting with Hive objects which act as containers for specific types of data and allows us to store custom objects or in our case out say structured data in our Hive database so the beautiful thing about Hive is that you can actually store structured and unstructured data in a box you can have different types of key pair uh key value pairs so but now in our case in this tutorial we're going to uh we have we're going to create structured data so for us to create that structured data we need to design a custom object or a data model for our two uh entities which is categories and and event the next thing we're going to look at will be the hive types and hi Fields so Hive types Define the data types Hive can you can store so what that we're going to do is that we're going to annotate our class or data models with Hive type so that we can inform that Hive that they should be able to store a a data of this type next will be high Fields High Fields specify the fields within our data models or also I may call them properties of our class and they're similar to columns in a table in a relational database and lastly we'll have a look at type adapters think of an adapter as a bridge or a connector that helps our data model to smoothly move in and out of the hi database so it essentially translates uh um our dat objects into a format that the high database can understand and store efficient and this will dynamically be generated for us you don't need to create it we don't need to create it manually but you don't need to worry about it unless um you need to create it manually where you need to add a few things for yourself uh but this is not supported in this tutorial so now let's proceed to our code and Implement all these terminologies that we' have talked about so back to our code uh we're going to proceed to create a new folder and we're going to call it Hive objects and inside here we're going to Define two uh data models the first one we'll call it category do dot so let's start with this it will handle the category entity that's involved in our application so first things first we'll just create a simple class and call it category so that's how we start next thing we're going to extend our class to The Hive object great so uh after doing that so when we store custom objects in Hive when we extend this Hive object it allows us to to manage our objects easily cuz this is a a custom object that we're creating for ourselves right uh hyp doesn't uh automatically know what it is it's not a primitive data type like in string and all that so now that we have that the next thing we're going to do we're going to annotate our class at hi type and then what you need to do is that for a hive type you need to pass in a type ID create uniqueness of this class so for in our case we're just going to enter one and then for the event we're going to enter two and another thing will be adapter name which you don't have to create cuz it will automatically pick the class name and um concatenate it with a text adapter uh so in short what I mean is that it will Define the type adapter for this specific class as category adapter so in case you want to change the name this is why you change it but you don't have to but I'll just add it here for those who want to later check on this uh so now we have our adapter name next thing we're going to do is Define our fields or Define our hi Fields right so the first thing the only thing we're going to do have in this category will be the name um in Hive they automatically uh Auto increment or create an ID that's Auto incremented for us as long as we don't add or Define it so our high field will be of type string and we'll name it name then we're going to define the Constructor of this uh class and just pass in name there we have it but now when we just call uh Define a variable string name H won't be able to understand it so we need to un at it as well High field and then we also need to give it an index where it specifies the index of that specific field so if we have another field uh which we'll get to see in the event uh class we need to add a unique index for that for each and every field that we have so it tells the it tells hi how to serialize and deserialize each and every field when saving or retrieving an object from the database so simply put uh the index just represents the position of the field in the serialization process so this is all about serialization and der serialization and this is implemented with the help of the type adapter as we talked about what the type adapter is all about so we are done with the class uh the category class but one thing we'll need to add because we need code generation done by the hi generator and the build Runner because what happens is that this code is generated in a way that hi will understand that's why we always have that so we're going to create a part line um uh line of code and then we're going to Define where the code that will be generated will be added or set so that's all we have to do so let's create the next class which which will be let's see event so we'll have event dot dot so we'll proceed the same way we'll create a simple class called event then we'll proceed to extend Hive object so there we have it next thing we're going to Define our we're going to annotate our class hi type and we're going to give you the type ID of two and you can still Define the adapter name which I'll set which I'll set to event adapter great so what will be our Fields uh our Fields so we'll start by uh creating a string category first in this first field we're just going to define it string but I'll get to show you what we're going to do this when you're talking about another Concept in hype so just enter that and then you have to make sure you notate this um fields or variables with hi field and then specify an index so we'll give it to zero so we're having an error cuz we haven't defined our Constructor okay now let's Define the rest another thing that we'll need to store in our event uh object event box will be date time and then we'll proceed to annotate it give it one let's add it in our Constructor next we'll have the event name let's annotate it and add it to our Constructor next we'll have the event description let's annotate it and add it to our Constructor next we're going to have file which will be of type uint 8 list and call it file let's annotate it and give it four and let's give it the option to for it to be nullable that means a user can create an event with or without a file next we're going to add uh so we have our high field and lastly will be a Boolean Bull type called completed and we'll annotate it as well and give it five so we'll just add this this dot file [Music] mm sorry this do completed so there we have it uh let's just delete this so here is our data model for our event box so we have all our fields and we've decided to give them the index from 0 to as a increment by one and then we have our Constructor our file will be nullable so that you can allow the user to create an event with or without a file we have extended our hi object so that we can be able to design a certain letter structure that Hive can understand and added our Hive type so we're good to go so that's simply how we are creating so let's just add uh there's one more thing um let's just add a a part line part and Define where we want the generated code to go to so that's done so we have our two data models now let's run our build Runner so we'll head over to the terminal and proceed to run that run build Runner build we had installed this package in the beginning so let's see great so our files have been created successfully now that we have our Hive objects or custom objects if I would if I may say um now we'll proceed to our main do dot we had already defined our box but now we can specify the type parameter we want it to hold a certain type okay so beginning from where we had defined our two boxes we're going to pass in a type parameter of type category so we'll just import it and our event will be of type event there we have it so the next thing we're going to do is we'll proceed to our category box where we had defined it we said a wait. open box we also need to specify it over here category and event so we have specified that and then another thing we want to do we want to register our adapters that one we have to do it manually um so we're going to come here and register our adapters hive. register adapter so that you can be able to use this type of adapter it comes in specific uh methods and and we talked about how important they are in the process of serialization and der serialization processes so we come here we need to specify the type parameter as well so we'll do that and then we add in category adapter there we have it and close that then we're going to register the same for the event adapter register adapter and we're going to pass in or the type parameter as event and we're going to call the event adapter and there we have it so we have inter implemented Hive objects we have worked with Hive types we have seen how hi types are what what hi type is uh we have created some hi fields for our specific classes or data models and we have registered our adapters and now we have updated our boxes not to just uh save any unstructured type of data but it has to be of type category and for event has to be event box has to be of type event so any other value that's passed in it will they will it will create an error of course so now let's proceed to the next part so now let's have a look at relationships creating relationships between boxes allows us to link different sets of data enabling more complex and organized data structures within Hive and we can do this using Hive list so let's go back to our code and get to do that so where we'll do this will be in our hyp objects where we had defined an the event class I had talked about this specific field so instead of having the string category we're going to link the event class with the category class through this field so how we're going to Define it we're going to give it the type hi list of type category and then we're going to define the name as category so that's what we're going to do we just import the category class from here so this is what we have imported so you can use it here so this is how we're going to create a relationship between the event uh box and the category box per se so because we have made a change definitely uh this has been detected so we need to CR the build Runner again so let's do that and we are good to go so now that we have that uh the next thing we're going to look at is crude operations let's dive into the creating and the reading updating and the deleting of data within our hi database so what we're how we're going to do that in back in our code we're going to create a simple file called Funk dot dot that will be our mixing class and inside there we're going to create all the meth functions that we're going to interact uh that will involve interacting with Hive methods and these functions are the ones that we're going to use to integrate into our app interface so for create we're going to create create a function that creates an event and then we're going to also create a function that creates a category so we're going to call our function add event there we have it and then we're going to proceed uh let's just add create a new event so inside here uh what are some of the things that we need we'll need an object of type event pass here so we just need to import that and we'll also need the value of type category past as well we'll get to see how we in reject the specific category inside the event uh event class or Hive object per se or into the box or add it into the box cuz we are creating so now let's work on this so This the simple way to do this is first we need to add um this C we need to add the category into this event so how we'll do that we just say event. category do add it's expecting of type category so we're going to say cut going to pass in our category next thing we're going to do is now add this specific event object that now holds the category as well we're going to add it into our event box so to do that we just we need an async uh to set an async in our function and then proceed to call an await and we'll say await event box which we'll get it from our main dot dot do add we just call the add method and then we proceed to pass the event and lastly what we need to do is make sure to call event do call the save method this save method is on that will persist this object so you have to add this if you don't add this it w't uh passess the data that you have added here so you won't find it in short great so next we're going to create create a function that creates a new category so we'll call it add category and all we need to pass is an object of type category so we'll proceed to call an a sync and then a wait then we'll call the category box the box that holds uh data of type category so we'll get it from Main do do. add category so this one is simply as that cuz it has the reason why we had to add an extra line and also we had we had to add these two lines is because we interacting with Hive list so we need to all make sure we persist the data but if it's just a simple class with just uh primitive data types you just call the add method so that's uh create so next we're going to read so for reading this case we're going to create a simple function uh what we want to read are events we're not reading all the events from the box we reading events by date if you if you recall in our when I was showcasing the app whenever you click a specific date it displays the events of that specific date so let's create a function called get uh get events by date by date and then what we're expecting to be returned is a type of list list of type event okay so now let's work on our function so what we need to be as an argument is date time cuz that's what we're going to use to go and get the events based on a specific uh date then we'll proceed to just uh Implement a a filter which uh which is we're going to call the event box pick all the values and then we're going to call the wear clause and for the wear CLA let's just change this to event we're going to say where event. dat is equals to date time and then we set it to list so let's just return this CU it will return a type of list event so that's how we do it and that's how uh queries are done so Hive does not really have a query language it's very limited as you have seen like for this example so for when it comes to quering in this tutorial you'll get to see it in this concept where we're using wear claes so this is the first one of that shows the concept of queries so now that we have looked at read let's look at um update so for update we're going to update an event so we're going to call the function update event great and then we're going to pass in the event object and the category object so all we're going to do now is we have our event we want to clear so a hive list is like a list uh a specific type of list defined by Hive so it's just look at it as a list so it may it can hold more than uh for this case a highl can hold more than one category uh even three but now what you want to do since we are updating and we're just dealing with one category for each event for just to make sure that uh the code is inserted properly we're clearing whatever is in the category first and then we're proceeding to add whatever the user has updated or whatever uh is currently being passed if they didn't update then it should pass the category that was there initially so what we're going to do we just going to say event category. add cut so we just cleared it first so that it doesn't even insert twice or Thrice the same categories twice or Thrice so we just cleared it then we've added it then after adding it we proceed to call our event box let me just add a Sync here and I'll close this eventbox do put so for update you use put so we're going to put it in a specific key and the key will get it from the object itself event key and then we're going to pass in the event cuz it will come now when it's updated and now that we have that cuz remember we're dealing with relationships here we need to persist this object so we just call the save method and we are done so that's update will perform update uh functionality only on the event then let's look at delete so we'll have a delete function sorry and inside uh all we need to we need to pass the event object so uh next we're going to just call the event box and call the delete uh method and then we pass in the event the key for that specific object and it will delete it so you'll notice that um the methods are quite uh minimal it helps in uh there isn't much there isn't uh a lot of logic being implemented cuz the methods do it all so we have done the crude operations another thing I want us to add would be we want uh to be able to allow the user to search for anything to search for event so let's create a simple function for that uh so we're going to expect the user to return or pass a search word and then so what we're going to do inside here we're going to uh go to our event box cuz we're going to be searching mainly on the event box we pick all the values and then we call the we close so we have the event and then we'll just say event Dot cuz mostly it will be of text format so we want event. event name do contains the search word let me just close the semicolon first or let's just pick this but now we want the event description do contains search word or another thing we would check is if event. category the first index which we're just storing one category for each each event dot name that contains the search word so we're checking through those specific Fields the name description or the category name if they have whichever word that the user has passed so what we want to return over here Will be a type of list event so we need to call in the to list so that we can be able to return that sorry so return that so it will be of type list event so there we have our search functionality another thing we can do is that uh we able to also like View events based on category so we can create a function for that get by category and what we need to be passed will be the category itself in type string so uh we're expecting to return a type of list of type event so we'll just say head over to our event box pick all the values and then use a wear Clause to search whatever we need to search so it will be event event. category zero do name do contains the category and we'll proceed to call to list there we have it so that's how we're going to get the list of events based on the category so with that we have performed all the operations and we have also gotten the chance to look at how queries are done in Hive it's as simple as that it's not as complex I don't know if some of you guys have interacted with EA I've gone through some of my Isa tutorials as you can see how extensive Isa can be and maybe that's one of the motiv that the author found in EA to actually improve the section on query language uh but as we have done we've done the crude and we've also done some filtering so that's simply that so let's proceed to the next part let's proceed to design our calendar up and integrate Hive into it displaying and interacting with the data we have stored within our Hive database onto the apps interface so back to our code we'll proceed to the main do do we've already run our application and we can view it on our simulator so in our main do dot we'll proceed to work on my app and I'll just delete the class homepage so we'll name our title calendar up and then we'll proceed to use the colors to De uh purple accent let's go with that it's not visible cuz we have removed the home so let's work on that so the next thing I'll do is create an initial route and then I'm going to Define my roots after so this root will represent a specific class let's just create it so I'll just create a new folder called widgets and inside widgets I'm going to create a file called calendar dot dot so inside this calendar we're going to create a state full widget called calendar and we're going to hold a scaold so let's proceed to inject this here and let's import it and there we have our white screen so now that we have that uh another thing I would like to add would be uh not terminal I'll just add the Google fonts this is optional great in our theme data I'm going to Define it so I'm going to Define the test theme text theme context Google fonts. popins do family font family there we we have it okay let's restart our app we are back so we have set that and our this will be represent the first rot that will show which is a calendar uh class another thing I would like to add while we're still on Main do dot will be we'll have some text fills and I would like to design the out line input border so or yet when we reach there we're going to actually add them so we'll end up coming back to main dot dot so now that we have our calendar let's design this so inside our scaffold we'll start by creating an app bar let's just remove the [Music] const and inside our up we'll just set the background let me just remove the just a quick one that just removes the flug the but at the top right top right okay so next thing is we going to have a title and our title will hold a text widget that says calendar up let's design it okay then we let's minimize the size that's better so next thing we're going to do we're just going to Center set Center title to false and then we're going to add our actions so what we're going to have will be an icon button there we have it let's just um set the color better next thing we're going to work on is the body now that we have left the upper now let's work on the body I will the main point will be the single child scroll View and inside the single child scroll view we'll have a child that holds a column so let's define our children so we'll start by displaying a calendar and for that we're going to import a certain package for that flatter Pub ad table calendar now let's use it in our code so we'll have table calendar and we're going to specify the first day as we'll use UTC and we'll pass in the year as 2023 month January day fast another thing that we need to specify will be the last day and we'll set it as date time UTC let's just say 2030 fast fast another thing that we need to specify is the focused day and then uh so let's define that at the top here so we're going to say date time day selected is equals to date time Dot UTC so we're going to have date time. now. here date time do now do month and date time dot now do day so that's how it looks so let's cck this and Define it here and then we also going to specify the current day as day selected so Focus day is that uh you will get to see on the calendar it will highlight a specific day that's what Focus day so focus on that specific day it should be the current day or the day the user selects and current day just means our today's day so we want to we we going to have a function that will manage uh whatever the user will select so there's a selected day and there's a focused day you may decide to you want to pick whatever the user has selected but you still want the forus day to be today so that's why the both of them are there so what we're going to do when the user selects we're going to say set State stay selected is equals to selected so in our case when a user selects a specific day it will highlight the focus day will be whatever the user has selected so we've just done it once by uh setting the state of this variable which has been set on both the two attributes so as you can see we are now able to see our calendar and if I decide to select a specific day as you can see it focuses on whatever the user has selected but if we decide to refresh it picks uh the current day which is 10th good so now we have our table calendar ready next thing we're going to do is we're going to create a simple uh before we create the a wiget that will handle the list of events let's create a simple uh outline button good and we're going to call it add event then let's just position it correctly and I think we can use an icon instead so if you use an icon the child will be label and then we need to define the icon so icon will be add something like uh that yep that's better now let's uh position our button using a line alignment align M do bottom right better but now we need to add some padding it's on the far right so we just going to say only right that's better so that will be the functionality where when we uh the button where when the user clicks it will direct us to a screen screen that will allow us to create a new event actually that screen will be the one that will allow us to create a new event to view an existing event to update an event and to delete so all our crude operations will be done in that one screen so let's finish on this far so after that what we need is to have over here we'll have a display of uh list of events for a specific uh day so if we look at our Simulator for example if I click on this the events that will be shown here will be the list of events for this specific day or if I click on this for that specific day so that's what we need and since we'll get to update the state of this more often than not I'll just create a new widget for it and call it event list dot dot so let's work on this uh specific file so we're going to have a stateless widget and call it event list and for event list we're going to have um we're going to have uh a list view so let me just remove const delete this so our list view will be we'll use Builder so we need number of factors here starting with item Builder and for item Builder we will return a card it will be a card and our card will hold a child so before we do anything let me just set the shrink up so that we don't have to come back here because of an error to do with a viewport Define physics to be never scrollable so that it only doesn't we don't want the list to scroll we want the page itself to scroll so we don't want any conflict on that part another thing that we'll do is we're going to come here and Define is it the item count we're going to define the item count right now let's just give it four because we want to see how the list looks like right and then uh for us to see it again let's add this to our calendar so we say const and then we'll proceed to import it great so there's nothing yet let's design our card so that we get to see something so I'll just uh have a container and then for a container we'll have a child called um we'll have a child which will be a row we'll be aligning items horizontally so first thing that we're going to have will be we want to display the day let's let's do that so we'll need column inside here so we're going to need the text date format oops sorry for date format we need a specific package let's install it flutter Pub add inl let's enter that okay so that's installed um just a minute now that we have it installed let's proceed so our column will hold two uh things will hold uh the day and the date so what we'll have is let me um so our text will be date format let's make sure we import we have imported it great so we're going to get the day in text format and then we're going to format uh sorry we're going to format our date date time do now let's do that uh so as you can see it shows the day Sunday uh so as you uh let's proceed as we continue to design our card so let me just set the um the background to white great and then let's just set the padding so it looks much better great uh we're getting there yep we're getting there so uh next thing is uh let me add the intrinsic height so that there's no uh we don't experience any error on this now that we have that so we have a column that holds the day now let's do the same for I'll pick this and I'll have for we want to see the date so we just use D there we have it so now let's design our two uh text widgets to do that we just uh set call style text Style so all we have to do is set the font weet and for the day we'll just set the font size to 20 and the color to Deep Purple accent let's see how that looks better so we have our day and we have our date next thing we're going to add is so we have our column there just going to add a divider but it will be a vertical divider set the color to Deep Purple accent we'll set the thickness to one indent 10 sorry indent 10 and end indent 10 me add this const yep next will be another column so we have a vertical divider here in that 10 and in that 10 why does it look too close let's see if I can add 20 here how it would look um okay I understand what's going on let me add a ping to the left yeah that's much better so now let's continue now that we have uh that set we'll have another another column that column will have um the event name let's say maybe uh birthday party and we'll have another one another child which will be on action chip that represent the category of that specific event so let's say maybe um home so let's design those two now that they're there so for birthday party we'll have uh I can the action chip cannot be seen let's work on that one first um so let's set the background to colors. De purple accent getting there the next thing we're going to do let me just add the quanti here first but because we have an onpressed we'll end up removing it and the next thing we need to add will be the color so just say we'll use the material State Property colors. Deep Purple accent there we have it nice uh so let's clean up on that so for Action chip on our text since we have home we can style it and give it the color colors do white let's see no uh [Music] nope then let's add on pressed with that we have our auction chip uh let's align our column that's better so what else uh let's uh set ping it's too close to the vertical divider now that's better so now we have our events taking the that we have four events we able to see them and let's close in by adding a few more things here I'll just remove this uh so let's continue so we'll add a spacer to stretch out items from the left and the right and we're going to add an button an icon keyboard Arrow right and give it a color colors. Deep Purple accent and there we have our final event list that's how it will look uh whenever we're displaying events so uh the next thing we're going to do now is instead of displaying four or hardcoding the four itself we're going to proceed to display what we need to get what we're getting from hi database right so um the first thing we're going to do is we need a few things from uh the calendar that will be passed as props over here uh so first things is let me just set a padding for this only at the top need spacing at the top let's set also at the right and left then another thing we're going to add would be it's called a valuable value listenable Builder it's it's a type of widget that's found in flatter that helps rebuild parts of your Y in response to changes in a value listenable object and this will be very effective when interacting with Hive uh so what before we add it uh into our main wiet uh let's proceed to check what we need to pass into our event list uh so we'll start by passing in um let's see I had mentioned that we're going to use that event list uh a lot so one of the things I will need is aoan a bull variable called view all so first we'll set it as false another thing that we'll need is filter are we going to use it for filtering yes so we're going to use it for filtering so we need to be able to handle whether whatever we're displaying is based on filtering or not so just set it as false fast um then another thing would be this um it's going to use also for searching purposes and also it's going to be used for for viewing all items so instead of confusing you let's just remove this this one's fast and whatever we need to pass the main thing that we need to pass will be the date so let's just pass that fast and see how it works uh instead of adding the other ones at the same time we'll get to see how we add them so for date we pass in daytime. UTC day selected dot Year Day selected do month and day selected dot day and for event list it's expecting appr props here so let's just Define it so that uh we get rid of the error so we'll have final date time date final date time date and then then we proceed to add it as required this. date let's remove the const there we have it next thing we're going to do now now that we have the date uh where is it uh now that we have the date over here let's now use it in our list view widget so now that we are here we're going to use a value listenable Builder we'll have a value listenable uh object that will hold the value uh that it receives from The Hive uh database and it notifies its listeners with the values that has been changed so that's how we're going to update our state in our event list um so how we do that is first things first we'll need to we're this is where now we're going to interact with uh our event our Hive objects and also our boxes so let me just import them first so we'll have main dot dot that's where our boxes are and then we're going to use um The Hive object event so let's just add it here now let's design our value a value listenable Builder so it will be return value listenable Builder okay so now we have that um next thing we're going to design the Builder so for Builder we are expecting a few things but now we need to specify the type so our type will be box event of type event so we're not focusing we're only focusing on the event um box so with that let's proceed to on our Builder we'll pass in the context the box which will'll add it over yeah the box and then we'll also add the widget then we're going to pick all these that we had created we'll pick all this paste it here and then for Value listenable we're going to pass in event box do listenable wait [Music] um I just missed okay so here's a value value uh listenable Builder and this is a value listenable object that's the one that holds the values that will be returned from the event box in the hive database and then it will trigger the UI update I hope that makes sense uh so now that we have this so this is one that's going to trigger for us the UI uh whenever any change happens in the event box good so we still have our lists displayed and what we want to get is whatever is returned from from hive itself so all that we're going to do now we're going to call create a variable of type or that's at least a object of type event and then we're going to call it events is equals to remember we had designed the meth the functions that we're going to use I'm just going to inject uh the mixing class here great and then we just continue to call the specific function that we need which will be um in this case actually we don't need this cuz all I'm going to do is call the box which is a event box call all the values and set them to list I'll get to show you where we're going to use the a function in the specific um in the mixing class so now when we have this this variable will hold all the list of events uh that's in the event box that's what it means so let's do a small check so if events um uh length is equals to zero we'll do something over here else we can return whatever we have designed okay so how do we do this um how do we do this whe it's empty so I'm going to install a specific a common uh package I tend to install over here that's called flatter PB add empty widget sorry empty widget that's the one we're going to use to design for or us what to display to the user if there's no list available there's no event um great so now back to our screen all that we need to do is design it so instead of returning um leaving it empty you will design an empty widget and inside this empty widget we'll have we'll set the images now we'll pick a package image which comes in build by the we by the package then we Define the title as calendar subtitle will say no events to display then for Ty textile we can use we'll set the font size to 22 and then we set the color let's define the font weight there we have it and then after that we can also design the subtitle so we'll have a text style and just set the font size to 14 and the color to colors [Music] color there we have it so if we save we get to see it it's quite big let me try and minimize it um ref Factor let me P it instead mhm left [Music] right or better yet uh let me just remove this and put it in a sized box let's see how that looks that's better but it's looks squeezed but better so we able to review that uh from the calendar up no events to display the calendar up is quite big let me see if I can minimize it to 16 uh yeah that's that's that's better so we being told that there no events to display based on this and if we click on this no events to display so it's reading from the event box so for us to see some list of events the next acttion to do is to create the screen for creating an event right so now let's uh get leave this place head over to our widgets folder and create a new file called event dot dot and create our form so we'll have a stateful widget and call it a vent details and we'll proceed to design a scaffold great so let me remove the cons cuz we'll design the upper so our upper let me just add the upper then we we get to view the screen so I'll just set the background to colors the Deep oops let's have that fast and let's go back to our main do Dot and we add a new root so our root we'll call it event details which is this let me just uh design design first the class that will hold our arguments so have class event arguments so what we need to be passed to us will be the event object itself oops wait what will need to be passed will be the date time so the day selected and that's what we're going to use to store the event so let's add the Constructor so there we have it another thing we need to add is our root name I'll just call it event now back to main do dot let's define our root so it will be event detail do root name so let's import this class the TRU name there we have it and let's proceed to First the calendar dot dot and let's uh navigate to our new screen so we'll just call navigator to push name named now event uh we'll just proceed to call this class that will handle our arguments so just say event details do root name and then Define arguments it will be event arguments and what we'll be passing is the day selected which is already we already have a variable for that so we're good to go so if I decide to refresh this and click on add event there we have our plain screen now let's work on it we'll start by defining the title on the uper so we'll have a title that holds a text wiget call it event and then we're going to Define our foreground save that there we have it then we just Define Center we don't have to do that next thing we're going to do is we're going to Define some actions so in this class we're going to handle creating a new event we'll be able to read an existing event and we'll be able to update an existing event and delete an existing event so this specific class is doing a lot uh for main the for main operations so now for actions we're going to add a button for update and delete before that let me just St this quickly that's better then let's add our autions so for options we'll have an icon button con icon icons. save that's the one that's going to handle everything uh update the update operation and then we're going to proceed to have another one for delete there we have it great um so we'll come and proceed we'll come and enter the logic over here uh first let's finish up on designing the whole screen and so next thing will be our body so our body will hold a form let's give it a key we'll give it a key then we'll proceed to define a child and our child will be a call colum that will hold children vertically and we'll start by a text let's say select category let's design it and we'll give it a color then let's position it from the far left and then we'll add padding to our color to our form so there we have it I just selected the wrong theme there we have it now let's work on the next thing so the next thing will be a row row and for a row we'll have two things we'll have the option a drop down that displays a list of categories from the category box in the H database and then we'll also have an action where the user can be able to add a new category to the category box in the hype database okay so the first thing we'll have is the drop- down and uh for this drop down it will uh we're going to wrap it with a value listenable Builder as well so it will be listening to any changes that are happening in the category box and updates our UI triggers the UI which is our drop down to have all the list of categories from the category box so we're just going to call that the value listenable Builder so let's define the type here which will be box C category sorry about that uh box category let just import hyp there so now that we have that our value listenable we listen the category box for any changes we have that now let's walk on our Builder so our Builder will hold context box and widget now let's work on our return so our return will be a drop- down drop down button great so let's just handle the unchanged uh but let's just handle the items first so items will be we'll pick the all the values in the category box we'll pick all the values from the category box and then we get the list of event list of categories now that we have that the next thing we're going to do is map it so we're going to have uh of type drop drop down menu item here we have it of type category there we have it let's see I just type category there we have it pass to list and then inside here now we're going to have a category value or our value of type category so what we're going to do now that we have it a set of an arrow function function let's proceed and set it like that and now design our drop- down menu item and our drop down menu item the child will be a text widget that will hold value remember value is a category object and the category has a property called name to get the name of the category and another thing that will manage is the value there we have it which will be this value that's what we're setting here now that we have this another thing will be let's handle the unchanged before we do that we need a value here let's set the variable for that so it will be of type category and we'll call it drop down value we'll pick it from there and paste it here great and then we'll handle unchanged to be of type category new value so all we're just doing is setting the state depending on what the user has picked there we have it so now there's nothing to display but better yet we need to we're going to add is expanded that once they values uh we can be able to view them so we having an issue with uh the constraint terms of width so to do that we just proceed to a sized box uh we proceed to a value uh listenable and add a sized box so that we manage the width so just Define the width here give it half of the width of the screen if you refresh that and then I click on add event as you can see and now okay um let's just add padding for our row so the work doesn't look too congested so we just set it on top and bottom that's better now that we have that uh we're going to now next add our elevated button this elevated button will be the one that when the user clicks they able to add a new uh category uh let me just add a few athetics here um color add for the drop [Music] down then just [Music] icon okay so we're done with the drop down now you can leave that and then now we go to our create the elevated button and then we're going to have an icon icons. add there we have it uh let's just style it let's give it a shape of circle order and then we proceed just set the background to the theme color that we are working with and the foreground will be white that's better and then now that we have that uh on our row let's just Define our main axis to be space between beautiful okay so let's work on this part first uh so now we have the elevated button and we've said we want to allow the user to create a new but a new uh category so let's create a function that will handle that we'll just come here let's create a new function called create new category and then I'll just pass it to the onpressed here I it stay there now let's work on this function we'll need uh the build context because we going to create an alert dialog uh so we need the same context uh for that so we'll say return show dialogue create and then for our Builder going to pass in the context and then we're going to return an aler dialogue now let's design on AER dialogue we'll have a title that will call the text widget that says new category and then let's style it um so we're going to have set the font weight to bold and set the size to 14 that's the title next we're going to have the content and our content will hold a text form field so let's design let's give it um controller so we'll just Define a controller here controller and call it category controller is equals to text editing controller speak that proceed to our L dialogue which is over here Define the controller we have an error somewhere I just need to check where oh yeah we need to pass the context okay we're good okay then um in our text form field we just let's just do a decoration on it and just Define the input decoration inside idea will Define the Border as outline input order then let's define the label text that says add category and lastly let's Design This label so it will be text style and we'll give it the color colors do Deep Purple accent before we get to see how it looks let's add the actions so for actions we'll have two we'll have an outlined button and we'll have a uh first let's design it and it will just State uh conso and once you click on conso all we want you to do is do a navigator do pop great let's just design it a little bit style from and we're going to give it a foreground color of Deep Purple accent there we have it now let's design the second one which is elevated button and for our child we're going to define the text widget and it will just say add let's define the style elevated button style from and we're just going to set the background as our theme color okay so we have that let's refresh this and see how that looks so when you click cck on add event when you click on this there is our aler dialogue so you want when the user enters an add category when you click on ADD it should add into the category box in the high database and because we have a value listenable Builder uh here we'll be able to see it populate the it will trigger the UI and be able to see the list of categories that we have inserted automatically uh for OD let me just uh let's see colors. white so you get to see the text great now let's add the logic so where we're going to add the logic will be onpressed and all we have to do let me first check if we injected the mixing class uh here with funk remember we already designed this so back here in our unpressed we'll proceed to check if the category controller. text is not empty let's proceed to call the add category function in our mixing class and what it needs is the string the category name that is so pass in the category controller. text there we have it it uh let's see let's see oh sorry oh we had decided to pass the C an object of type category okay that's fine that's fine that's fine so all we have to do is call design it and the name will be that okay and then once we've done that we just do a navigator do pop so here's the idea the moment we like let me just refresh this again uh the idea is the moment we click on this and add this should also populate so there are two things we expecting so let's see how that goes so let's create a new category called home and then we add as you can see we able to see it and even if I refresh it um and go back to add event I'll be able to see the list of categories this is being read from hive itself let's create another category like um work and add and as you can see we're able to see our categories now let's work on the next we already started we already we already seeing how uh we're already interacting with Hive so that's awesome now that we have we done with our row which was this this whole thing and let's proceed to create our other items in our form so we'll need uh to display the day that the user has selected uh so here is a catch uh let's see uh when the user selects uh 12th add event it should show 12th if the user selects 11th and we add an event we should pick whatever the user has selected in short so let's do that uh we just this is just more of a dis play um so we'll just have a row and then we're going to have an icon that represents the date let's give it a color colors. deep purple and then another thing we're going to have will be now the text and we'll just say date format we're going to use a date format let's import the package and move this date format dot let's design how we want the date to be displayed more readable for the user in this case CU you just displaying it and it's easier for them to confirm whether that's what the DAT that they actually wanted to pick so remember we had uh expect we expect a props to be passed here so let's handle it over here we hadn't we hadn't specified that or picked or got we didn't get the arguments that are being passed to this root so let's get it from here is equals to model root do of context settings arguments as event arguments there we have it so this is what we're going to use let's go back here and pass that dot day selected as you can see now that we have that um let's just sty it a little bit or even if we save right now as you can see we get to see the day that has been seel selected let me go back and pick maybe 13th as you can see we get to see it let me just finish up on styling the text a little bit so style text style let me set the font we and then Define the color much better and then let me just Define the Ping I think that's better so that displays the date that the user has selected let's proceed to the next one which will be a text form field let's define the controller for it this will be for for entering the event name let me also add the one for event description right here so that we get to design them together event description control okay back to our text form field which is here let's add our controller then we let's style it a label will be label text will be event enter event name and then the label Style just have set the color so there we have it uh great so get to enter event name um before we do anything uh let me just add the Ping to it and then I'm just going to pick whatever I have designed here so that we don't have to recreate the same thing again I just replace this with event description and there we have it good so next thing will be we want to allow the user to upload a file so you're just going to use a list Style and what this list style will do uh we're going to have a title that says upload file and then our trailing will be an icon icons dot um maybe does that look yep uhhuh then um we'll have on top great so let me sty this a little bit uh so we'll have a title the tail color let's set it to our theme color our text color let's say set it to White our icon color let's set it to White how is that so far great um then what else yep I think that's all so what we're going to do is we're going to install a package uh flatter PB add file P that will help us in handling uh uploading files or picking files from a gallery create now back to our project so on top let's work on this so for on top what we want to do first we'll set this to a sync we'll call a file picker pick the result and Define it as result is equals to do a wait and call our file picker. platform. pick files that's all we are doing and then we'll proceed to check if the result is not equal to null let's proceed to define a file called file and then pick the path of that image and upload it to this file type so let's just import this okay so next thing we need a type of uint8 list I know I'm pronouncing it very wrong in the wrong way but you get what I mean you in there we have it and Define it as let's give it the name image bytes so this is where we're going to store whatever the user has uh picked is equals to file dot we read them as Byes and there we have it we're just going to handle set State because I want when we click on this we able to see the image that the user has but before we set that set State let's just set up uh that section that we're talking about um let's see uh is there anything that's missing so if the result we able to read that so now after the light list style let's define whatever I'm talking about where we'll have image do memory and it will pick whatever has been pass defined which is image bytes and then we'll just proceed to size it just to make sure that it doesn't occupy the whole screen but what if uh yeah that's the that that's what I wanted us to handle so what if the image bites is null what do we do so I'm just going to handle that is not equal to null that's when we handle that else we just return a sized box that's shrunk we shrink it and there we have it so let's refresh this and see how that works so when I click on add event and I click on upload file missing plugging expectation let's rerun this application again now let's do it again add event if you click upload file it opens for us our gallery and we'll be able to select something so if you select on one okay so it's not displaying and I think I know why we had said we'll handle this state here let's just do that and Save and we get to see the image that we have and we're holding it in a specific variable with that done let's Now work on the next thing which will be to allow the user to set whether they have completed the uh if the event has is fulfilled or not so that will be a Boolean and we're going to use a switch list tile so for our value we're going to define a variable here that will store the data for that completed is equals to fult then we're going to use this over here and set it there and then we're going to proceed to handle on change where we're just going to set State and let the completed variable hold what whatever the user has set there we have it but now we need to add a text for it so there's that there's that let's give a title const text event completed and then let's sty it color colors. de purple accent font size there we have it great and lastly we now need the button almost done so let's just Define our elevated button and then our child will be a text add so let's design our button style elevated button do style from so we Define the foreground as white because we're going to set the background as deep sorry de purle accent and then let's proceed to define the shape const rounded rectangle border and then let's define the fixed size to be size media query. of context defining the width and then we'll Define the height as 50 that looks much better and then now let's align position our button properly so we just going to use the Align widget alignment alignment. Center sorry alignment. Center better let's just set the Ping at the top perfect so that's done so now let's work on the logic when we click on on pressed okay so what we want to do is first we're going to set this to a sync and then we're going to check if our form key the current state is valid that is there are values within the the values have been inserted and the drop- down value is not equal to null that means the user has selected a category we proceed to call our add event function and it's expecting an event object and a category object so let's design our event object so there it is and then we'll also have a category object so let's input the necess sorry so for event in this section what we're going to do we're going to uh Define that we're going to pass in a hive list of type category so you're going to have an hi list that will contain this uh a category inside and then when we get head over to our function this is where now we add that specific category but first you have to Def call this you have to initiate that specific um that specific field this field need to enter this first so another way to do it is to specify this in the event in this specific function but we just injected it straight here so that when we come here the next thing we do is just adding that specific category the next thing we're going to do we're trying to avoid to adding logic we want the Lo all the logic to be in the mixing class so the next thing we need is the date so it will be date time we are uh formatting our date time to UTC so how we'll do that is let me enter this so we'll pick the selected date wait uh the DAT uh let's see p in our when we calling the from the calendar when we calling the event let's see I think I need to check on something so when we're passing this already the date time is in UTC great so all we have to do is proceed to call the argument is it they selected or dat let's see oh this is event list oh my goodness also I'm supposed to look at this St selected yes so that's okay checking the wrong thing so you're picking whatever has been passed which is day selected which as we can see from the calendar when you're passing it it's already set to is it let me see uh they selected let go selected day now I think we need to format it to you um I think it's in UTC if I'm not wrong let's see I'm supposed to check there so for day selected I think we'll format this just to make sure that we have the right they selected I'll just copy all this yeah just to make sure that it's actually converted then for event name we get it from event name to text event description we'll get it from event description controller and then completed that's where we have it then for category we're going to specify the drop- down value wait um it's this is already a category object so so that's what we're supposed to pass the drop down value that it's already a category object that's what we're going to pass whatever the user has selected so now that we've done that we just need to do um it's a more of a user experience so let's inform the user if they have been able to add so I'll just install add in a new package called Pub add state just a lot so that I can use it so what I'm going to do is check if the context is mounted we're going to call this a specific quet so we'll just call it status a lot and all we do is do show we passing the context then we passing the duration which will just give it a seconds of two 2 seconds and then we pass in the title which we'll call it calendar up then we'll pass in a subtitle and say event added then we'll proceed to specify an icon configuration icon icons. done and then we're going to add Max width to 60 so there we have it let's just refresh this and then after doing that we're going to proceed to do a navigator do pop so we'll head over to the main screen great so here's the idea guys so when we head over here we'll proceed to create our event okay but once we have created it when we do a navigator po come back to our screen in this uh the specific event day that we had selected should be able to view the event over here so let's try that so let's pick home and do deep cleaning a lot need 5 hours then let's upload a simple file and then we leave it as not completed so let's click on ADD okay so it's viewing the event list cuz it it has detected that there's data in the event uh box but as you can see we did not uh specify it still has like the dummy data so let's handle that so I'll just close this this will be so brief uh so all I have to do is in our list view I think we have the item count in state instead of four we'll have events which is uh this do length so let's let's just pass that fast and see so as you can see it has one event in the event box great now let's format it to get the exact information that we need uh starting with um where is it we start with the date time so for the DAT time we'll just pass in form uh events we pick the index and we pick date that's all we're doing so let's copy this and uh do the same to that so if you click on Save it's producing the right thing which is Sunday 10th as you can see from the calendar itself and then the next thing we're going to update is a birthday party text and we'll have events. index. event name and then we just remove the cons there we have it deep cleaning and then lastly we'll have events. index. category and it's a hive list so it's like a list so we need to pick index 0. name move the const press in the const and there we have it which is home that's correct so we able to say let's let's create uh a few more so add event let me select on a different day like on a Friday add event so as you can see it's picking the correct information work uh demo presentation preparation let's upload a file there and then let's uh set it as ad so as you can see uh it's displaying all of them no matter which day selected so that's another thing we'll need to handle on the event list so let me show you how to do that so over at the event list we were getting our list events by calling box. values. to list we'll get to use that yes but we need to um use a specific uh function to be able to get based by date we had designed that if you remember so instead of this I'll just comment it and what we're going to call is get events by date and then we'll proceed to call date so if you save on that as you can see it's displaying correctly if I select on eth it's able to display the event that we had created for 8th 10th it's correct if it's any other there's no event on these other ones but on 10th it's there so our function is working well great so the next thing we're going to do is um we're able to add an event perfectly so now what you want I mentioned that this uh specific screen will handle the whole crude all the crude operations so the next thing we're going to do we want to be able to click and view details about this so we want to read uh information about this specific event right so now what we're going to do is um back in our event details class we're going to manage a few things so for event list first let's add an um either gesture detector or an inal on our card over here let's add an inl so that when a user selects we able to handle what it what should happen next so what we're going to do is we're going to direct the user to the event details uh screen which is where we add an event but we'll pass for it a few uh parameters okay and for us to be able to know first let me just call Navigator push named and then we have the event details and then we have some arguments event arguments there we have it but what we're going to pass here is event events let me see events pi the index. date we're going to pick the date of this um specific event and pass it to the event details great uh so if we click on let's just refresh the changes that we've made if I click on this on 10th if I click on this it will show 10th let me show again if we click on E it should show e uh when we're proceeding to click over here okay but if you click on 12th and we click on ADD Advent it will pick so just taking whatever so in this section you're also handling the part when we click on this specific it displays the correct date of that specific event now let's add uh the information of this event the rest of the information of this event so on I event list uh we'll proceed to actually let's first create those props uh that we're expecting here we have an event we need an event object the event the object of type event that that specific event that we have clicked we need it so we can display and then another thing that we need is a bull that we'll call view just to inform that specific the event details screen that this is we are viewing in some information so if we viewing we want to display the information of this specific event within the different parts from selecting category it shows the specific category of that event the event name the event is so we able to inut uh the information of that event uh so that's what it it's all about so now let's add them in our Constructor so we'll have required this do View and then we'll have this do event cuz you set it to nullable so we don't uh we have that so next thing now that we have this let's head over here it will require a few parameters so for view we're going to say true and then for event we'll pass in event index like that so that will hold the object of this specific event we're expecting another error here cuz we've added a few more things which is a view so here we'll just say false we're not handling that on the calendar class so if you refresh this uh we won't see anything yet because now we're not handling it the event details let's do that so once we have this what we want to do is say if the arguments or the prop view is true we want to manage uh the information in that specific class so we'll start by the drop- down so the drop down value will be a. event category Z I'll just refresh this let's see if it's actually working so this is home as you can see it has selected as home we had Friday which was work as you can see I hope it makes sense now what I'm trying to do and then let's add the rest uh so we'll have selected date we already have date handled so we need the event name controller. text is equals to a. event do event name and then let's add the same for event description so as you can see our information is being inputed and then another thing we need is image bytes cuz we are storing the images in our Hye database so we'll have event do file let's uh Let me refresh that M so I will handle that in a few so the next thing will be completed is equals to ug. event completed and there we have it so and then uh just to make sure we're not messing things up else if it's not viewing we just want to make sure that uh the um is it the selected day um no I think everything is okay so so if if it's we actually want to view or read perform the read operation we want all this to be set as so but we can't see the image why let's see um so the reason why we're not able to see the file remember we had set the file as nullable we can create an event without um file so so we didn't add it here when we creating the object that's uh what happened uh so we need to handle that let me see let me see let me see let me see um this class of ours I need to pass in here this dot file in our event uh in our Hive object or in our custom object event I've just added this dot file so we expect it passed and if it's not passed it's still okay cuz it's notable but we expect an error cuz we have changed code so let's run the that build Runner and we don't have any other errors within here so it should work fast so just run do run build Runner done almost um done so in our event now when we adding an event we have that option to add a file we didn't have it so that's why our events are the images that we uploaded were not stored let's create another event uh so that you can see it happen so let's add an event and then we'll select um walk uh peer programming uh work on the basics let's upload a file there we have it and add so if we decide to check on peer programming here's our image yes that's what we wanted okay now let's uh what else do we need to make sure that it's handled so completed it set all of them are false we want to Now work on the update um feature so I think that's all but now when we are viewing we don't want the add button to be active cuz we don't want want to add it again it's already existing so either we want to delete it or update that specific event so what we're going to do is um let's handle it over here and just say we pick uh the attribute that's being ped which is View and check if it's actually true set the button to null else let's proceed with the function so it look something yes it should look something like that so we're not supposed to add the event again uh so we're just uh setting that as null and now we've been able to read an operation we perform a read operation right so the next thing will be to update so we already have our event we already have the information displayed we can change a few things and then we see if we can update and the update uh button the one that performs that is this so let's add uh logic to it and we should be done uh so where is our over here it's at the top and the one of the actions here we have it so you have this save let's walk on it let's create a simple function over here so one of our functions are this and we're going to call it update exist ing event we'll need the arguments and the build context inside here we're just going to Peck the arguments each and everyone and then we're going to initialize them to whatever the user may have changed we pick every category every property and check and add to the existing uh properties so a event do date is equals to so that one won't change really but let's just add it let's handle every property in the event uh class so event name will be whatever the user will will whatever will be displayed in the event name controller same thing for event description user can also update a file and even set if the events are completed or not now that we have defined that let's call the update event from our mixing class and then we'll pass the new event the updated event of object and then for category remember we're passing the category separately then we handle it in the function the update event function now that we have done that we just want to add a message to the send a message to the user simply do show let's define the duration seconds title subtitle event updated configuration and lastly the mark withd and after that we'll do a navigator do pop great let's refresh up and see uh if you're able to update so there's uh deep cleaning we get to see the information uh oh we didn't we uploaded a file but that was before we made a change so let's try and upload a file [Music] here we should check why it's not displaying fast um so I'm going to handle another check so that however much we are updating it shouldn't uh reset the state to whatever we passed here so we just want to do a specific check with just a bullan variable I'm going to do this I'm going to specify bull viewed is equals to false so initially so once we have been able to set this state the state of all these ones we want to set the view to true so it doesn't always have to return the state to whatever this is that means the user will never have a chance to update the information that is in that form so and then now when we come here we say if ask. view that means if it is true and it has not been viewed once that's when it shows a state but of course as you can see f it false we come here ask. view we set the state then we set it to true that means here if it's actually false so since we have set it to true no longer set the state again and again so the user has the option to actually um change information over here so that's all I've done it's just a small check so let's go back to and do it again so we have home I was trying to upload a file let's see how that goes as you can see now we can upload our file what it was doing is that I was uploading a file but now it is resetting that state of the variable that handles the file to the initial one but now we able to handle that uh let's change to deep cleaning session I maybe need uh 7 hours with family and let's say completed and then we click on update oh wow I just remembered something uh we created a very beautiful function over here we haven't passed it crazy right okay so uh we just proceed to call it here and we want to make sure that um only when the this uh property the props view is true do we proceed to do this else set it to null just to manage when you can actually uh call that specific um use that specific icon button so whatever is needed here is the other the arguments and the context so we've saved that so let's try again to save and event has been updated as you can see the cleaning session and if you come inside here I've added more information uh we had another event here demo and i' would like to add a new category like School add and then I proceed to change this event to school and uh yeah let's just save that so as you can see updates to school so update operations are working in the hive database so the next thing we want to do is now delete so what I'm going to do before I forget now let me just create the function here so it will be delete method and what I'll need will be the build context and the event arguments now let's work on this so what we want to do for user experience we just want to ask the user if they're sure they if they really want to delete it right we wouldn't want a user to just click and then it deletes what if they didn't want to it was a mistake or something so we need to confirm with a user fast right so we'll pass in the build context and then inside here we're going to return an alert dialogue already pass the that okay that's okay then we're going to design our aler dialogue so we will have const text and our text will be the calendar let's design it give it a font weight font we bold and font size 14 content we just ask the user do you want to delete oh boy sorry do you want to delete this event yeah and then we'll just put to add our actions so our actions will be an elevated button const text that says yes and we'll have an outlined button const text no okay uh for yes we'll proceed to call the delete uh how do we do this in our Funk or in our mixing class we had the delete uh event that's what we need comes we can't see it okay I know why our function is in the wrong place should be inside here so we need the delete event and we need to pass the object so we'll pass in the argument and specify it and pick the specific event there we have it and then we'll just proceed to design the user experience where we inform the user that um it has been deleted so I'll just do this quickly and then we make sure we do a navigator do pop and another Navigator pop cuz this will help us get out of the alert dialogue but we also need to go back to the main screen cuz this we're expecting this event to be deleted so that's simply how we're going to do it let me style let's style the button elevated button let's style from and set the background color to our theme color there we have it for onpressed all we have to do is call Navigator do pop there we have it and then let's give it a style outlined button do style from and we'll Define the foreground as deep purple accent okay I think that's uh we're good to go so let me just make sure I've called this method where it's supposed to be called here we have it and we can proceed to call it so we'll pass in the context the arguments and we want to make sure that this is only being called when we are reviewing a specific event else null so let's refresh that and proceed to so let's go on 10th we have two events let's try and delete the deep cleaning one so when you click on delete it asks us do you want to delete this event uh we can proceed to say Yes um so when I click on yes it will delete for us remember the value listener uh Builder it's actually listening to a box so you find that it automatically updates by itself so we've been able to perform the delete operation which is great so this is what's performing the handling of State the value listenable Builder great so we have uh the create read uh update and delete the next thing we're going to do now is let's see if we are done with the whole so we have delete update let's update this event to completed so when you click on this as you can see our events are our records are being updated in the hype database properly we have our ad so we can handle this search but there's just a let me just check if there's something um maybe something small that we can update let me show you um back to our event dot dot upload file let's handle this in a way that uh for this trailing let me show you how we can do it we can say if images sorry if images do oh my goodness if image bytes dot um is not equal to null icons so we're just trying to create some user experience here let me show you how that works so as you can see there's an image so it takes off let me create a new one again add an event let's select work um publish app need to be done soon so as you can see the icon uh is currently asking the user to upload so when you click on this and click on that a specific image it shows that it has uploaded that's just the only effect I wanted to add so there we have it great now that we done let's proceed to an important feature which is search we w't be able to allow the user to search a specific event so back to our calendar class oops here we have it we had created a icon button for that so we're going to handle some as as uh some State over here uh what we're going to do is we'll have a bullion variable bull such is equals to false then you proceed here and set State such is equals to true now that we've handled that what we want to do is on our uper we want to check if the search is equals to true we want to define a text field sorry let's just Define the text editing controller for it and call it search controller and then uh text editing controller there we have it then we pass the controller sorry okay and then uh the next thing we're going to do let's just add a Statics to this so you can view it from the app bar and we want to manage on change whatever the user insert we use that to search in the hype database and then we're going to uh Define the style and we'll have of color colors. white lastly let's define the decoration that informs the user to search here let's just add this style which will be font weight and font size there we have it so um once we have that let's try and see how that looks so when I click on search to allow me to enter some text here that's what we have done uh but uh I can see we can't view that specific text let me set the color colors. white now we can see it great the next thing I'm going to do is where is our uh here is our icon icon button so what I'm also going to do so that you can be able to go back to the previous state I'm going to check if the search is true review the icon search if the search is true we want to revert um have another icon button that can help us revert back so let me show you what I mean so this will be cancel and then our search will be false that's what I mean so it will change the icon to this so that when I click on this it Returns the state so we'll be able to have our up back that's just part of it and then the next thing we're going to do is for the process of searching we don't want to see the calendar so the the only thing I'm going the simple way to do this I'm going to wrap it with a visibility widget and then for the visible attribute I'm just going to pass in if the search is not true so that means if it's false so if I decide to click on this we shouldn't see the calendar and also I shouldn't see this as well the r event so I'll also handle that or better yet uh combine this two I should I should have done that before setting their visibility instead of having it twice just pick uh these two and put them in a column and then I now set the visibility visibility visible if the search is not true that means if it's false right and if I go back we'll get to see our main screen so it's still it's still there so when the user searches so what are we supposed to display cuz right now it's just displaying the list of events for this specific date but what we need here in this process is to see all the events and then as the user changes we're able to it's able to filter through based on what the user has inserted so let's work on that so we'll need to another argument or another props we'll need to pass another props here and I think I'll call it um first let's handle the part where we need to view all this right okay so uh we'll need a bull let's call uh it view all and set it as false first and then on our event list we'll add let's first create we're supposed to create it first on the event list so that it expects it so all I'm going to do is Define a prop that's expected called all and just say required this do all and then I'll come here and say all view all great um So based on whatever we pass here so when I click on search which is uh this when I click on search the search is equals to true and view all will be equal to true what I'm saying is that I want to view all of them right um let me check on is there anywhere else we're using event list okay so when we click on search that's when the view all will be true so back to our event list um we're going to handle this part remember we didn't we had commented this part this is where we're going to we're going to need it in this process so all I'm doing is do a check a. all sorry all if all is true that means I want to see all of them that's when I call this that else let's call by date that's all I've done uh so let me just refresh this so that we see if our app will respond accordingly so now we're seeing the list of events for a specific date right if you click on this it should show us all the list of events and currently we have just just created three so it's working great now the next thing we want to do is now handle whatever the user will insert where will we find this here it is on change but we'll need uh on change if on change let's set State and what we're going to set State on is what is basically going to do here first we're going to handle a state where we're telling event list class that we don't want to view all so we're going to specify view all as false we don't to we don't to view all lists and then we're going to have another prop here to to inform the event list class that what we're doing here is filtering so just call it filter let me just add this required the filter and then the reason why we need this is cuz I'm going to we're going to use a different function there get events by date there's this other one that gets all of them but now we want to do another check if filter is true if you're actually filtering let's proceed to call the search event function that we had designed so search event let me just save that and what the search event expects is a search word right so we also need to pass that as a props here so string search ter and when you pass required this do search term and this is what we're going to pass here so that's what we're doing so we're expecting an error here cuz it's expecting some information so we'll also have a bull filter is equals to false so the moment I start changing or the user starts entering something we want to set the fuel tpe is equals to true and then over here on our event list we need to pass a few things filter will be whatever will hold be held in the filter variable and then we also need a search term which will be whatever will be in the controller there we have it so let's see if this will change accordingly so you're searching we able to see all the events so if I decide to search demo or if I decide to search something like P so let's go back to our function here uh search event so we're saying where event name do contains um let's see uh let me see how this is working again contain name mhm let me see um what if I try demo it's the concept of uppercase and lower case okay let's see uh so whatever we had was okay so when I look for uh it's it's Cas uh sensitive so now if I decide to search maybe let's search for work I'll get it uh if I enter it properly uh publish there we have it so our sarch is working and we're using three factors we're using event name event description and category to search through so we're done with search another factor that we need to check on would be when I click on this I want to be able to see a list of events for this specific um category so let's do that so to avoid manipul in the event list so much I'm just going to recreate another class similar to this one but now it's going to handle things to do with a category so let's create a new file call it um category dot dot and then we're going to call our class category detail so we're going to hold a scaffold we'll have a knp bar Define the background let's first pass it so we get to see what we are designing um this will'll find it we'll need to manage it in our event list we had the option to add an uh what was it an action chip here we have it here's our action chip so when we click on it we need it to we need to navigate to our new uh class or new screen and then it will display the events based on the of category that we have selected that's purely what it's doing it's part of the filtering process so we'll just do a navigator but because this is a scaffold we need to inject it um at the root here so we'll have category details and then we need to specify the root St cont root name is equals to category and we need the arguments category argument category argument all we need is that string the category name and let's create the Constructor there we have it so back to our main rout name context category detail let's leave this now back here we say navigator do push named we'll Define our category detail and then specify the arguments so we'll have category category argument and we'll pass in the name of the uh the name of the of the category that the specific event is in the specific event I will select so it will be events index the first index name there we have it now let's close that and design this uh specific class on our up bar talking about category details on the uper we want to specify the title let it hold a text widget and we this all right category then we want to pick the specific category that uh has been selected so we need to get our arguments the arguments passed on this route there we have it so to get it we'll just call ugs Dot category let me style it quickly style text Style just set the font twet and font size so let's click on this uh specific category and there we have it it's set the foreground great so now let's work on the body so for the body it will be quite similar to the event list so instead of creating it again let me just pick it from here and then we make a few changes okay let's import the necessary and then instead of event uh no we are we are getting list of events that's correct uh let's just import it we're okay and then our event box is in main dot dot um the next thing is we're going to remove all this so we're going to get events using the function get by category so let's just inject our mixing class and then we proceed to call the get by category then we'll passing from our arguments whatever has been passed in our props we pick the category name great so we're going to remove uh all this and then we have this event details we still want the user to be able to see the details of that specific event let's import our package what else let's just uh remove this so that it doesn't end up being too recursive um yeah and we're done I think we have an error here m hi flatter okay supposed to install add the hi flatter not the hi package I flatter package so if we refresh click on save so we have we have that so if I click on this it will show me information about uh all the events that are based on the CATE work if I click on Friday and click on school it will show me that just to make sure that uh to explore further let me add more events quickly so I'll have uh let me add School Master's big exam coming up let's upload and add so that we have added on Sixth uh you can add something else like um home uh relocation moving to an place let me add an image and add that so if you proceed to like on six if you I want to see all the list of events and I click on school I'll get to see them here as you can see these are different days the reason why I wanted to create uh more events is because on 10th if I click on it you see it's the same date and you may think we're just displaying a list of events by date which is not the case if you click on school as you can see there are different dates that have uh different events on different days that hold uh different information so we're done with search those are the two filter Concepts that we have here are all our lists and if we decide to search maybe with programming as you can see we're searching properly if you want to search by category you can search by category so mainly we have designed the whole up we have performed the crude operation seen how it works interacting in and out of H database we've done some filtering operations as well so let's proceed to the next part so another great thing about hi data base it uh provides uh Security in terms of the there you can encrypt uh your boxes so let's have a look at that and how that would work back to our code um let me close all this cuz what we're going to do we'll be doing it in one file which is a main dot dot so once we have initialized our Hive database we can Define our security measures and one thing that we'll need we'll need a package called flatter Secure Storage so let's add that Pub add flatter Secure Storage and that will help us in designing an encryption key that we will plug into our boxes we have it done so now we come here and we Define um create an instance for the flatter Secure Storage so we'll call it Secure Storage is equals to flatter Secure Storage so there we have it and then now we're going to proceed and Define an encryption string so we'll just call it encryption key encryp shown key string is equals to uh will we have our syn here great so we'll just do another wait Secure Storage read and we want to Define our key uh we can set our key somewhere here for the tutorial purposes but definitely it will in be wise to just set it uh you can even pick it from a cloud or something or even better yet instead of repeating it we can just create one variable that will handle or have a record of that so we'll just call it um calendar and pass it here then we'll check if the encryption key is equals to null we're going to design a key with Hive it has a method called generate secure key and then we proceed to write it on the Secure Storage do write key which will be the key calendar and then the value will be of Base 64 URL encode then we're going to encode our key let's see uh cuz what we need to pass here is let me just rename this just conflicting with another um inbuilt uh variable that is called key so now we have that so we're just checking if the encryption key is null we're going to generate a secure key with the help of Hive and then we're going to write it in the uh and set a value for it using base 64 now that we have that we'll proceed to get the key final key is equals to Secure Storage do read and then we read our key then you're going to read a Define an encryption key you need um decode our key now let's decode the key and assign it to a variable and there we have it and this is what we're going to use let's make sure that it's not doesn't return a null now that we have that let's inject this variable into our attribute uh which exists in when designing our Opening Our box so we'll pass in the encryption Cipher that's what it's called and we'll call Hive as Hive a cipher and then pass in our encryption key and we'll do the same for the event box so that means whenever we opening this box it we have to pass the encryption key for us to be able to open it if by any chance the key uh is invalid uh it will not be able to open the box so that's a way of Performing uh Security in Hive which is pretty simple and pretty easy now uh without that uh looking at that let's head over to deployment which is mainly we're going to look about look at uh comu so what comp auction simply means it's it's a process of optimizing and reducing the storage space occupied by the database so this will only require one line of code uh so over to our main do do where we have created our boxes we can proceed to whenever we open we can proceed to compact our Boxes by just running a weight category box. Compact and we can do the same for the event box and that's as simple as that having looked at all features from boxes Hive objects uh hi types and hi FS type adapters we have also looked at relationships performed some filtering and also crude operations and we have designed our whole app and we have looked at security and deployment uh those are the basic uh Concepts that we need to be able to get started with uh Hive I'll be able to create some test cases but I won't show them here I'll share the GitHub repository in the description in the L uh a link to the GitHub repository in the description box uh below and you'll be able to access uh the test cases will be part of the will be included in the in the source code so with that guys uh that's all we need to that's all we have and I hope to see you on the next one

Channel: Mobterest Studio

Views: 1,815

Keywords: flutter, dart, local database, local storage, sqlite, cross platform, flutter framework, hive, hive database, flutter hive

Id: IZJiVcdE5CU

Length: 188min 25sec (11305 seconds)

Published: Mon Dec 11 2023