Flutter Tutorial | Local Database | CRUD | ListView & GridView

in this video you'll learn how you can build this cool note-taking application with all the bells and whistles of crud you'll be also be able to show it in the form of a list and form for grid if the application is empty or the or there are no notes in the application it just shows this cool animation so you can create a node by saying some title and some body in here right and you don't have to just save it you just have to go bad and it saves it automatically for you and you can even view it in a form of a grid and a form of a list right to delete the news just open it tap on delete and you get this cool delete animation just tap on proceed this tutorial is in association with the tutorial linked somewhere right here so you can check it out okay I have this basic application up and running the counter application so I'm just going to do some quick cleanup here okay so I'm mostly done with the cleanup now I just need to create a new folder here all I like is to have everything inside SRC right instead of SRC we're going to have a new DOT file call it app dot dot that will return the material app right and inside of this we're going to have a new folder called views where we'll be writing all our UI components and okay I guess that's what really does now since out of this app. we'll see we have a stateless widget that will be it can just be app right and this can return a material uh app right okay and then we can return this app from our main like so so we can remove this you can paste it just like that okay and we can also import it around okay there you go and we can mark it constant okay inside of SRC we can have another folder and call it res or resource okay let's call res for huh and let's have a new file called strings because I like to have all my strings stored inside of this file and then I can say class I can call it app strings I can see static const app name equals note bucket you can call it whatever you like but I'll just call it node bucket for now let me close this file I can go back to my App instead of material app I can give it the title the title can be app strings dot happening okay all right now it's just it's uh you know this empty thing because we are not returning any kind of scaffold from here so instead of views we'll create a new file call it home dot dot we will call it home View right and we can just return a MP scaffold from here and we can also tell this app that this is our home all right okay so first things first we have to build this uh home screen that has this title says that says node bucket and we have this icon over here and then we have some animation going on here right okay so first this title thing instead of Home view we can go we can expand our scaffold we can start with the body we can say column Colin can have children and the first children charge is going to have is this text that says the node bucket I guess so it app strings dot app name I save it okay so it's top I write here in the corner to solve this issue since you're not having an app bar here so what we'll do is we'll just simply wrap this body uh that is this column with a widget called safe area okay that's also issue all right next thing that we need is to head over to pub.dev and we need to look for Google fonts right and we to install this dependency so we'll get back to our pups spec Dot yaml and we will paste it right here inside of the dependencies right we will save it and let it run the flutter Pub yet if it doesn't work for you you can just go go to the terminal and run startup object so it will be up and running okay and here we can now pass the style okay it's going to be Google fonts this time Google phones dot pop inside Poppins okay we might be getting some warnings here just all we can do is we can uh kill this app we can rerun this and the warnings will disappear all right our application is up and running once again and let's check if there are any warnings okay warnings are gone all right all we have to do is make it little bigger so that it's more ocular let's say font size to be 24. okay that looks just fine what else do we need we need to wrap it with some padding so that it has some space from top left right and you know all the other sides so let's wrap it with some padding and make it 20. all right we've got nice spacing now what else okay we look at the image we have right here we have this icon all right and it's going to be a dynamic icon so what we'll do is instead of the stateless widget will convert it into a stateful widget and we can have a Boolean we can say is just U because this toggles whether we want to show it in either list view or a grid view so let's give it true for now right and based on this variable we are going to drive uh the change in this icon okay so we can wrap this with a row like that and this children we can format to the document first okay and then we can have an icon button okay we can Implement on press later we can have an icon have icon start oh okay what was it again I can start grid view I guess okay we have one of them all right and just to have spacing in between these two you will go to the mean access alignment so and make it space between all right mean access dot space between makes it you know move far away all right now we need to make it Dynamic somehow okay to make it Dynamic all we have to implement is we have to implement this variable we will be uh having an attorney statement here so we can say this list View so if it is list view we are going to have icons dot uh this icon actually I found it on uh I found it pretty much looks like a list so a split screen outlined right okay let's save it right and now we can implement this on trust so we can just say set State we can say is list view equals not as list View you can save it let's see if it is if it works all right works like a charm next we need to have this uh animated thing going on over here for this we'll head over to Lottie animations naughty files.com and in here what we will do is we'll search for this empty animation so you can look for empty animations you can choose whichever animation suits you best I'll go with this one so I can select this I can say download and then download this version that says Doty Json I'll download this I'll come back to my uh application inside of my root directory I'll create another folder that says assets so that I can have all my animations and images okay I'll create another folder in here and call it animations all right now the file that I have downloaded from the Lottery Jason I'll go to a new finder window I'll try to navigate to it okay there we see I can drop this file in here all right and let's rename this to empty okay now we need to travel flutter to Index this file as well so we will just uncomment all these lines where we are dealing with assets instead of images we will call it that's it slash animations slash and we'll have to make sure that we have the slash here so that it goes into the folder and scans through every file okay okay I use this some issue I guess it's not finding that folder all right I guess it has Index this file as well okay now what we'll do is we'll go back to our lib inside our SRC inside our resources we'll create another file and call it assets dot dot right and we can call it class animation let me call a base path and uh we are having this underscore here because we never want to access this base path anyway from this class so that's how you're having this with an underscore all right and then we can Define our path to the empty animation that we just downloaded right so we can call it empty just call it empty as of now because we know it by the name of the class okay and then we have to do some interpolation with the base path right and we can call it MD dot Json just like that okay now to make use of this animation all we have to do is we have to install one package from pub.dev so we'll head over to pop dot search for Lottie okay and this is the package that we need we're going to install it in our Pub spec.yaml all right and then inside of this column we have uh this note bucket and thing going on so under this we can have our Roti animation dot e dot asset and we can pass in the uh animation or set path that that we made for our empty thing okay that should pretty much work okay we have this animation going on here all right what else can we do is we can instead of writing this animation here and all this text here what we can do is we can have another widget we can have a new folder called widgets okay and instead of inside of this we can have a new file and tell it this is the empty view so let's call it empty view as of now right and have a stateless widget here empty view right and it should return a column why because we have some text underneath that animation so I'm going to do that you grab this you paste it here and make sure we are doing all the Imports right okay and under this we can have this text okay we can paste it just like that all right and what else can we do we can save this and say empty view here just to make sure it looks fine okay all right one more thing that we need to make sure is that excuse me listen this is in the style of Google fonts of Poppins and then we can pass in uh font size so let's make it a little bigger let's see 20 okay that's two way let's go with 18. yeah that that looks fine okay that's that so we can Market our constants of now okay what else do we need we need a floating action button here so we will create a floating action button uh outside of the body so this is safe area there's supposed to be body so you have to create it right here I believe okay and then we can have a floating action button I like to have it white in color so let's give it colors.white let's give it a child say icon you can stop add okay what does what else does it need okay so it requires this parameter on pressed okay let's pass that too all right so we have a floating action button here and we need to tell it should be green color so let's call it uh okay let's start okay so this this one says in circular shape and the one we have in the pictures in some sort of squircle so what we can do to achieve this is we'll go back to our app dot dot inside of here what we'll do is we'll enable material 3 theme so what we have to say we have to say theme and say theme data on this and then we get this property called use material 3 and we will mark it true you save it and we get this quackle theme here all right I guess the home us pretty much done we will get this widget in the center once when we are implementing all our lists and grids let us now build this screen where we actually write the note where we have two text Fields a title and a description so what we'll do is we'll go to the Views have a new file call it create note create note dot dot right and start with a stateless widget so let's call it create note View just so that we can differentiate adding views at the end of our uh UI classes just to differentiate a UI from logic and other classes right okay and inside of here once again we'll have a scaffold and in body we're going to have safe area see if here can have a child column and as per the UI we have a button to go back a title and description that's it it's a very simple UI so what we'll do is we will just create uh an icon button and give it an icon let's call it back it should be Arrow back okay and then we need to have an untrust just like that it still shows similar let's see what it is all right so we need to make sure we are passing this inside children okay let's start so yeah and we can make it constant as well okay let's navigate to this page so we will do that by using this plus arrow oh this plus button here so we'll go back to the home inside of untrust of this we'll say navigator of dot context dot push Real Page route and passing the Builder here the context note view right and as we tap on the plus we are navigated to here okay and you need to also implement this back button so we will do one thing we'll go back to create View and we will say Navigator Dot top and pass context in here okay that should do the trick and let's go ahead document let's try to use this okay it works good what next we have to do is we need to have two Fields one for the title and the other for the description so once again instead of a column we are going to have a field we are going to say what should we say it should be your text field maybe and we're gonna say we need some border border should be none I think it should be input board I guess okay input water dot none what else do we we need some hint text and it should be title let's save this okay there we go and let's have some pop-ins font here as well so we can say style do we get style property yes we get style we'll say Google fonts start Poppins and we need to have some font size here font size let's say 24 okay that's that looks fine and what else we can do is we can wrap it inside some padding and have some horizontal padding here so we can say symmetric say 20 okay that's kind of neat and we need another text field for our descriptions so what we'll do is we can just copy this block and paste it and Mark and this and just place it with description description okay and we can reduce the font size to say 22 let's make it 20. that looks nice and what else can we do uh so this is in the center and doesn't look so good so we can wrap it inside of a row okay that brings it there and one more thing that we can do is we can again wrap it with some padding see what happens okay that padding of value 8 fixes it okay that's kind of neat what else do we need we need text controllers here and to use text controllers we'll have to first convert this into a stateful widget and now what we can have our input field controllers so let's build the controllers here so we'll say final title controller title control is all text editing controller should be a text editing controller okay similarly we need one for the description as well so we can replace Title by description and we are good to go okay and whenever you are using such controllers we should also also Implement our on dispose method and always remember to dispose our controllers so we can just simply call dispose methods here it's always a good practice to dispose the controllers once we no longer need them okay that's that let's now uh make sure our controller is in the right place so this one's for the title we can say controller and pass in the controller for title okay and this one's for description so we can say controller okay we have a description controller as well and we can make constant everywhere okay that sounds neat and just to make sure that everything is working are not really having a save button here we have to make sure we save it once we tap on the back itself so we'll just try to uh see how we can achieve that so the method that is triggered whenever you press back button is the on uh it's the on dispose itself so inside this on dispose method what we will do is before we dispose our controllers we can simply you know print our values and we'll be using log for that okay log that comes from dot developer right here okay so we'll just try to see what's inside the title title controller.txt similarly we are going to have a log statement for our description controller as well like that okay let's feed in some values so and before we feed in value let's completely restart this application because we have built few controllers in there okay let's tap on create note let's have some sampled item full title and sample description guys can forgive me for the spelling let's try to go back okay so we are getting our data here which means every time we try to go back this method is triggered and we can read our data like over here right okay that's kind of neat what's next now we'll have to make sure we store our data to store our data we require a model right so inside of SRC we can have a new folder call it model right inside of model we'll have another file and have node.dot okay now every node contains of two things a title and a description but we will also save the date time of on which the note was edited or created or whatever right so we'll say class note definitely we'll call it node and we'll have a string title and a string description description and also make sure that these are final fields just like that okay all right what else now what we can do is we can use this bulb and say uh we can generate our Constructors hold on we just have to make sure okay now we get all these options we can get our Constructors and we can also say generate a data class okay to get this option what you have to do is you have to go into the extensions and say data class data class generator and you can install any of these packages these just work out of the box and you also and you then start seeing this option that says generate data class you can tap you can select data generate data class and you get the whole class generated for you right and inside this you can see you get these methods to modify your object you can get you say copy with get to map from map and all those good stuff what else do we need we also need another variable or another field that stores the last date time or last in uh last time stamp when the note was edited so we can say final last edited okay let's call it last modified last mod just works so and should be of type date time right and then again you see this error you can go on this bulb and say generate data class and the error goes away right so now you have this node class going on here okay what else now we need to make sure to store these nodes somewhere that in such a way that we are able to access it even after the application is closed and restarted right for that we'll be using a local database and we'll go back to our pub.dev and we will search for iesar so iscr is a local database that's uh pretty useful that comes in handy whenever you have to do all these kind of things whenever you have current operations on your uh mobile device or your mobile application so this is something that we can make use of okay to install isar we'll just go back to our Pub spec.yaml and we will first declare an ISR version this is one of the ways of installing Pub packages so what we'll do is under environment we can declare Isa version like so okay and then we can and also make sure you're on the same version as I am 3.0. Fighters okay and then what you have to do is you will have to install two packages inside of your dependencies like so iscr and iscr flutter labs and also you need two more things build Runner and ISR generator inside your Dev dependencies just like that okay you can save your Pub spec.yaml and say flutter bucket just once just to install all these dependencies all right once that is done we can go into our SRC create a new folder call IT services services and then have a new file called localdb dot dot okay and then we'll create a new class call it local DB services okay inside of I is inside of this local DB Services what we will do is we will do all our operations that are necessary to interact with the local database right first of all we will need a function that will open or connect to the local database instance so we it's of type future it is going to return us instead of instance of iscr and we can call it opendb just like that instead of opendb we will check if we already have an instance of ISR so we'll see iscr dot instance names dot smt if it is empty only then we will create a new instance you can say await isar you say open just like that and we need to pass the schemas as of now we don't have schemas and they'll be passed in from a list and we can say inspector to be true just like that and we can return this you know so have a comma here okay they're getting some error here it says exception okay some sort of okay we need an async we need to mark this as a synchronous function all right okay what else do we need if there is no uh instance we will open it by doing so or if there is an instance already then we'll just simply return the uh instance existing instance of isar so we'll just say value isar dot get instance okay that should do our job all right now we're going to have a member variable so we'll say late future isar call it DB right and as soon as the instance of this class A local DB service is created what we want to do is we want to assign some value to this DB right so we'll just say open DB equals DB equals opendb right just so that we are assigning this with the instance of isar okay okay that's cool so this is one of the things that we have done okay now what we need is we'll go back to the iscr documentation right here and it says if you wish to store something like email we need to Market with collection we need to have a part email dot g dot dot right and we're going to do something similar for our notes class as well so we'll go back to our models inside of node we will mark it as collection right it automatically Imports ISR for us and since it's a collection it should also have an ID and we can pass in an ID just like that okay and once we pass an ID here we should regenerate our data class and once we do that we see some error here just remove this to map and we can replace it with this we can completely remove this okay that solves or our problems all right now node can be stored as a collection one more thing that we need to make sure that is we have declared this like so so we're going to have a part no Dot and observe that we have a node.j dot dot g means generated right so this file is yet to be generated and this should be generated by iscr itself and to generate these files there is a command that we'll be using we'll just go to the iscr documentation and try to find out which command is that all right so these are the commands that we can use okay let's try the second one I guess this one didn't work let's try this command let's see if anything happens okay so it generates our node.j dot dot okay and this is a generated file and it's recommended never to modify this so we can just quickly close it to be on the safe side and now what we'll do is we'll come back to our uh local DB service right and inside of here we need to pass in the schema so we are working with the node schema and note that it's it was generated inside this uh node.j dot dot so and that's why it's always recommended never to modify this file okay okay you are always free to read this but uh please make sure you don't modify anything here okay that's that we can quickly save it and now what we can do is we can have our methods in place that will help us modify this local database and your enter and read values from it okay first of all we'll need something to save our nodes so we can see future void we can say save node and let's see what do we what else can we need okay we'll require a note definitely a note object that we can save let's mark it as asynchronous all right and then finally we will need an ISR instance so we'll say isar equals of it DB and note that this DB is this variable and it's uh Avid because it is of type future is here and it will give us an ISR instance in the future okay and then we can do some uh transactions over here so we'll say write transaction sync and every time we do an operation let it be read or write it's generally done whether transactions sync okay all right mostly the write operations so we'll say isar dot put to add data so we'll see SAR dot notes because we are having the nodes collection and that's where we are putting the notes and we'll say put sync because we are inside of a right sync transaction and we will say node okay let's start so that's what that's all we need to do to insert a node inside of our DB and what we'll do is we will go to our create note View and in here we will say final local DB we can say local DB service right and that was local DB we can create a new node you can say final title get the title value like so you can also say final body or description description for short okay and then what we can do is we can create a new node call it final new note because node let's quickly import this and then we can say title to be title and description to be desc description and then last modified to be date time dot now because this is the time when uh since there's a time when we are saving it and that's the time we are modifying it okay what else do we get we need an ID as well so we can say idb although it's an integer but it should be incremented on its own so what does the documentation say what can we do is we can say ISR Auto increment should work okay let's do this and import it okay that seems to be working and finally we can use a local DB and say save note and pass in the new node that we just made okay that's that and just to make sure everything works fine we'll just kill the application and run it once again all right looks like the application is up and running once again we will quickly open our uh console just to see uh if there are anything any errors here okay let's try to open this and we see our iscr is connected and we can read everything that's inside the DP by going to this URL in here and uh it is always advised to open it inside Chrome it just doesn't work inside Safari so we'll quickly open Chrome and paste it like so oh okay let's try to grab this link once again okay now we are connected to the instance of the app let's try to pass in some title some random title and some description and once we go back okay we see some log here and let's go back here okay so this is the instance that was created this is the object that was saved okay what else can we do here now finally we have saved the object here but how do we uh get to read it so what we have to do is we have to show the list of all the available uh all the available nodes so what we'll use is we'll use stream just to listen to all the notes in here so we'll see a list of note right and we can say here listen all nodes right and then we can say async and since it's a stream so we need to mark it with async asterisk all right and once again we will grab an instance of isar and then we'll say isar what we have to do is we have to listen it and we are so we'll be watching it we'll say notes not where and then we'll set uh let's say watch okay and we also have to say far immediately true because once it starts listening it should give us the first you know batch of notes and we'll we also have to yield this uh all right that that should do our job okay let's go back to our home where we have to show our nodes and instead of showing an empty View let's have a list View dot Builder okay list view dot Builder inside of this we can have an item Builder okay and that should be a container for now a container works okay item Builder should have a context and an index right and then it should return a container let's return instead of returning container let's return our text for now just say something here right inside of this let's say item count let's make it 10. okay that goes away let's show the index in here there's something wrong since it's a list view inside of a column so we might have to wrap it with expanded so we'll wrap it with expanded just like that okay so we see all those multiple numbers there and what else do we have to wrap it we'll have to wrap it with a stream Builder just to be able to listen to that stream and build a UI according to the values that come from the stream right so we'll be wrapping it with a stream Builder and we'll also pass it with a type of list of note and we will import it like so and we'll grab the stream by saying local DB local DB service Dot listen to all notes just like that and this snapshot needs to be that value so we can say final notes equals snapshot dot data okay and this nodes should be of type list of nodes okay and what else we can do is we can make sure that uh it is not empty and it's not null so we can say snapshot.data you can have an if statement here you can say a snapshot dot data not equals null and then we can return empty view if it is not and if it is not we will just simply say snapshot.data not null okay so that we get notes and nodes is of type list of notes okay make sense inside of item count we will say notes dot link and instead of saying this we can we can say notes so the note at index index and then we can get the title from it okay that's that's kind of nice and then we can close this curly presses and complete the interpolation okay so again we are getting some error it says renderflex overflowed let's find out what's going on all right so we are just making a very silly mistake here it should be data equals equals null then show an empty View and it is not then return this list view okay all right so we get our first list view item here what else do we have to work is we have to work our weight on building the card where we show this item so let's quickly do that let's say uh let's close all these files okay all right so inside of this widgets we can have a new file we can call it note list item dot dot right and then we can start building a stateless widget and call it node list item and I'll definitely tell you why are we using note list item as the name because we'll also have another item that says note grade item for the grids okay all right so let's remove this placeholder let's remove this placeholder and say material button okay and we're going to have few children inside of this and we are going to have a shape B rounded rectangular portal water radius needs to be let's stick to 10 for now model radius circular past 10 there okay what else do we need let's make the elevation we need to get out of the shape let's say elevation make it zero let's give it a giant container that some padding um let's quickly fast forward this part so that you don't have to watch the boring stuff okay I finally built this list card let's see how it looks like so let's go back to the home and instead of returning this text let's return something like uh list no it's not list item okay this looks decent and one more thing that we need to make sure is we provide some padding in here so it's a padding let's say 20 just like that okay and this container seems that a lot of out of its place so we'll go back to the container let's see what happened okay we'll just make padding zero here let's try this I can set start zero okay that works so okay now it feels good moving that we need to make sure it sits inside of a column where we can have a size box let me and say hi to B20 right so that there is some space from the top or what else can we do we can place it under this thing another material button just so that if there are multiple objects so instead of passing this let's make it 10 okay so it looks beautiful okay that's that seems kind of nice all right inside of inside of this widgets let's create another file and call it notes list list dot dot and let's say stateless notes list just like that and we can have a function in here or not function we can say final list note call notes right and then have it just like this okay and get the final final field parameter just like that go to home and grab this list view dot Builder and return it from this widget just like that and we're going to import this as well and we'll say nodes dot length and to get to really show the title and body from the note let's say note and again we will get these parameters bring to Market final so that we can say required this dot note okay we'll go back to our notes list and we'll say no you can say no the note on the index okay you can say form a document inside of home what we'll do is we will simply return oh no cluster okay notes list and pass in our notes so that we have decoupled that okay that that looks beautiful okay let's try to add few more notes let's have some Title One add some generation here all right let's add few more notes in here let's say some title let's say Title One and has some random gibberish here let's see if this okay okay we're not getting those values that are inside the database let's try to reconnect this to see what's inside the database what we will go do is we'll go to the list item itself inside here we are grabbing this note so what we will do is we'll get the title from this note and show it where the title should be and we'll show the description right here note or description okay and now we see whatever we just added right okay that kind of serves the purpose next we need to make sure that whenever we tap on any of these notes we navigate to the same page where the title and description are populated with all these values and also we need to make sure that if we are simply closing off we don't get these empty notes created here okay so we will go to the create notes page and inside of this dispose where we where we are saving the node before we save a note we'll make sure that these fields aren't empty so we'll just say if we'll say if title not smt and description is also empty then we'll just simply return and if they have some value we'll just create a new note so the next time we create a new note and try to go back no extra empty note is created right okay what else do we do we know we now need to make sure that whenever we tap on any of these nodes we open on this screen on the editing page where all these fields are populated right so inside of a create note view we will create a new variable we'll say final note and this time we'll make sure that it is nullable right so that we can open it using uh This plus Button as well and we can say this and this time we will not write required because this can also be none right okay now to implement this we will next Implement our end state so we will say in its state right and set up this edit State we will get some values so we'll say if widget dot note not equals null so if it is not null what we'll assume what we'll do is we'll pass in the title control dot text to be widget dot note dot title and since that is not null we can say uh not null here and the same thing goes for description as well so we can say uh description on both these places so simply say description just like that and we are passing the description in here okay next what we'll do is we will go to our note list item inside the one pressed of this we'll say navigator let's quickly make this larger okay we can say Navigator Dot of context dot push material page route pass in the context and say create note View and inside of this node we will say the node that we are getting from The Constructor right okay let's quickly save this and as we tap on any of these nodes we can say we have an uh a new node our existing node visible here right but when we go back we have a new node created with the existing values okay now we'll have to avoid this situation as well okay how do we do that now we will go to our create note page right inside of this dispose method will now first check whether there is something in the uh whether this widget dot notes which widget dot node is empty so before we grab these values before we check these we'll first say if widget dot note not equals no okay so if it is not null what we'll do is we will try to add some changes if it is not null so if any change happens should be saved to the existing Loop right okay now to make that sure what we'll do is we'll say final new note equals um widget dot node and then we have to call it not null because definitely it's not null and then we'll use the copy with method on it and we will pass the new title and the new description right and since we are not passing the ID so it will copy the same ID and since it has the same ID of the previous note the existing note will get updated when we save it in the database right so once we have all these values in place we can call this method here right and then finally just called return because we don't want uh any other code to be executed right and if uh okay that's that let's quickly save it okay let's restart the app let's open this let's go back okay no no new note created okay and let's make some changes here let's say title changed back and we see it is updated okay so finally our nodes are being updated we are able to edit our nodes let us now shift our gears towards making the grid view right so to make the video once again we will go back to the widgets excuse me for that and we'll create a new file we'll say notes great dot dot okay and then we'll call it stateless widget we'll say note grid okay and make it a node script okay so that it would make more sense right and similar to the notes list we will say final list I just lost okay list no notes no okay right and then we can say required the stop notes okay similar to the list view this also will be having a builder but we'll be having a package installed for that so that our grid view gets automatically animated so we'll be using Auto animated package you can find this on pub.dev we'll install it just like that okay that sounds good all right let us now go to the notes grid inside of this we will return a live grid that comes from the package that we just installed so we'll say live grid now okay and we're going to have few options you first need to import this now you're going to have options and for that let's form a document oh okay looks better now we need an item builder for this okay I am finished building the card so let's quickly integrate this and obviously you can check out the whole source code it's in the description or it will be available the link will be available soon uh let's quickly uh integrate our grid View inside of this we need a builder foreign not great item and pass in the note at our index from nodes okay then we need to build a grid delegate so we can say const sliver grid delegate with fixed cross access count oh okay that's that need to pass in the cross access count to be 2 then let's say cross access spacing 16. and mean access fixing also to be 16. okay sounds good extra comma there all right now you need to also pass in the item counts okay that should be nodes dot length and options can be live options for now okay that's that but how do we view this grid now uh all we have to do is we have to go back to our home okay and in here we already have this variable that uh says is list View and we can toggle this use this to toggle between our list and grids so we'll just quickly check it you can say if is list View then we'd return our notes list else we will return our notes grid okay let's save it let's switch to grid oh okay [Music] that seems odd to fix this issue we will navigate to r or grid so let's find the notes grid and inside here we have mean access extend we just have this should be main access basically right save it and okay all right what's next next we have to implement whenever we have a note that has some data in it we should be able to delete it right so to delete this again we will go back to our create note and we need a delete icon so okay inside this row so what we're going to do is again we are going to copy this block of code because it contains just one delete icon the back icon we are going to write this one first and we are going to make it delete okay so we get this icon here and we need to make sure that this delete icon is only visible when we have an existing node being displayed right right so to ensure that what we will do is we will save widget dot node equals none so if it is not null we get this icon or if it is null then we should get something like size box size foreign context and then we should return something okay and we're supposed to return an alert dialog like so all right again we are getting some errors here oh yeah inside this alert dialog we need to write this title we have to pass in the title so we'll say text and we're going to ask the user delete note right and I can have some styling over there as well so we can say Style fonts dot Poppins just like that and have a size of say um 24 so let's say font size v24 okay let's tap on delete and see if it is visible okay all right it's pretty big let's make it between B o okay now what we need we were talking about an animation so what we will do is inside of our assets slash animations we're going to drop in our Json so go back to our animations yeah and you can download these animations from lottie.com you can search for whatever animation fits you best and you can download it okay and then we'll refer it in our assets so let's go to our dress assets this and we need to have string in the Polish neighbor okay and then say delete okay that should work all right and inside of this we are going to pass some body okay not body it should be okay content it's going to be a column children and it's going to be Lottie Jason animation assets dot delete all right and it's going to have some text and we can be lazy here we can grab this text from here you can paste it like so make the fonts are a little smaller and pass some other message we can say this note will be permanently deleted so I'm not going to type it I'll just copy it okay let's save this all right so we are getting this animation but it's pretty huge okay we can customize this we can make main access size mean access titles dot minimum and just to make sure it's smaller okay and we can say cross access alignment Dot Center so that everything is very well centered okay somehow it isn't but we can live with that all right that's that next we need to add our buttons so we're going to say action no not action uh is it okay it should be outside this column okay there we go if you have actions and third of actions we are going to have a text button that's going to have one press method and a child child would soon just say proceed and the other text button should say cancel okay let's see if it works okay so we have proceed and cancel but these buttons won't work on cancel if we say navigator Navigator dot pop context it should get it cleared so I can say cancel okay it goes away and the same thing can be done for our proceed as well because definitely if we proceed we'd still like to uh the alert dialogue to disappear and once it does it should also uh you know take us back to the home because this node no longer exists right so what we'll do is we'll say this once again and again they say okay so that if we go to delete proceed it just shuts down okay the last thing that we need to implement is when we tap on proceed it should permanently delete the node okay for this functionality we will go back to our services into our local DB and we will create another method that says void delete note and takes in the ID so we can say required int ID and since again we are making some changes so we would require an instance of the isar and we will have a right transaction you can have a retrosection sync the notes iso.notes Dot delete sync and then we'll pass in the ID just like so this integer ID right so that should get our job done you can come back here into our create note and before we pop our context what we can do is we can simply delete our node so we can say local DB and delete node and the ID would be widget dot note dot ID and we are already verified that this widget dot node is internal uh right here so this should work apparently okay let us now try to delete a note let's fully restart the app okay and so on and once we click on it we can say proceed okay it was supposed to be deleted but it is in delete that all right we'll have to make some changes to our logic inside on this pose uh that's the function responsible for saving our nodes right so what we'll do is we will get this check in here let's reformat this okay and once we have this check in here if it is empty then definitely be no longer need this note so we can delete it and say local DB dot delete node and pass in the ID so it should be widget Dot dot ID and we are wrapping it by marking it like so okay and we'll see if anything changed so we're going to compare the existing node title with the current title and the description with the current description so we can save widget dot node dot title not equals to title title and okay we are getting some error again and widget dot note Dot description not equals prescription looks like so okay all right so if there was uh something changed only then we intend to uh save this note or update this all right and if this is in the situation then we would like to create a new node and then save it right so we can say else you can say else and move all this logic inside of this pixel and we can also move this function inside of this just like that and we can remove this return so that every time this logic is we are done with this logic a controller is definitely get disposed of okay that should apparently solve our issue so let's go to the snow try to delete it okay the note is deleted but there's a small little issue here we don't see any kind of Animation going around now to get this animated effect inside of our list what we'll do is we will go to pub.dev and get this package called Auto animated list install it in our pubspect.yaml okay and you can find this package on pub.dev just make sure you are using the similar version right so we need to just modify our oh note list so we'll go here nope list okay here we are and this is where we need to make some modifications okay so instead of having listview.builder we are going to have Auto animated list auto animated list okay and we're going to pass in a type note right just like that okay button seems fine item counts okay this one shouldn't be there it says items we don't require length on it we're just parsing our notes and inside of this we have a context then we are getting a note we're getting some index and we are also getting an animation because it animates it for us okay and then we can wrap it with size transition so widget and call it size transition okay size fade transition looks better and we have a child we need to pass in an animation so we'll say animation and okay that should pretty much solve the problem so let's quickly uh restart the app let's try to modify this one oh okay something isn't not saving here I guess we broke something okay it should be an R statement because if anything has changed we would like to save it so let's call it now save it okay so we see the changes updated right okay so it is being animated what else we can do let's let's try to delete this one so we delete it okay looks nice and we can also switch to uh the grid view but the grid views which looks uh pretty pretty flat so we can animate that as well so what we'll do is we'll go back to our home inside of our home we are going to have some animations here okay so instead of returning all this we will just return an animation Switcher and we are going to comment this out for now we will return an animation Switcher oh okay there's something wrong here okay it's animated switch I guess he did switch up okay and we'll pass some division let's say 2 milliseconds let's go for 300 milliseconds because we like to see something in animation and that's what makes it look more beautiful okay what else do we need we need to have child property that will you know be Dynamic so child and we'll see is list views if it is list view we are going to return our list notes list just like that else we will return our notes grid okay let's try to refresh this and there we go our smooth animation works so this is how you create a fully functional nodes app with create read and update read functionalities or persistent local database and a beautiful UI with grid View and list View if you enjoyed this video till now do subscribe to us do like this video this is dot bucket signing off foreign

Channel: DartBucket

Views: 4,627

Keywords: flutter, flutter tutorial, flutter 2023, mobile app, dart, dartbucket, notes app, flutter notes app, flutter project, mobile development, firebase, flutterfire, nodejs, mongodb, rivaan ranawat, riverpod, resocoder, bloc, state management, coding, code flutter, new flutter, latest flutter, localdb flutter, flutter local database, flutter database, flutter list, flutter listview, flutter grid, flutter girdview, dart bucket, flutter notes app with hive, flutter notes app with sqlite

Id: c6zrqhO2G8s

Length: 79min 51sec (4791 seconds)

Published: Tue Aug 01 2023