Favorite App using Provider | Flutter State Management

hello there in this video i am going to build a app similar to this one where we will have list of words and we can click on the favorite and we can favorite them and we can go to the favorite list and can unfavorate from there or unfavorite from here and we will do all this using provider so let's start from here we have a main function after that we have a material app inside material lab we have home edge home page so we are going to do this using uh english word package so using this package we will get list of words so let's go to the package or pubspec.tml file and let's add this package so once you add this package you will find in this package that there is like nouns dot take and using this you can get uh nouns 50 nouns so what i will do here so i will do the same thing final words dot nouns dot get basically take and from the list of nouns we will get 15 ounce so when you apply take uh it gives you iterator so you see you get a iterator and in order to make a iterator to the list we just apply to list now using the list view builder what i will do i will build a list so here i build a list for words and let's apply a list time and that's it so it was simple and in the trailing we will add icon for favorite and yeah that's it so you see now currently nothing is happening but we made a app where we have list of words moving forward i will create a new folder called provider and inside this folder i will add a file called favorite provider dot dot okay so now we have favorite provider so let's create the class favorite provider which will extend change notifier and here i will have a final list of string which will store all the favorite words by default our initial value is going to be empty this is a private variable so i will make a getter so that i can get the favorite word outside of the class now i will make a method called toggle favorite and basically it is going to take a word string word so what this will do if the word will exist so word dot contains so if the favorite word contains the word which we are trying to do the favorite we will remove it and otherwise we will add it so once this is done we will do notify listener i will make one more method here which is a reset so or we can say clear favorite so this is going to clear the favorite which means it remove all the item from the favorite so this provider will be tasked for you to like words cannot be let's remove the file will task for you to use this clear favorite method okay i will not use it i will only use toggle favorite so so that you can also get the idea how things are happening so now it's time to use the provider package so for that we will come to this url and copy this after that we will come to pubspec.eml and add the package once you add the package after that we just have to wrap our material app in change notifier provider so whenever there will be any change it will rebuild the app or notify the app and based on that notification the app will rebuild so it gave me a error because i did not provide anything here so let's provide the child and give the child so now things looks good if i restart everything will work as expected okay no error moving forward now we need to call the provider here so final provider in the final it was a typo so provider dot off and context and here i have to tell the class name in general okay so that's it so now whenever we will uh click on the button we will call provider dot toggle favorite and here we will pass the word that's it so now if i click on any of the favorite icon it will favorite the icon but we are not able to know if it has been favorited or not so for that we will update the icon this is going to be the easiest way to know it to check if any word is favorite or not i will make a method here which is bull is exist so this will just tell us if this word exist in favorite or not okay so using this one i can check if that word in what exists in the list or not and i will return if exist or not okay that's it so you i will use this in our home and this will decide which icon to show so i will say provider dot exist and i will pass word here and after that this will say true or false when there will be true i will so a favorite icon otherwise i will so favorite icon border if i save it you see so i favorited those and those were favorited but there were no individual size sign or symbol so now i'm going to also make a color change which will make it more better okay awesome so now you see we got the favorite if i tap somewhere i get the favorite like visual change now it's time to make a dedicated page for favorites so for that i will make a floating action button extended where i will have a label which will be basically a text and which will say favorite and then i will tap on this that this would open a page a dedicated page where we will only so favorites word so for that let's create favorite dot dot and here i will create a stateless widget that will be favorite page and which will return a scaffold with the app bar title as favorite and let's remove unwanted import and that's it so now uh whenever i will tap on this button i want to navigate on that page so for that i will use navigator.push and let's make the route now material page route the builder is going to be context and it will just return favorite page let's add const here awesome so now if i click here it goes to the next page so let's come here let's write the code for the provider which i just copied from a previous page okay things looks good now i will again copy one more thing the body part why because this is also list of words so let's write body and this one that's it so here i will come and say final words and this time the words is not coming from that english library this is coming from the provider from the favorite so you will find that i am getting error expected and identified remove it okay so you see we are only getting favorite word here in the previous page we were getting all the word which is coming from that english word library so that's it i hope you got the idea there is still one thing which you should do which is clear favorite basically if you want to remove all the favorite word using one button click so this is task for you do it and that's it thank you

Channel: Nitish Kumar Singh

Views: 7,048

Keywords: Nitish, Kumar, Singh, flutter provider, flutter favorite app, favorite app provider

Id: qi9KJ_lCra8

Length: 8min 12sec (492 seconds)

Published: Sat Aug 20 2022