Flutter Recipe App || complete Recipe App with API | Responsive UI + functional App

hello what's up guys welcome back to another amazing tutorial of recipe app complete recipe app using a free API so in this video I I will teach you how to create a recipe app using API and I will also uh teach you how to get the API key so let's start first we will create onboarding screen at home so here on boarding screen and live we will create do file sorry first we will create scen directories and D directories for screen and on boarding screen do file for on boarding screen so I imported here Library dot and I created a state list widget for onboarding screen here ask SK for widget and I will import here the uh library for on boarding screen in body I will use sizeb sget here I am creating height media cy. op context this is for responsiv of the UI to create a responsive UI we need to create we need to use the media qy for height and width so I created here height and width and stack visit inside size box and I use here uh container inside position widget so you can see that I use here H and W it means that I am creating a responsive UI so use it always uh media quy so I'm creating a new directory for constant files and I created a DOT file for images path I'm I creating a class for images path and I will use all the images F here so create the I also created the asss folder in which and I copy the images inside the assets now I am using so you can see that I am here I am uh using the parts of the images use static keywords here to get the these F easily from any uh uh dot file you can get it and access these static so I use here assets image what's the here where is there okay okay I have to reload it okay done now I use a center widget and I will use the asset image so you can see I am accessing these paths so this is not working so sometime it is not working you should need to terminate your app and then restart it okay it's working now it's fine now the uh in the bottom I am creating a container with it so here I B bottom zero so in container I use the height and width of the container and decorate the container color is will be white and B side will be circular but only the top uh right and top left will be circular okay so then I will use the Ping widget and pairing with it on top and okay top use the cons keyword to remove the warning and then I will create a elevated button in Center column okay column main dot dot uh Center and cross alignment also in Center so I will write the text here let's create let's cook delicious food so font size will be using the withd media Cy to create a response here so I will suggest you to either use the media qu for respons oness UI okay I created this text now I will use the text stle 14 will be font size and front F will be now size box for height to give the height between the text and the elevated button so I will use here the elevated button elevated button which will navigate me to the next page of my home screen so here I will give the elevated button name get started I use here get started and I will give them the text style too so white will be the text style color okay black and bold will be on withd now I will create new directory for components and here I will be used all the wigets so I will use the Google name bar copy this and you run it in the terminal so in here I will use the bottom navigation bar widget so I will create here B navigation bar a container okay so I am requiring it uh here the selected value and function while pressing on the but the bottom navigation bar now the color will be gray and the pting will be Hing oh sorry so ping will be Edge inserts. symmetric so horizontally it will be so I will use here the media Cy also for response do height and final width is equal to Media quy do off Contex size. width so horizontally it will be its sping will be W multiply 15 and vertically it will be1 so Google bar here I will use it and it's Gap gap between the bottom navigation bar items will be 10 and T Bar radius will be 100 background color of the bottom navigation bar will be gray what's the error why why it is giving me oh yes okay null safety for null safety act your color will be colors. white and color of the bottom navigation bar will be blue T Bar background gradient linear gradient to use multiple colors we can use the linear gradient property of the gradient so I am giving here multiple colors so I will use linear gradient you can see that I am using here multiple colors so here this is I am creating the bottom navigation bar the color will be start from top left and end will be top right ion size will 30 and T style of the botom navigation bar item will be 18 and padding will be horizontally P 01 and vertically it will be also 0 1 so the tabes bottom navigation bar will be color will icon will be copertino icons I will use here copertino icons home and text will be home so copy and paste it and then change the title the text and the icons category search and saved items I mean saved here we will create uh saved recipes icons. uh ion. [Music] categories yes yes ion. categories and search in bookmark here we'll use big bookmark solid and shopping card yes so I will create a new DOT file inside screens for home page so first import the do file do library sorry and create a state widget here and state sorry scold widget here so create a variable for page [Music] controller and uh index current index of the botom navigation bar item and we will initialize inside in it State the page control controller the initial page controller will be the initial page will be page controller and here we will dispose the controller uh okay now we will use the botom navigation bar in what okay yes sir so here we will use the widget we created recently so we will give the two properties on tape and selected item here so selected item will be zero index and here we will use page controller. animate to sorry yes animate page so the page will be index and the duration will be duration millisecond will be 200 so as we click on the next item it the St will be will be rebuild the widget tree and it will initialize the page controller the in the current index with index selected item will be index and inside body we will use page view where we will give the current index is equal to index and physic we will use here never SC SC physics inside Shon we will use the widgets for navigating to the screen while taping on on the bottom navigation bar item so I created here four vits Navigator do push so I will n get here to the homepage okay use cons to remove the Ving okay I okay okay amazing it paring fine but it's not navigating to the next screen unchange AR tape change select an index will be zero so now working so I'm writing here the explore image image path so assets not the image name BNG okay I'm using a new DOT file for home screen inside the scaold I will use the body in save area single CH scroll view for SC scrolling and I will give you pting to all the widgets and I will use column Widget the cross will be cross alignment will be do start find so I will use another [Music] with okay use the not a bar bar sorry inside [Music] draw so this is the best way to create a widget and use it in the entire your uh project so I am creating a home uh sorry a bar and I will use it for multiple times so always create a viset inside the inside a component directory and use it for multiple times it is a best way so I am giving it the Tex stle then a spal widget import the library okay remove this and use the homepage okay and how okay it's fine now size bux for so you can see that I am using the media Cy and I told you that for responsive for the UI responsiveness use the media e so I am giving the size box height sorry so now I will create a container and give the height the container and width will be KW w means that uh the entire width it will get so in inside decoration I will use the aets image why it is not working so I told you also that sometime the asset image is not working so you should need to terminate the app and rerun your app so I terminated the app and I am now the rebuilding my a so I will use the fit property of the image come on it's working too much time come on okay so if your image is not uh your asset image is not working okay it's running okay good congrats so as I mentioned you before that if you're uh image s image is not working in your I UI so don't worry about it just terminate your app and rerun your app it will working fine now after image I will use uh bux AOW wiet I will use uh main AIS alignment do space between okay so I am creating uh T Bar here inside draw so I create I am creating a text field withit uh after the Tex what are you cooking today so a new do file inside component and I will here I will create text field widget and I will use this trick field wiget for multiple times okay I imported the library in here I will use container wiget inside container I will give the height the height will be 06 and I will decorate it using box decoration the Border radius will be circular and the Box Shadow will be Bo Shadow sorry color value like 26 and the offet will be 31 okay well and good use count keyword to remove the warning text field wiet uh inside the container final we will be media cy. of context. size. width so here I am using a responsiveness for the text file color will be black and input decoration on the Tex field F will be true and fill color will be colors. white thetic fuel will be filled with the color with the white color and hand text will be what what's cooking in your mind okay Welling good so the Tex style of hand 12 color will be gray and font size will be 03 10 ping will be H inance not symmetric hor horizontally it will be 20 and B outline input B from the T field B radius will be circular F in Border Side will be b side or none so I will use the the same properties and style for the focused B when I Ted in the b in the text field and the keyboard appears it will not change the color in the cursor or the text style blah blah blah so I will use the icon. search face the fix icon okay or fine and size will be so now you will use a T Bar widget and create T Bar widget inside component I'm creating a T Bar widget so import the do library and use a straight list wiget and I named as the bar visit you can name you can any you can give any name for do file and the column inside column I will use cross. start cross alignment so remove the cons keyword to use the container you cannot use the cons the uh container containing con keyword so use the height for the container and Shi will be a bar it S Bar un selected label color will be red and label color will be or the selected will be white divider color will white I don't want to see it the divider so it will not appear in the vi okay what uh the indicator box indicator color will be red box water site b side will be circular so use here media cury for width horizontally it will be 02 and I will write here the t t items so you can use here any text or any wiet inside a bar so I will use a breakfast T item lunch dinner and I will quick okay what's working fine [Music] now another Tak class for item so I am requiring here the title or the tape bar item and box decoration for the container border will be not all balance. R so guys this is a simple UI I am I will meet you at the API working so just see and look and watch the UI understand how I created it and then I will teach you in the API in API working so I am creating a constant fun constant function file and I will use here the httv package for using and accessing the API of the recip app so just copy and paste the inside the terminal and okay at the M recipe API search here and you can see that list stop recipe app will appear so just type on the first link okay and then get started click on get started so just go to dashboard okay yeah search API click function [Music] function string API will Bey just nutrition visit cck API developer portal again re create a new application cck recipe search API application your API so I am creating a new variable ID and I use here ID and another variable for the key to store the key my RB app so just copy and paste here now you can use your API so HTTP page use to get the response from the API function HTTP HTTP function response recipe response recipe post po response onlineon jonl sorry respon Jason form list list inside List It containing a recipe J an object so now I will use a far Loop for Loop to recipe. recipe here uh the same function I will use here to get the response of API okay string for the recipe which we will search here and I will use the search is argument here what's the problem I am getting sorry it is not working now it's working oh okay it's working fine now so I will use a future Builder to get the response and uh rebuild my Vis my this UI if any change occur in the API response so I will use here the Builder function context and snapshot snapshot is the object which will access the API response in all the API information it will store this snapshot here I you can see that I use here same snapshot now if snap snapshot has no data you can see I use a n variable so if is no data so text will appear no data and if the connection state is waiting so appear a circular progress indicator in this Center and if snapshot. has data return list view. separator Vis it so the it okay there list a list will be up map map you can um I am telling you that map is a data m is data type up key and value string and dynamic app key and value and I will use here the map okay yes now it's working fine time 2 and return the container here I will give the margin to the container AP [Music] simp next video simple uh understand this is a map data type map image image will be snap and image here you can see that image so use always use the same key of the respon of the API response or I really s I really sorry for that I my communication skill are really weak so after the after the image it will show Arrow and inside Arrow two Tex will appear one part calories total calories of the recipe and I will use the font size will be0 so why it's not working item count will be snapshot. data do length Jo so okay okay so inside T Bar view I will use the T Bar item here so in first T bar which it will be home T Bar view home tape bar view again and inside inside home T Bar I I'll pass I will pass sorry I'll pass the recipe item so just write any recipe here any recipe key here just write here randomly I'll write breakfast lunch dinner and click now there is gone it is waiting for to get oh no data what's his data invite is giving me no data the size B but I think it is not the issue of size B okay and use remove the wrong keyboard neither it is giving me error not the response but uh just remove this size box why it is not okay now it's working fine you just need if it is not working just you should need to terminate your app and then rerun your app I just re okay it's working fine now good amazing and you can and you can see that all the recipes are now displaying here amazing just WR here kores 10 minutes uh so now we are getting the recip response sorry key and value response API St sorry stateful and detail screen when we tape on the recipe it will navigate to the detail screen of the recipe so I created here a detail screen and it will I requiring detail screen it will pass the recipe to the detail screen so I am here okay where is yes here you can see it is a map and I'm passing here to the detail screen now I'll create a scap fold inside skip fold I am using a background color of gray dot shed inside body I will use a column wiget and I am using here a strike wiet so I just navigate to the detail screen but it is you you can see here it is blank so I am using the same media qu here for the responsiveness of the UI so I'm giving the height and width decoration for the container okay I will use the same image which is appearing in the home [Music] page so just copy this response and paste it here okay and you can see that it's this is sponsor of my API so I use here the same key as I use image okay it's working find now position for Circle and I will use a big button inside Circle AAR with the background color will be white so Sor colors. red isent it will be from Top it will be 3 sorry okay it's working fine now after the St Main Cross will be from start and then I will use the children property of column the name of the LEL the name of the recipe yes you can see the same key I put it here okay oh sorry outside from the steg use the Ping now it's working fine now you can see the recipe name use cons con to remove the now use the size box after the label of the recipe now I am using the total time which is in double data type you can see this is double data type the total time but I am uh converting it to in integer data time to [Music] string I use okay time so after the uh name of the recipe I will create arrow viset and inside dra I will create a circle circle button sorry so here in components I will create a circle button widget so import the library and create State list wiet so class name Circle button okay and import here the library so I will requir here an icon button icon data sorry icon and string label require this icon and require this title so here I will use a container column sorry so return here for responsiveness I am using here the media cury and in inside Circle I will give them radius and inside the child child property I will use the center and I will put here the icon which I will pass from the next from the next screen so I will give them the color white and background color will be red ENT so here I will pass the icon and I and title size box for giving um space between the two item I will use here the media query for respons as I tell you told you before and I will here text level so from here I will pass the icon and title so icon will be icons. uh share and LEL will label will be Shar copy and paste I will create four item so one for save one button is for saving the recipe and one for sharing the recipe and this one part A is okay well good amazing and uh it will show us the table chart create a con cons to remove the warning and after these button I will create a size box to give space vertically and uh now I creating a row wiget spacing only ins I draw I will create a text widget in Direction I think you are getting this this is so simple and I will uh explain the API working this is so simple I am creating just a simple UI so I am giving here a vertical space using size box sorry vertical not vertical horizontal and and I using here uh elevated button elevated button [Music] start okay now now after this row I will give them a vertical space using a size box widget then container inside container I'll put the height of the container I'll give them the height and width and then inside the child I will create the widget color will be white and expanded digit I use is it here so I am using a clip path diget for creating a shape you can create any shape using a clip path diget so just focus here that I am going to create a clip path a Clipper custom Clipper ingredient item sorry ingredient required T sget I will give them color font size will be more FD will be B and color will be white so to to remove the Ping up right and left of this container I will write it uh so now I am creating another expanded wiet with flex one so I am explaining a bit uh the expanded widget expanded is a widget that uh expanded widget it takes the available space the expanded wiget takes the all available space and when we use a flex inside the expanded it takes a portion of the available space here I use the three and one so it takes the three portion and one sorry in one part of the oil space I am creating another dot file f for the custom Clipper so I am importing here the dot library and creating a uh St custom clip path extend custom Clipper what uh yes custom Clipper so we use the custom clip Path property of the Clipper clip sorry of the clip path to create any shape with it any container with a specific shape we can create using a custom clipper so you can see dou X and Y we give them double X will be the xx's will be all the size all the O size and the okay for so we will return here the false property and import here the custom clip path okay okay you can see the cust the magic of the custom Clipper so as I tell you that we can create any shape using custom Clipper so you can see the magic now after the this ingredient required I am creating a detail list of ingredients so for this I will create another dot file in component uh so ingredient items let sorry importing here the dot library and creating a state L sget named ingredient list so import here the library of this file and I will here required a list of map Dynamic sorry ingredients required this. ingredients so I will pass here the ingredients ingredient will be so we will look at this from the VIS do ingredient this is a key you will see in the API the that ingredient here you can see that there so yes this is a list ingredient is a list and use the same key as mentioned in the API response so here I I passed the ingredient list and using these this uh list I am creating lp. Builder with it physics scroll physics par SC scr physics I don't want it to be scroll so I mention here SC SC physics item count will be in the list length so ingredient index and two string quantity is so just look at this key and use the same key and create the quantity quantity is a double in the API response so I am converting here it to 2 in mean to the integer and I use the this for the N safety so I am returning here I am creating another ingredient item UI inside the component so ingredient item so I am requiring here a string uh quantity and uh name sorry quantity food and image URL required this. food requir this start May and require this start image URL so from here I am passing the quty which I already declared before and image URL with ingredient index and it here I will use the image URL so this is I am doing the this far the N safety and me will be ingredient index my you can see here use the same as uh the same key here I this is I am what doing for the safety so here I am just food will be the ingredient index food and use the same key otherwise you will not get the exact value will get nothing I mean so I am giving the container margin in I am giving the margin media cy. off context. size. width yes vertical it will be and horizontally do only top and LIF so top bottom and left is so the color of the container will be white and okay write the color inside the decoration otherwise you will get a error always use the color Inside the Box decoration if you use this outside of the box decoration you will get a error so box decoration here I'm giving the color and the blur radi is using box Shadow and half set will be okay what is the what what what is there so okay so just start restart your app and it is gone okay so sometime the error occurs and we can solve this by terminating our app and restarting them again so now you will see that the error is gone and here I'm using the image do Network and image will be which I required here which I passed from the uh previous screen it I will use it here okay now working fine amazing okay okay working fine amazing now you can see that the image and uh the title May which I passed from the which I passed from the another dot file is I am using here and it is displaying correctly Now text sget and I am using a Tex style property of the text to give the style and I am using a size box vet to give vertical sorry horizontal space and now I am using a icon sorry icon this icon is for storing the rece the item saving item sorry now you can see it is working fine okay use the cons word to remove the warning what is there okay so working fine now now you will add the functionality to the button add these uh image copy and paste inside the assets okay go to your images path and static okay save the images SP here declare and save here is say inside is it say request. PNG now just write any name in the give the exact exact path of the image otherwise you will not use you cannot use the image correctly it will give you a so this is simple and simp very simple UI I'm creating and just look at this and implement this in your project simp comp constant directly sorry directory or classes functions directory model class I mean so inside the constant I am using here the images PA to access it easily and use it anywhere instead of using the images SP every time so I am creating another recipe categories f file ree category use yeah background color with opacity .1 and inside the body I created padding wiet and gave the horizontal heading response [Music] mpob bottom your right any side worklow REM respon responsive expanded flexible view G View implementation col now I'm using here the size BX which for creating a category list of the recipe another dot file inside the constant or categories list list of string for using the title I mean text ofp so this is just the beauty of the code for using different dot files or classes or list and we can access them from from another file so this is a name list and here I'm using images list you can see that I am using the images path easily now instead of uh writing the every image path here inside the list so I created another D file par re category whichit this is simple UI you can see simple UI and simple I created I get the response and use the API very easily J AP column inside column I am sorry okay container inside container so here I'm using a recipe category item so I am caring the Box decoration to The Container model radius will be circular and image will be a image which I required here so after the container I am using a center wiet cont text so we'll use here the list of item sorry res set image reusable and code key View so you can see that I use here this sometime the assets image are not working and some properties and some changes are not not displaying in our UI so we just need to terminate our app and then rerun it remember this that sometime if you are getting any error so you just need to terminate your app and then rerun your app so you can you will see then that your error is gone so now you can see that it is displaying some images but the one image I think it part is incorrect yes you can see that Dage Dage path was incorrect so it was not working so it is now correct I think anyway we will just terminate uh after a time and it will work in okay amazing now it's working fine [Music] so after the text for you I am creating another list of uh categories item I mean categories recipe categories for item Builder we will create right Builder method and just cut it and return inside the Builder view Builder and yes Del SL delegate with cross p and cross is Count will be four it will display four item in the cross list cross access it will for item use I'm giving the horizontal noal space between the items and item count will be the we creting another list for these file are these categories list of categories so chocolate uh item you can also give and use any random recipes here and name here I'm just my uh creating a list of categories item randomly as I use the images inside the assets folder another list of images so I am creating a list of images to display the images categories images so I can access the images path easily from anywhere for multiple times I can access the images path IM spot use is a and you can access them easily so now you will use the list here of images and uh string is title of the category here so I'll pass here the images list for okay it's working fine but the images are not displaying why I don't know just give them size box and use okay using here the images assess images do is index just how reload your app okay now it's working fine but the one image is not working why I don't know I think it path is incorrect okay not PNG okay now it's fine after these categories I will create the size box to give the vertical space and um another text your pref your preference your text style will be uh board font pit and font size will be 05 after this TT I will create another categories of item so inside draw I will use the categories item recipe category view I'll just give them the images SP and name of the recipe name will be quick and images will be I'm just giving them a random images part and name you just need to learn from [Music] it okay it's working fine in there recipe category view file now now it's working a bit much beautiful okay it's working now fine now while tying on the any category item it will navigate to the all recipe of that uh item so using H forit and uh I will use the bar body will be so here I will use the future builder for fing for getting the result of the API so future will be constant function. get recip so it is I required the recipe string so I will pass here the this recipe so inside the Builder property method F sn. his data so I'll return a text with no data LF snapshot. connection state is SO waiting so just return a circle progress indicator so I am returning here a pedding widget I give the pedding do only from right so I will use the media query to give the Ping off context. size. height right it willb point 034 and from left it will be 034 promp height from Top it will be 03 and I will give a grid view. Builder to the CH of the Ping here I will use the Builder method and it will SL grid delegate with cross exis count cross count will be two and Main exis spacing will be one and here are 10 and shield spacing ratio will be 0. 6 over 10 snapshot. data do document uh index so I am returning here the container color colors. and column inside column I'll will use the text inside the expanded okay fle will be three I already tell that expanded widget is used [Music] for deserving the available space it takes all the available space the expanded widget so when we use a Flix so it takes the three parts of the available space so inside the St I am uh giving the children property and using a container and here I gave the B radius and image will be the network image deoration inside decoration SC shot and image okay fit box fit. cover so I will R them and G detector and give the untape property so while un taping them it will navigate to the all recipe screen all recipe here I will pass the recipe string which I will give from the categories index which I already decare so I will use here also G detector ontape property on tape get. push material page rout and I will pass here the recipe from here is named which I required here so just try yes it navigate but here it will it is showing us no data why what did I do why it is not giving us the response where is the so just I'm giving here the position inside position I am creating a container vet I'm ging here the height and width color will be red isent so red but radius will be circular radius circular in and inside the container I will write the text in the center so the text will be means then I minute which I declare here not two string and time is equal to snap total time 2 end I am converting it uh double to two end I mean to integer and here I will give Tex stle to the minutes from Top it will be eight and from left it will be six and the child will be a text I'm using here the name of the is label of the recipe in I am giving here font size font width there is the style of the text use your con [Music] and okay okay sorry now it will work fine because I put the null safety in the wrong place so just give the chill aspect ratio amazing now it's working fine okay what amazing so now I'll use the top and Li ping to the position with it uh okay fine now it's looking amazing so here I custom bar so now inside the component I am creating a bar widget for creating the same AAR for multiple times so we don't need to create a bar for each skip fold each screen so I'm requiring here the title and the big button so size box so just focus on them and remember to use the same as I write it here otherwise you will not get the exact uh response and the exit a bar so now it's working fine and return here size Dot from right uh is K2 power height okay now it's working fine use the cons ke to remove the warning and I will use a bar title so I just I just uh I will just pass the title and the B is bull and uh I will use the a bar easily I don't need to create the properties of text title and B color Center title blah blah blah I just need to pass the title and the back is BU if bu is is is at if bake is true so it will show us a big button otherwise uh we will not see the big buttton so here I am using the recipe which I get from required wow amazing now it's working fine it looking much beautiful so [Music] okay just got the waiting slam shot waiting property wait sorry waiting response and put it here so it will now working fine you can type on any category and it will navigate to the exact recipes list you can see beef will be here and you can use any categories here so now I am creating adjust detector while taping on each recipe it will navigate to the details screen navig get to the details screen of recipe recipe detail screen s detail recipe detail screen okay item will be recipe okay snap item will be Snape I am passing the map data to the next to the detail screen while un typing okay now it's working fine amazing you can tape on any recipe and it will take you to the recipe detail now inside screen we will create another dot file for search screen and I am importing here the dot library and creating a stra list visit with name search screen and removing this and writing thear screen here skold and bar so you can see now that I am using the same AAR for multiple times just passing the title and the B is bull so here so here it will not navigate from it will not pop so I am just passing here the false keyword inside body I am creating a padding wiet uh in padding I will give the media cury he and media cury width okay you can see again that I am it's not sing there I am using the same text field widget here again as I tell as I tell you before that you can use the same widget for multiple times you just need to create a component uh and use it for multiple times so as it [Music] a string list so which be just to create it amazing I am just declaring here a tag as list and use it here inside RP so return here elevated button in sh will be text inside text I will use the [Music] label D to list I will use here D to list okay the error is gone okay amazing now you can see okay navigate doat do push I will navigate it to the all recipe screen and I will pass the label as string as recipe so while I'm taping it at n getting me to the recipe all recipe screen wow delicious food so you just need to start the recipe and cook it okay it's not working why I think I just need to rap the icon with untape property text field controller here controller. switch okay now I am uh riing it with this G detector in on property I will navigate it to the IP screen so what I write inside the text field I will pass it to the all recip screen and recip I will pass the search. text a string so just look at this and just write something and Tye on the okay now now it's working fine too now just use the URL launcher just copy and paste it inside the is I get it already and use the share Plus sget sorry package copy it from here paste it here and tape on the pubg so I get it inside here and create another do file for sharing class share recipe use the static keyword to access it from any. file share is I am creating a method here Asing method share use here it share do share and use any so you just need to uh paste the link here to which URL you are navigating to okay rape it with history detector while un taping it un [Music] tape while I'm typing it call this function which I created recently yes this one and here I will pass the URL to which we are launching we are navigating to this you can see here the response is G is giving us URL and this URL we will launch to start cooking class start cooking future okay now it's sucessfully you will see here that there is Method will work fine URL so Tye on any recipe tape on the share functionality wow amazing now it is working fine and while typing on the start button will to theur to navigate to this URL on the exception could not launch is share sorry start cooking button you can see here that we are getting this error so if you are getting this err e you just need need to terminate your app and then rerun it you can get it anywhere so you just need to terminate your app remember my words when you get this error same this same error any anywhere in your project so you just need to terminate your app and then rerun your app so then you will see that there is gone now go to the browser and search for high fletter high FL is a it use for storing local data data storing locally so just copy it here and pu get install this package in your package sorry in your project and now we will initialize a it I mean the you should need to initialize have. and it flutter before before the run app now have. open box just any name you can uh specify any name to the I just name and shopping variable create H.B Shing so my box listener for listening the to change and here we will use the Builder methods context box and hyon and we will return this this Tes and remove this and remove this okay bull exist is equal to bug. contains key but uh if exist if exist equal to equal to true then show the icons do done if exist. is equal to false exist then return icons. sorry icons dot sorry icons do uh done okay and color it to colors. Green in size will be 07 data recipe Circle outline dat just proper put it food food is key sorry put string value is equal to [Music] food food and me and a quantity so as value use it here so is it working fine or not we are just okay amazing now you can see it is working fine SK fort. size. barog item added successfully you can see that it is adding to our H database successfully now in screen we will create another dot file of shopping screen import the dot library and create a stat Vis up shopping property so here we will use this okay use the skold visit inside skold use the a bar and as we created a custom a bar so just use this a bar component and pass the title and B is false so we don't need to navigate it from here is back so just FAL it in will list my box I create created a local sorry I created a variable with high dobox shopping here I open it in my main do dot so it will listen to the my box so variable will be data is equal to bu. values. to list and return list view. Builder item Builder will be context index and we will return here the values so item count bu. length return a list style inside list style the title will be container right uh sorry simp it is very simple so I don't need to explain it and where it is okay data. index Flex will be three and uh just reload your pop menu button index so item will be turn list of item popup menu item share and the second will be for delete okay copy and paste it here and just uh change the text and value as to delete con keyword use con key and remove okay un selected F value is equal to is equal to deleted here I am I I am checking the condition if selected item is deleted then delete item else if it is sharing then share do is I created the share method before so I am calling here the share and I will share this recipe light I am creating a method for deleting the item from my high local database so I will require uh as as Asing it will be future function so I should need to write I think in I will use my bux my bu. delete index you inside the delete fun method delete it so I will use the index okay it's working fine now you can why it is not deleting it is sharing yes it is sharing good wow it is amazing it is working fine so you will see here that multiple items are added successfully so I can share or delete it from here so we get chocolate recipe now I will create a table for Kor please and uh show detail dialogue and creating a dialog widget here Plus show dialog so the I think the API work are done so you just need to look at this log if you want to learn so just watch the video till end so I think any shape creating any type of shape creating we use the Clipper which clip clip path and another thing we use the Val lenal build wiget for listening to changes in our H database and hi is a local database we used to store the data locally in our app storage sorry in our phone storage [Music] and we use the launcher URL launcher and shared okay why it is not working so you just need to watch the video till end and you will learn a lot of things and about it that my communication are very weak and I am trying to teach you a lot of things but I cannot do it so I really sorry for that yeah and I'm trying to teach you but I am unable context build context in the the map okay amazing it is working fine so guys we will inshah meet in another amazing video you just need to watch till end this video to learn a lot of things and amazing things as I mentioned in the start of this video so goodbye for now and watch the video till end to learn a lot of things is I am unable to explain all the all the things you just need to learn from it yourself I really sorry for that so goodbye guys we will meet in another exciting video then I will make it very easier the next video inshallah so goodbye for now

Channel: HiSyntax

Views: 10,014

Keywords: recipe app, flutter complete app, API, api complete app, dart, oop, ai, python, advance flutter, flutter beginner, programming, coding, os, flutter responsiveness, flutter web, google, meta, robotics, arduino, ios, android app development, ios app, app development, web development, desktop app development, react, react native, imran khan, computer science, programming language, c++, firebase, firebase notification, flutter gaming, adMobe, ads integration, FlutterTutorial, FlutterWidgets, top

Id: t70SqEdRVBw

Length: 154min 17sec (9257 seconds)

Published: Tue Mar 05 2024