Provider State Management in Diary App | Diary App in Flutter | Flutter Tutorials | Learn Flutter

hello guys asalamu alaykum welcome to my YouTube channel so few days ago we created a diary application by using SQ light so some guys were requesting me to add State Management into this application now in today's tutorial we will add State Management into our existing diary application here you can see this is our diary application we already created a few days ago in this diary application we can add a note let me add a note here we can add a note let me give any uh simple title and here uh description and when we click our button here the note has been saved now let me test it here you can see our note has been added but still it is showing empty and when we click refresh button then it will show the note because there is no State Management in inside our application so in this tutorial we will add a provider State Management inside our application first of all uh let me open browser and here we will search provider flutter here it will show provider package here you can see this is provider package we need to add this package into our application uh if you don't know how to add a package inside our project here is given installing how to add there are two methods to add a package into any project first one is a command line method or terminal method otherwise you can just copy and paste into pubs spec file now we will add it by using CMD just copy it again and open Android studio and here terminal inside terminal just paste it click enter it will add this package into our project now our package has been added successfully now let me show you our project files first of all there is a model folder models inside models there is only one note you can see here this is only one note uh it includes ID title description and created at date time this is very simple next one is uh Repository repository here you can see we are using sqf light inside our project you can see here everything database name table name version number and cury to create a table inside our sqf light and in this way we can get instance of our database and here are functions to insert update delete note into our table and this is get noes function uh we can get all the nodes by using this function and we are are calling these functions directly from our screens here if you see screens and inside add note you can see we are calling directly here you can see all the functions we are calling directly from our screens but now we will create providers here let me create a provider folder providers this is folder and inside this uh let me create a provider uh name it as notes for example this is another directory notes and inside this directory we will create a new do file not provider like this now here we will create class notes provider with change Notifier with change Notifier like like this so this is the way we can create any provider first of all uh we will declare an empty list of notes uh list list of nodes name it as noes and it will be empty let me import this noes now here we will create some functions insert update delete and get nodes first of all let me create get nodes this is a function get nodes Asing function by using this function uh we will get our noes nod repository noes repository do get nodes and here we can assign these nodes into our nodes list because this function is sing here if you open nodes Repository here you can see get notes this is Asen function and it give us list of note that is why we need to use here await keyword await now it will assign notes into our notes list but important thing is here we need to update the state in order to update the state we need to call here function notify listener here you can see not notify listener it will update this state so this is this line is very important notify listener if we don't call this function then our noes will not update now here we will create another function to insert nodes insert asnc this is also an asnc function uh notes repository do insert here insert notes we need to pass here note and we will give this note from here uh required Note and Note simply and this is also an Asing function we need to call await and after this await function when our node will be inserted then we need to update this notes because every time when we insert a note then our list should be updated on real time in order to achieve this goal we need to again call get nodes function here you can see get nodes function will update the nodes again so this is very important next function is update same like insert this is also an sing function and here we need to call nod depository do update and here simply pass note and again again we need to call get notes because we need to update this date the last function is delete same like above not note this is also an ASN function again the same like above not repository not repository. delete simply pause the note and then again we need to call get notes now our notes provider is ready now simply we need to add this into our home screen uh let me open home screen if you see here uh we are using uh future Builder inside our home screen now we will replace it with consumer we will choose here consumer let me replace it now here we will use consumer consumer and here we need to pass our provider name uh our in our case this is nod provider and here a builder and inside Builder first parameter will be context second is provider and third one is child so if you have any issue uh in provider you can see it official documentation so this is very easy this is simply here we need to return any vet on the basis of condition now here uh this is Provider by using this provider uh let me show you provider dot here we can access everything inside provider here you can see we can uh access list we can access all the functions here now here we need to return a list return a list view here we can choose children's uh by provider. notes do map here we need to pass item note and we can pass here e as note and do to list so in this way it will show all the notes inside provider in this list view I hope you all know how to use list View and for example our notes list is empty this list is empty for example there is no note inside our list then we can use condition here uh for example provider do nodes do is empty then we can show here empty con Center text same like a previous empty and in lse case we can return a list view so this is the way we can use consumer inside our home screen now before using this consumer we need to provide we need to provide this provider how we can provide this there are two ways to use provider in any application the first use is globally for example uh we want to use any provider globally then we need to provide it before material app because we need to access this notes provider all over the app then we will provide here let me show you how here we need to use multi-provider multi-provider multi-provider and here child will be material app and here we need to provide providers this is a list of providers for example our application have 10 providers we can pass all the providers here for now we have only one provider then then we can use it here change Notifier provider and here create and we can use nod provider so this is the way we can provide any provider to our widgets so we can access this in all over the application now let me restart the application here you can see uh there is no error it means it is working perfectly now simply we will add our provider into our add not screen let me open add not screen here you can see if you see here uh there are three functions insert update and delete here instead of calling noes repository we need to call our nodes provider functions here you can see functions inside nodes provider let me add remove it and simply we can call provide do off context here we need to mention the name of our provider our provider name is nod provider and after that here we need to listen false and then we can call our functions so in case we need to call insert function here and simply we can pass note the same like this we can add update function provider part of context before context we need to pass notes provider listen false do update here we need to pass the note and in delete case simply provider. of context before context not provider listen fals and here we can call delete function pause the note vet dot not simply and we can remove it here if we want to get the result as Boolean we can use here a future Boolean and here we can return true because we want to exit uh add node screen then node will be deleted like this and here we can use then then and then we'll give result buan true or false a Boolean the same Boolean that this function will return here you can see function will return true and we can get this value inside then and here we can give any name and here we can simply close our screen Navigator dop uh this is showing error sorry we need to give here listen false like this now everything is okay uh let me restart application now let me add a new note a random note if I save this here you can see it is showing the notes in real time and if I update my note let me open sample title this is my updated note now it will update in real time with State Management here you can see without refreshing it is showing real time result result updated result now we can remove this button because we don't need it more if you see here inside actions now we don't need this button we can add another note now it will update in real time here you can see it is showing updated values let me add padding in list view I just forgot here you can see inside list view let me add ping only uh horizontally 15 now it is showing perfect now for example we want to delete this note click delete button and when click yes it will be deleted now you can see State Management is working perfectly there is only one issue uh if I restart the application let me show you no application has been started but it is showing empty there is no note because we don't call this function this function get notes we did not call this function that is why it is showing empty not now how we can call this function we can simply create Constructor here no provider nod provider this is Constructor and simply we can call get nodes inside Constructor so we don't need to call this function our Constructor automatically call it now if I again run it now this time you can see it is working perfectly so this is the way we can add provider into our application I hope you enjoy today's tutorial if you have any question in your mind you can ask in comment box or you can contact me directly on WhatsApp okay good luck

Channel: Spread Coding

Views: 350

Keywords: Provider State Management, Flutter Provider, Flutter Diary App, Diary Note Taking App, Flutter State Management, Diary App with Provider, Diary App with State Management, Flutter Notepad, Flutter Tutorials, Learn Flutter, SqLite Flutter

Id: KH9kzORb23M

Length: 16min 55sec (1015 seconds)

Published: Sat Feb 24 2024