Notes App - Hive & Camera

hi everyone in this video we will be working on a notes app now to get started with the notes app let's go to pubspec.yaml where we shall be installing some packages first so let's click command shift b or ctrl shift b if you are on a windows now firstly we need to add some dependency so let's get hive let's get a second one hive under scroll flutter you separate each package with commas and then we have shared under scroll preferences and lastly we have image under scroll picker oh and one more we have introduction under scroll screen now hive and high flutter will work together to initialize and use the in-device storage shared preference will be used to have some settings image speaker as the name says it's to use the camera an introduction screen will be used as a welcome screen and we will work on it at the end of the tutorial so let's click enter all right so now you see under the dependencies section we have hive hive plotter image picker introduction screen and shared preference now this is not all to use hive and hive prop flutter properly we have to initialize some dependency under the dev section now to do so press command shift b or ctrl shift b and you have add update dave dependencies so let's click it firstly we need hive under scroll generator and build under scroll runner so let's click enter and we have build runner and hype generator here now also i'll be initializing some assets to a new directory called assets so let us uncomment this and i'll change this to be assets slash with all of that let's make a new folder here call it assets it says ads and i have already downloaded and a png file in my download folder and i'll just get it and i've also gone ahead and named it one.png so that it's easier to use so with all of that now in pubspec.ymo i'll hit ctrl s and now we can go back to our main.dart and before i do so i'd like to delete this test folder because we won't be needing this now inside my main.dart what i'll do is i'll just run the app now and it's going to take some time so i'll be pausing the video and play it back once it's done booting up all right so here we are our default app is up and running so with all of that firstly i'll go ahead and delete everything here i'll just leave this import line and our void main method now before we start working with the main method firstly i'd like to do two imports import hive why do i not have hive let's write packages now let's write hive i do not have hive one more thing uh let's also add one more uh dependency here the normal dependency it's called path under scroll provider let's get this one all right now before we do any import let's do something let's change this method to async because we will be doing something that requires time to finish and if we are doing anything else in the main method other than running the app we have to call widgets binding so widgets flutterbinding dot ensure initialized afterwards let's make a directory and let's name it directory here we need to await get applications and documents directory right so we will get an appropriate documents directory and save it here in this variable with that we can call hive now we have hive here or do we here here we have hive one more import that we need is import hive under scroll flutter so hive underscore flutter slash hive under scroll flutter dot dart so here we'll do a hive dot init and we will mention the documents variable dot path so in in this path hive will be initialized so now let's also call hive before that we need to call await hive dot open box open box is a method that allows us to open a cell inside hive where we can store our data and for this cell we will name it note and also this open box is a generic type so we have to mention a class that it will depend on for now node is not available hence we have this redder we will have this gone shortly now one more thing about hive hive is a database that only supports primitive types so for example string boolean integers double and so on hive doesn't support a class like this so no what we have to do is we have to make a class note and then call hives adapter to convert those and then we can pass it here and use it properly to do so we have hive dot register adapter also before this we have to call await because it's going to take some time so hive dot register adapter and inside this adapter we will pass the name so for now i'll just keep it null and this this two shall be of type note all right so this was this was all the four lines that you needed to initialize hive now let's start working with note and let us convert note so that both these lines stop giving us errors let's go to lib and let's make a new folder let's name it models inside models mean that we make a new file call it node.dart here before we do anything let's take these two lines hive and hive flutter copy it and paste it here let's make a new class class note what are the things that we might need in a basic note a title a description and an image so just three items string title string description and a string image url why image url because hive will not never save your image directly it will only save a path to the image so let's say inside your device somewhere you have an image and it will only save the path to that image so flutter can use that path and render the image on your ui let's make a note constructor and let's call that required this dot title that required this dot description and at required this dot image url so that was it for making an initial note class but this is not enough what we have to do is we have to use two high fields so first we write at hive type and we pass zero here so with hive type next for each of this we pass high filled so high field and let's make it zero for the second one we pass another high field we pass one and for the last one this should be our index two so hive field two so this is all you need you write hive type for the entire class and then for each of the parameter you just pass high field now this is not enough we have to generate a conversion file to do so we write here part and you just write the class name dot g dot dart so the only thing is that this dot g this g stands for generate now how do you generate all right so to use the to get this generate file up and running we believe make use of our build under scroll runner that we have added earlier on this pop spectacml let's go to terminal and here you can pass this command so flutter pop run build runner build and delete conflicting outputs so with this let's click enter and let's wait a bit and you will see a new file will be generated just underneath this node. and this error will go away what this will do is it will take this entire class here and convert it into things that hive itself can understand so let's wait a bit and i'll pause the video for it to finish all right so now we are done generating sometimes that code might not work if it doesn't work re-paste it and then enter again now you see we have this node.dg.dart here if you come here it says do not modify by hand because the center thing was made for you by build under scroll runner one more thing this generated underscore plugin you might not have this this is coming from my extension that i have here top spec assist here so whenever i add any dependency it generates a file automatically hence this file here generate underscore plugin which you will never use and you do not have to care about it so now it's time that we register things firstly we can import this note so let's import it both the errors are gone and inside this register adapter since we are registering an adapter we have to call note adapter class so if we just write our note you will see we have a new class here called node adapter with that errors are gone and we are good to go and start working with the ui so firstly i'll make a stat less widget and name it my app let's save it and firstly we need to change the container to be a material app inside material app let's pass a theme of theme data dot dark and a home and we can call it notes list screen so now we have to make a new note notes list screen so for that let's go to lib and let's make a new folder and let's name it screens inside screens let's make a new file and we can name it the same notes under scroll list under scroll screen dot dart and inside this one let's import a material.dart and we need a steadful widget and we name it the same notes list screen now if you go back to main.art we can import this and we're good here we have no use of this note.dart anymore so let's close it off inside notes list screen firstly let's import let's get a scaffold so we have a page to look at now this inside the scaffold we need an app bar so let's get one let's pass the title and a text widget there and i feel like notely would be an appropriate name here so let's get one all right notably for the body now we have some special widget that we will be using firstly let's get a safe area so that nothing goes goes outside our safe zone and let's pass a new widget this widget is a value listenable builder value listenable builder has two parameters that you must pass firstly it's the value listenable so for the value listenable if we think about it we need to access our hive before we access our hive let's get both this import hive and hive flutter so uh for this value listenable builder we need to access our hive dot box and the box name was note right and the box was of type note and this whole note this whole box could be a listenable so dot listenable listenable means this builder here will be listening to this box and if a value updates it will update whatever is inside of it if it's if it goes up it will go up if it goes down it will go down and there's not enough lastly we need a builder the builder always takes a function so a first bracket on the second bracket and firstly we need to pass a context context context a context and a box of note which we can name box and lastly a child that we do not need hence the under scroll here now let us return uh list view dot builder at least we builder because we can access each box and make something out of it this view builder has two arguments that we must pass firstly i always like to pass the item count so the item count should be our entire box and its length for the item builder we need another function where the first argument is a context and the second one is an index so each item inside the box now inside this builder before we return let's do something let's make a final final note because inside the box each item is actually a note for us right so what we can do is we can get do a box dot get at i so whichever item that we are rendering could be named note so now we can just write node.id node.title no dot description node.image so on and so forth uh pardon me we make this inside the listview builder okay because we'll be using the notes inside the listviewbuilder and we need access to this i which is coming from the builder itself so we cannot go above it we have to stay inside of it now let us return the widget that we will be using to render each of the items inside the note so firstly let's get a child and a list tile for the list style i'll only initialize a title for now and we will do rest of the things later so i pass a text here which we can access by node with a null over sign because we might be having a null value so no dot title and this should be converted to a string so let's save it all right so now let's add a button so we can add new notes to our notes class let's call a floating action button to a floating action button dot extended on pressed should be a function which will keep empty for now and for the label let's pass a text the text should be a plus and then a sign and which says add note this should be a cons text of course because nothing is going to change and we are good all right so now whenever we click this button i want a new screen to pop up where we can pass a title a description and an image so let's go to screens and let's make a new file and call it add under scroll note under scroll screen dot dart inside of which we need to import and call material.dart also before we do anything let let us import this to widget here i'm in the stream port line here hive and hype plotter because i don't want to write anything out i'm lazy so a steadfall widget and we call it add note screen inside that note screen we can also use a scaffold we must use a scaffold actually and now we can go to this nodes list screen where we have this bottom floating action button and we can hook the function so that it goes to the new screen so we call navigator dot of context dot push and inside push we pass a new widget a material page route which takes a context and it will return us add node screen here we can pass the const because that's gonna change here and if we save it and let us click this add button all right so now we we are here in this new screen inside this new screen let's call an app bar with a title that takes a text widget which says add a note all right so now we can come to this screen and we can close it off and go to this that screen again all right so now we need a text field another text field and finally an image so let's start working on that so let's call a body where we pass another safe area which takes the children and the children should be of type form now form takes two arguments firstly a key and then a children a child so for the key we come to our state and we make a new variable so let's call final underscore form key which is a global key so a global key and global key is a generic type so we have to mention this is of which type so it's of form state now we can take this variable and pass it for the key and for the child i need a list view a list view because at least view is a column that can scroll unlike a column itself now inside of it let's pass a text form field text form field needs a bit of decoration which takes input decoration input decoration where we can pass a label a label takes no text or perhaps a text yes a text where i can write title and after that after the decoration let's call autocorrect to be false because i hate autocorrect and we have an unchanged unchanged gives us a value that we can update to a variable later on let's make a variable let's name it string title and also make a string description all right so what we just did is we made a title variable and description variable which we can update here so whenever we click something we can call set state inside this unchanged and here i can write now that title variable should now equal to be this value so whenever we are writing something this unchanged will trigger each time we write something and it will update those values to this title now what's the point here the point is now we can call our hive where we can pass this title and we can pass this description with ease if i save however you see we have this title here let's add one more text field where we change this title to be a description and for the description i'd like to add one more field here so let's get out of this unchanged or before the sound changed and we pass a min lines to b2 and a max line to be 10 and also change this to be a description now one more thing this list view could use some padding to be a bit more beautiful all right now after that lastly we need up space to put our image here to do so let's make a new variable one that accepts an image and we can write x a file and call it image now there's not enough we need a function to trigger an image right so let's call get image and this function should be of type async because it it might take some time or it might be it's not obviously might it it will take some time because when you hit the button and you open the camera you take the picture and this whole thing is going to take a long time right and your code won't stop for anything so you have to mark that function as a async so that coding stops and lets this thing finish first and here we can call final image make a new variable where we can save our image and call await image picker dot platform dot get image and here we can pass image source dot camera so this was everything you needed for the image now we call a set state and inside of which we call our x file type so image which should now equals to be that our own image variable and we're good now let's go down after this two text field and let's call a const sized box of height let's say 25 and after that size box i want to initialize my image to do so what i want to do is i want to call my image variable so if this image is equals to now i want to pass an empty container and if this is not null however i want to pass image dot file which takes a file of my image dot path this file should come from dart.iodo and this image might be empty so we pass an exclamation here so with that we are done initializing and we can now bring a floating action button that takes an image to do so let's get outside this safe area and let's call a floating action button and a floating action button there here we pass an on pressed which takes our get image and for the child we pass an icon of course it should be a constant icon which takes an icons dot camera now we have it let us try if i click this camera here you see our camera is opening nice and well and let's take a new picture all right so now we have our image here now that we now what we we are lacking is submitting this so for that let's go to this app bar here where we can pass an actions action takes some button i will pass an icon button where we can pass an unpressed to be an empty function for now also a child or perhaps an icon which should be a const icon icons.save so whenever i click this button i want this entire thing to be saved inside our hive and this page should pop up and go to the entire list to do so let's make a new function here and we call it submit data and this 2 should be of type async because height will be used inside of it and firstly here i want to make a new variable final is valid which should equals to be await and our form key dot current state dot validate so this was the logic for validating and we have to pass an null lever sign here if this entire thing is validated i mean this entire statement here means that the whole thing is validated which will be saved inside this variable so now if is valid so if we are valid what i want to do is i want to come here and call hive dot add hype dot box and the box name is note and the box is of type note and this entire box should add a new note so let's call a new note where we have a title to be titled a description to be description and name image url to be an image url dot path my bad it should this should be image dot path and on the left side here of course so with that this was our logic for adding our items inside the hive now what we need is we need navigator dot of context dot pop so that the entire thing pops out to the list screen when we are done saving now one thing this this thing should only happen if we are valid so now with all of that let's restart all right we are now done restarting and let's add a note let's get a title so let's save it first note and we write here this is our first note and also let's get an image now what we can do is we can try saving it so let's click this button oh one thing we have never initialized this button to this on pressed so for this icon button we need to pass this submit data so let's do that submit data and then if i save it now and hopefully we can try saving it now so let's go ahead and click it yeah we are submitting it so we have saved it and you see inside our notepad screen we have this entire thing here so let's restart and see if the data actually persists so yes we do we have restarted the entire app and we still have the notes here what i would like to do now is get rid of this add note screen and for this note list screen let's do a bit of uh decoration right so for the leading property i want image dot file where this should be a file which should come from dart dot io where we can pass note with a null over sign dot image url dot to string and we can get rid of this null over sign here let's save it and you see we have our image here with the title that we had also for each of this title this style let's add a padding better and for each of this card let's add a padding better now we need something to delete so on this list style we can pass a trailing where we can pass an icon button an icon button which takes an on pressed and the icon should be a const firstly const icon icons dot delete if we save it the icons button should come here all right so let's go inside and let's get call box dot delete at this index so now if i delete it you see it's gone let's click here to add one more note one and we say here's something let's get a picture and let's save it all right we have it here now lastly we need to i want to click it to open a new screen where we can read our data to do so let's make a new screen and we call it view under scroll view under scroll a note under scroll screen.dart where i want to import material.dart and this widget can stay a stateless widget because we won't be doing anything inside of it so be view note screen which should be a scaffold for sure where we need an app bar where we have a title now the title should be a text and what i want for for the view screen is for each of the app bar i want to pass the title of this note here so let's just write a title here so for this note screen we have to initialize some values so let's get a string title a string description and a string image url so with all of that we can come down and right here this dot title this dot description and this dot image url now there's not enough i forgot to add at r-e-q-u-i already required because this better be required all right we're good now what we need is to add final in front of each of this so final final final and this title should be of type string so with that we can come to this note list screen where we can um whenever we click any of this list style i want an on press to be triggered on it so we can call the ontap and inside of this we can call navigator dot of context dot push and inside the push we pass material page route which takes a context and passes us the view note screen and the view node screen x wants us to pass all these parameters here so for this i can pass note dot title dot to string for this i can pass note dot description and lastly for this one i can pass no dot image url do i need this to string here let's check all right very good and after all of this comma comma and the semicolon so now if i click on this button here you see we have opened it up and we have the title here on the title bar what i want to do now is come and make a body here so a body body needs a safe area first of all so a safe area which should be a list view because the description might be very long and we might have to scroll up and down the listview needs a children where firstly i want to pass a text that wants the description so the description which should be to string this is not enough i would like to pass a style as you can see the description has arrived so style of text style which takes a form size of 40 or 30. let's make it a const and after the text let's pass a const sized box which takes a height of 50 where we pass a container or perhaps an image widget image dot file which takes a file from dart dot io where we can pass the image url dot path all right so now if we save this you see we have the title the description and the image for the list view let's give a column here or a padding to be precise and if we save it we have a bit of better looking view here so now with all of that we are complete let's make a new note let's say final note we are right writing this note after having done with all the functionalities all right and let's get a picture so this is what we have and let's try to save it all right we have it and if i click it we we can open it up

Channel: Fluttercraft

Views: 265

Keywords: Flutter, Flutter 2.0, Hive, image_picker

Id: xtHXJrD4vzI

Length: 42min 39sec (2559 seconds)

Published: Mon Nov 22 2021