Flutter 3.0 & Rest API crash course, build a store app

hi guys and welcome to this course in this course i will cover the rest api integration and a floater application but before that i tell you more about this course let me introduce myself my name is hadi and i have a master's degree in computer and communication engineering and currently i'm working as a data scientist i am a five stars rated instructor here on udemy and i have several courses related to flutter i will leave this link for you in the description so you can check my courses out moreover i worked for a while as a mobile developer and i learned about flutter then i decided to share my knowledge with you now let's come back to this course main features in this course i covered many interesting topics such as http requests error handling on scroll pagination theming and more in the next tutorial i will show you how our application works and show you the features now let me talk a little bit about this course requirement and of course don't forget to read the description so about the description you can find it here so at the course main page and of course read it and you'll know what you will learn in this course and it will answer a lot of your questions now let me come back about this course requirements so this course actually is for beginners and beginners means that you need to know a little bit about flutter widgets so you need to be familiar with the floater widgets in order to follow along with this course but if you don't know anything about the rest api of course it's not a problem and for the state management it's also not a problem at all but i just want you to be familiar with some flutter widgets in order to not find the facility and the ui section hi guys and welcome to this tutorial in this tutorial i will show you how our application works so when the user open up the application for the first time this screen will be the main screen and it will be shown first at the beginning we have this text field for searching then we have the sale widget then we have the latest products in here and i'm showing only three different products if the user wants to see any products detailed he can press here and then we will have a carousel in here that the user can see multiple image for each product and note that this is would be a fake api so the data will not be 100 correct but this is will be good for practicing now if i go back and press on this item for example we have also this product now i will go back if the user want to see all of the products he can press on this button and then if i scroll down now i arrived until the end of this list and i fetched more items and this behavior is called pagination and it's very popular in the recent apps such as amazon aliexpress and so on so when you scroll more you will fetch more items so if i scroll down now i fetched more and now here it is and every time i'm scrolling more i'm printing this response so now if i try to scroll again i arrived until the end i'm getting more results so now here it is okay and of course this is will be covered also as this course now let's go back i don't know if you noticed or not but we have animation between the screens so when i navigate to another screen i used a fading animation now if the user for example want to see the other users inside of the application he can press here and he will see the other workers or customers here and then if you want to see the categories it will be available in here now the user cannot see the products per categories i will not implement it in this course but i already covered it and my other course on udemy which is this one the frother grocery app with firebase i covered a lot of topics and it is around 18 hours so if you want more advanced things um you can check this course but it is related to firebase not the rest api and this course will be dedicated for the beginners and advanced level and the flutter or for people who doesn't know anything about the rest api where i explained everything and adds so i think that's it for this tutorial this is all what we have in our application so i'll see you on the next tutorial and i hope that you like this course and if you like it please leave a 5 stars rating see you hey guys so in this tutorial i want to tell you that you can find the starter source code the ui source code and the full source code on github so i will leave the links for you in the description and i strongly recommend you to clone the starter source code to start along with me and to have the same structure so in here i added the assets folder and i set up the theme and so on so you can see it in here and i explained everything later on in this section so i strongly recommend you to clone this starter project to follow along with me and don't forget to start it to reach the maximum number of persons now for the second one this one contain the design so with this source code you will have everything until the design and for the third one in here it contains the full source code until the last lecture of this course okay so of course i will leave these links for you in the description and see you soon in the next tutorials hi guys and welcome to this section so in this section we will implement the ui part of our application anyways this code you can find it on github so feel free to clone it if you wanna code along with me of course the link you will find it attached to the resources and if you are watching this course on youtube you will find it available in the description below so now i will walk you through what i did in here because i set up the theme and i added the assets the images that we will be using so uh here the application it will look like this so what i did basically is that i initialized or create a brand new project and then i set up the theme and the main.dart file so in here of course i changed the title and for the debug banner i removed it from here because i don't want to see it so in here i initialized the theme and if you don't know anything about the theme i have a clearly explained tutorial on my youtube channel about how to implement dark and light themes in a very efficient way and also covered how can you use shared preference in order to save the theme state so of course this link also you will find it attached to the resources or you will find it in the description if you are watching on youtube now let's come back to our code and in here i added the scaffold background color to make things clear for you i will choose in here colors the thread for example and now if i save it this scaffold background color will directly change and this is will be helpful for us because we don't have to come to the screen that we are in it and in the scaffold in here we don't have to type for example each time background and specify the color so in here if i say for example colors dot let's say anything blue and then hit save it will become blue but i don't want to change it every time like this so this is why i set up the theme directly from here now if you are wondering where are these colors coming from i added in here a folder and inside of this folder we have this file and in this file i initialized some hex colors that i really like to set up our theme okay and in the main i just assign it to it and this way is really recommended so later on if you want to change something and or if you have multiple themes you can come to this file directly and then you can change it from here now i want to talk about something else for example i set up the upper theme and this upper theme it will be available for all the uppers and later on when we start implementing our uppers i will show you how can we manipulate it and how can we benefit from this code okay so i will come back to this code later on and explain it more for you so all of these lines belong to the theme and as i said if you are new to all of these you can watch my tutorial on the youtube and everything will become clear for you now as the home we have the home screen and anyway i will start the application just to revert the changes so as i said now we have the home screen and the home screen you can find it in the folder called screens and in here we have this home screen so about this screen as you can see we have this text and of course we have a scaffold and i put it in the center for this text of course this text will be removed in the next sessions and if you are wondering about this gesture detector don't worry about it now later on it will become clear when we initialize the text field so now one more thing i added this asset folder and inside of it we have this images folder i added four different images that we will use later on in our application and of course this path must be added to the assets inside of our pubspec.tml file of course if you are experienced and fluttered you can just add the images path like this and remove all of these and now you can have access to any of these images also but to make it clear for you i will just keep it like this okay so what i'm gonna do before that i end this tutorial is to copy this and now for example i'll i'll say or in here and then i'll paste it for you like this okay so that's it for this tutorial in the next tutorial we'll start implementing the upper of our application and it will look something like this and as i said we already set up the theme for the upper so i strongly recommend you to try to implement it by yourself because it will directly look something similar to this so i'll see you in the next tutorial hello guys in this tutorial we'll start implementing the app bar and we'll use custom icon so for that we require a new package which is called flutter this package is for icons and it has three different types of icons line bold and the broken so you go to this package website and then of course read the readme to know how you use it and then go to installing tab and then you need to copy this and come back to your pubspec.tml file here this one pops back to tml file and then you need to paste it here and then save your file cut the process and run your application again anyways for me i already added as you can see and in most of the cases you will find that i already write the code and i will explain it in details for you and this way of explanation will be done only for the ui part so later on for the state management or for the rest api i will type the code with you and explain each line in details so don't worry this course already requires knowledge and flutter and if you already experience with flutter you will not face any issue to follow along with me and i asked my students already and they told me that they prefer this way so this is why i will use it from now on okay so now let's go to the home screen and as i said i already write the code for it and of course i will explain it for you now so for the app bar here it is and it will look something like this now for these buttons these buttons i created a new file but first i created a new folder and inside of the of this folder which is called widget i added this upper underscore icons the dart file and this one is actually a container but the user can press on it okay so what i'm doing here actually is that i'm passing a function of type function of course and then i'm passing icon data to percent the icon that i want so i want to make my code shorter as much as it's possible so this is why i generated this widget and make it dynamic based on these two attributes or parameters okay so in here we have this container and i gave it a shape of shape circle and then i gave it the color of the card color which is coming from here because i already told you that we set our theme so this light card color is coming from here as i said and now as a child for this container we have this icon and to give it this cool space i gave it this padding of course you can play around with this padding and if you don't like this color you can choose any other color so if i choose color the thread it will be red here as you can see so i'll just keep it like this for now and now i will come back to the home screen and then i have the upper initialized in here and to add the icon here to the left we need to use something called leading and to add any icon or any widget to the right you need to add the actions so now if i copy this and paste it once more and save it i will have two different icons here okay but for the reading it's a simple widget you can wrap it by a row in order to add multiple widgets to the right okay so now i wrap it by row and if i paste it like this and save it it will appear like this and as you can see we have some overflow error of course we can wrap it by flexible widget but you don't have to do this since usually most of the modern application will only have one button to this side okay now if i save it as you can see the overflow error disappeared but as i said it's not recommended anyway you can play around with the row and i suppose that you know this or you can add some spacing here for example a size box and give it width of 10 and now if you save it there will be some spacing between them in here okay so i will revert the changes now so i'll keep it like this and now if you may notice we don't have any elevation for it so if i add elevation here and put it to zero nothing changed but by default i think it is four so if i put it for it will look something like this and before and the last section or in the last lecture i told you that we set up already our upper theme so in here we already set up the elevation so now if i come back i commented now the elevation and if i come back to the home screen and comment this one and restart the application i will have some elevation or of course here okay and i still i'm getting error here because we need to remove this flexible we cannot use it without the row okay so save it again and here it is it's working fine now okay so as i said now we have this elevation and to make it clearer for you i will go to the main the dart again and then i will change the center title to false and if i save it as you can see we have the title now to the left and if you want to change the background color you can change it from here so you can say colors dot red and now the color in here would be red okay so i will revert the changes and keep it like this and add the elevation again and that's it so i will go back again to the home screen and in here as i said i use the upper icons and of course this widget takes into consideration two different parameters which are the function and the icon because of the null safety we cannot pass nl in here we need to pass an empty function so if i try to pass a null i will get an error we need to pass an empty function and later on we will implement it together okay and as an icon i'm passing on the icon bolt dot user 3 so this icon the bold is coming from the package that we just installed at the beginning of this tutorial you can use iconly light and iconly broken as i showed you there's three different types and as you can see it changed here okay so uh i'll show it to you here also so in here i can say light save it and the light icons will be like this it's like outline and there's the broken one and it will look something like this okay but for me in this case i prefer the bolt so i'll just keep it like this so i hope that everything is clear for you now i'll see you in the next tutorial where we will start implementing this text field so i'll see you there hi guys in this tutorial let's start implementing this text field so let's go back to our application and start writing the code for it so for that instead of this center inside of the home screen i will delete this widget center widget with the text and if we will we need to initialize a column because we have multiple widgets standing above of each other's and in this tutorial i will write the code with you from the beginning so in here simply we can initialize a text field and now if i save it here i have the text field now if i press here as you can see the keyboard is now hidden and this is because i added this code in here okay so now if i comment it and save the application and now press here again if i press anywhere and on the screen it will not work so this is why i added this code now of course we need to add some decoration for it the first thing i want to do is to wrap this con column by a padding just like this and then i will add the size box to give it some margin from the top and for for the height i will give it value of 18 and now for this text field we need to give it a controller and for this controller we need to initialize it somewhere in here inside of the state class so let's say text editing controller and let's say we can initialize it like this and for now we can put it directly equal to its type so just like this to initialize it or the better way is to initialize it inside of the unit state so we can say in here end state and then in here we can put it equal to this value like this and add a semicolon here and now we can make this nullable or we can add late keyword here and now it doesn't have to be null over anymore because we already initialize it and the end state and if you don't know the difference between late and make the variable nullable and so on i have a tutorial on my youtube channel about this and i will leave the link with you in the description now let's continue and about the text controller or or fox nodes for example we need to dispose it because once you navigate to another screen this data will remain and the cached memory and it might stack a new phone and make the application slower so to make sure that it's being removed correctly we need to add that and the dispose method so in here we just need to call the name and call the despos method to it like this okay and now in here down below we can add the text controller now if i save it i have an error because we already was inside of this screen and this is a late variable and it's being initialized in the edit state and now since we are already in this screen this end state will not be called again so i got this error now if i restart it of course i will not get any error here it is and now i have some padding of course we need to do some decoration for it so uh and here we can add decoration but first i will add the keyboard type and for the keyboard type we can say text input type dot text like this and now for the decoration we can say input decoration and then we need to give it for example the hand text i will use search we can do the hand style for example for now i will use the field also i will put it to true to give it this filled color as you can see in here as you can see the background is different than the scaffold background so i will give it to it so in here i set filled if i save it now as you can see we have the different background and what i'm gonna do is that we can give the fill color and for me i will use the card color so you can say any card color like this save it and now it is white and one more thing left is that as you can see in here we don't have these borders but when i focus on it i have these borders will appear like this so this can be done easily by adding the enabled border and the focused border the enabled border is actually when the user is not focused inside of the text field while the fox boulder border is when he focus inside of the text field so in this situation when you see the keyboard so for that i will add a code inside of the decoration so in here like this so i added the code for the enabled border and another code for the focused border and now if i save it here it is it looks very similar okay of course for the enabled border would be this state while when i focus this border will be applied okay and if i change the color for example let's say background color save it and now as you can see it is different this border because in here i'm giving it the border color okay i'll just keep it like this and of course for the border radius i give it value of 10 and then since we have borders all around it's called outline input border okay you have some different types about the borders you can check it if you want but for me i will just keep it like this now one more thing left is that we have this search icon over here so we also need to add it and in order to add it it's very easy we just need to add something else inside of the import decoration which is the suffix icon so in my case i will add an icon in here and we can say iconly light or bold dot search now save it and i have it in here so for the color let's say color and i will give it the light icon color okay so now it totally appear just the same as this one okay so this was for this tutorial and the next tutorial we will implement the design of this carousel and after that we will implement the calories all itself so i'll see you there hello guys and welcome again now in this tutorial we will implement this carousel widget anyways we will just implement the ui now and in the next lecture we will implement the carousel widget okay so for that i already write the code for this design and i will explain to you how can you make such design anyways you might find it a little bit different it's because of the size so in here i'm using a different size and in the next lecture when we use the carousel i will fix that so don't worry about it now for this widget i initialized or create a new folder called sail widget and i changed the name of this folder to widgets instead of widget and then in the home screen below of the text field i initialize this sale widget in here okay so now let's go back to the sale widget and let me walk you through it so the first thing i want you to know or realize that you can access the screen with and height by calling the media query and then you call of context and then you can access the size the size of is of type size so when you call this size you can access the height and then you can access the width also okay and you can access something else but we are only interested in the height and width for now and then if you multiply it by 0.2 it means that you want 20 of the screen height to appear so what i'm doing basically in here is that i'm giving this one all of it this height of this whole container i'm giving value of the 20 percent of the height of this screen okay so now we need to give it the linear gradient so for that we can access the gradient for the container so for that we need to initialize the decoration and then there's something called the gradient and this is take something called also linear gradient and there's something else but for in our case we need to use the linear gradient and then you need to pass in the color to it as a list then you can play around with the begin and end in order to change the beginning and ending of the gradient okay so you can play with the begin and and and with all of these in order to change the starting and ending point of the gradient okay of course you can change these colors so if i change it to red for example and now save it it will become red as you can see okay and if you put this to one for example some difference will be applied as you can see okay so play around with it to understand how does it really work so that's it for the gradient now for this border it's easy we just need to add the border radius and i set it to 18. now we need to add these two widgets inside of this container and these two objects standing beside of each other so this is why initialize this row and in order to avoid any of your flow errors and in order to give it the width i i use the flexible widget and i use the flex equal to 2 for the first widget and i use flex equal to 3 for the second widget okay so if i change it to one now as you can see we have this the first widget way more bigger than the second one and i don't find it good to be honest so i'll just keep it like this now let me walk you through it so we have this container of course i gave it a color of this color i gave it radius of 18 and then i we have the column inside of it so i initialized in here is this column then i wrap it by some padding in order to add some padding for this text and i use the main access size and put it to maximum if i remove it and save it nothing will happen but in some cases it will make some difference so this is why i kept it and then for this main access alignment also if i remove it and save it nothing will change because i'm using now the flexible widget in order to give the whole space i mean the whole left space for this text so basically inside of this column we have two different children the first one is the text and i give it a color of white and then we have some margin between both of them this is why i added the size box and then we have this text and in order to avoid any overflow errors i use this flexible and then i use the fitted box so if i remove one of them we might get an overflow error so if i remove it and save it as you can see now the size is very small and now if i put the font size and save it i didn't get any overflow error but if for example change it to 300 it didn't even appear so this is not good so this is why it's better if i keep the fitted box and even if i change the font size it will work as you can see okay but it's better to remove it and keep it like this because it is useless and of course if i remove the flexible we might also get other errors so if i remove it now and save it as you can see now we have an overflow error so better keypad to avoid any overflow error now the last widget inside of the row so the column is done over here the column was for the text here and for this sale text here and then this is flexible stand for the first child and side of the row which is this container so if we check it here as you remember i told you we have flex of two then down below we have a simple child for standing for this image network so i'm just given the width to it so we can remove it and try it so when i removed it it appeared like this it's not a big deal so i'll keep it and then you can add something called fit and for this fit you can use the one that you want for me i will use for example fill and save it and it will appear like this but i don't prefer it it appears something like it appear very stretched so i would like to just keep it how it is or we can use contain and save it and it will look better like this okay so uh this was for this tutorial and the next tutorial we will implement the carousel to together and i will write the code with you from the beginning so i'll see you there in this tutorial we will start implementing this carousel widget so in order to do this we need a new package so for that we go to the pubspec html file and you need to search for card swiper then if you go to the readme you will have a lot of examples so i recommend you to check it and you will have the codes and then you go to the installing tab and then you copy this and go back to the prospect gmail file and you need to paste it here and for me i already install it after adding this we need to go to the home screen so in here and instead of this cell widget we need to initialize our widget so in our case we need to initialize a swiper and then we need to give it the item count in our case i will give it three it takes an item builder so as usual we need to pass in the context and the index so an end and able context you don't have to specify the type we can directly type it like this and then we need to return this sale widget and of course don't forget to add the return in here like this now i will start the application and let's see what will happen so here it is and now i got an error we need to wrap this swiper by a defined height because it will make an overflow error so for that let's wrap it by sized box and then let's say height and i would give it size dot height and we didn't define the height this size so let's define it in here so let's say size and we can so in here i defined the size we call the media query then dot of context and then we call the size then after that we can call the height or width for example let's continue now so we can use the size in here and now i will call the height and i will multiply it by 0.25 to take 20 percent of the height of the screen now if i save it here it is it's working but as you can see it's working but we don't have these points in here the indicators point so we don't have them so we need to add it and we can add it easily and this is can be done by adding something called pagination so let's say pagination in here and it takes swiper pagination so this one and now i will save it and now i have these bullets in here it would be nice if we give it the alignment for example and if we give it a builders to be able to give it the color and so on so for the alignment i would say bottom center so like this and then for the builder we need to give it something called dots swiper pagination builder and now we can give it the color and for the active color i will give it red it should be active color here and then for the normal color we can give it white so let's say color and colors dot white and that's it now let's add the const word here and save it and now i have this red dot here one more thing i want to show it to you is that you can add something called control and this control i'll show it to you when when we add it so let's say control and then you need to add something called swiper control and anyways all of this you can find it in the readme so now if i save this i have these controls here so the user can press on it but of course we don't want it it looks annoying so i'll just remove it okay so that's it for this tutorial as i said i strongly recommend you to pass through the readme because you have a lot of examples you can use it okay so in here they use the pagination control and so on you can do the same so this was for this tutorial and the next tutorial we will start implementing the code for this widget i will write the code for it and then explain to you then we will implement the grid review together i'll see you on the next one hey guys in this tutorial we'll implement the products design so what you are seeing now on the screen but for now we will implement it just z design and in the next tutorial we will implement the grid review together so in the last tutorial i told you that i will write the code then explain to you in details so this is what i did i added the code for it now and it's looking something like this but later on it will look just the same as this and uh in here i have this error loading image is coming from the api um and this image is cannot be fetched and later on in this tutorial i will show you kind of how can we handle this okay so now let's go back to our application so what i did basically is that i added a new file inside of the widgets folder it called feeds underscore widget and it is a stateless widget and the name of the class is feeds widget so basically it is constitute of a column and to be able to press on it and show this splash color i wrap it by unequal and i gave it the card background color in order to look something like this and if you change this to a container and you give it the color the splash color might not appear so let's try it now save it and now if i press on it nothing is happening and we don't have the splash color so make sure to use the material if you want to show the splash color and what i did also is that i match this border radius because i want when the user press on it too much the radius also so if i say for example 38 and save it now and now if i press on it as you can see it is different so i want the borders to be the same now i added this column and inside of this column so we have in here a text then we have an icon and for the text we have this dollar sign colored by blue then the text is black and of course you can use a row in order to make this but flutter give us a really cool widget which is the rich text where you will be able to use it for the text if you wanna change the color or play with the size without using arrow so basically this rich text you need to give it a text and the first text will be a text spam and this text is spawn you can give it each children and you can give it as many as you want as text response so you can give it this style as what you want and it will be placed next to each other's of course i wrapped it by flexible widget to avoid any overflow errors and then i added this icon in here now down below of course we need to add this image in here that's coming from the url and i use something called fancy shimmer image and might be new to you so you need to go to the pop specter tml file and you need to search for the fancy shimmer image then you go to this one and you should check the readme and i installed this package already so for the readme here is an example on how it looks so we have the shimmer effect before that the images are being loaded so you can play along with the background color of the shimmer image as you can see so check it out and here here's an example about it so let's go back our to our code and in here i define the height for it and then i define the width and i use the box fit and i put it to fill and i gave it the image url now if you want to handle this error if you don't have any image so there is a widget called error widget and then you can say image or something like this actually is to use the icon and i will use like only bold the danger then i would say color and give it colors dot red and then i will say also let's give it size of let's say 28 okay so now save it and now if this image is not being fetched we will have this error widget which is cool now let's add the const word here and down below we have this title widget and for that i added some margin then i added this text and do some styling for it so for the overflow i said ellipses and i gave it maximum lines of 2 so i would say times 100 and in here let's remove this const save it and now as you can see we have these three dots in here and in maximum we have two different lines um let's remove now z times 100 and i did some styling to it just to give a different weight and so on and uh down below i added this size box in order to give it some margin at the bottom i hope that it's clear for you and the next tutorial will implement the grid review for it and i will write the code from the beginning with you i'll see you in the next one hey guys in this tutorial let's implement the grid view so let's go back to our application and let's go to the home screen and now instead of this we can write the code for our grid view for me i prefer to use the greedy view dot builder because it is the best for the performance so let's say great view dot builder we need to give it the grid delegate and we need to give it the item builder for now i will go and finish the item builder so we need to give it the context then the index and then we need to return our widget of course we can now remove this sized box like this and remove the child and now that's it of course we need to give it the item count so let's give it the item count here and it will put it um in the main screen i would put it three and then we need now to work with the grid delegate so for that we need to define something called a sliver grid delegate and you have these two for me in this case i will use the count and now you need to specify the cross axis count and i will use two for the cross axis spacing i will use zero for the main axis spacing i will use also zero and for the child aspect ratio i will use 0.6 okay so uh keep in mind that this is not fully responsive so in my case i'm working on this emulator so please make sure to use the same emulator as me and i will not implement it for the landscape mode it will be available only in the portrait mode and i already mentioned this and the description so now let's continue and add this const and let's add this const card also here and now let's restart the application and let's see how it looks okay so i got an error so the best way in order to fix this we cannot wrap it by an expanded widget and save it and here it is it looks like this but it's very very annoying to be like this so we can just move this i want all of this widget to be moving so let's remove this expanded widget and then what i'm going to do is to add the shin crop put it to true and then physics choose never scroll physics and now save it and now i cannot scroll it anymore perfect so what i want exactly is that i want to move this widget to be scrollable i mean so we can wrap this column by a single child scroll view and then all of it will be moving or you can wrap the widgets down below by a column and then wrap it by a single child scroll view okay so let's implement it and now below this text field um so here i will cut all of the other widgets so it should be until here and then we can now define a single child scroller view and then as a child we can give it a column and then children and now paste our code and now save it or restart the application and let's see what will happen so i still having an error let's wrap the single child scroll view by unexpanded widget and now save it and now it is working now to start the application make sure that it's working and here it is it's working correctly okay and it looks the same as this one okay so this was for this tutorial see you in the next one hi guys in this tutorial i want to show all the products in this screen and in order to do this it's easy but i want you to notice something is that the transition has some fading so in order to do this we need to use a new package which allows us to do this animation which is called page transition so you search for the antipop.dev for the page transition then you go to this one and read the readme of course then you have a lot of examples in here and in my case i will use the fade transition so let's go back to our code and then we can go to the home screen and for uh for this function we can give it this line of code and we don't have this detail screen of course we will use the feeds screen so in my case i add it here so i need to save the file to be installed and let's create a new file let's name it feed underscore screen dot dart and now in here let's initialize the status widget i will name it feeds screen like this and then let's return in here uh scaffold and for this scaffold we need to give it the body and as a body we can use the same uh code as this one of course we can save the security view and a separated widget and we can use it okay i'll just paste it here now and now we can import this and let's go to the home screen and for the page transition let's import it and let's use in here feeds screen and now let's restart the application and let's see if it is working okay press here and here it is it's working correctly now one more thing is to add the app bar so i can just copy it from here um we will actually use a few things so i'll just copy it and paste it and if screen so let's compare it okay it looks like this so let's paste our code here we don't have to use this leading we don't have to use this action and uh it will be just like this now save it let's go back to our code and here it is and now in here let's say all products that's it okay if i press here it will go back and now you can notice this fade animation that's it for this tutorial i'll see you in the next one hey guys in this tutorial we will implement the product details screen so basically this screen and all of these widgets you saw it before so the fancy shimmer image the swiper and the other text and this rich text now if i go back to go to another product of course we will show this product anyways for now we are just implementing the design so for that i already write the code for it and i will explain to you what i did so i created a new file inside of the screens called product underscore details so let's go here and it looks something like this so basically of course we will have a column and the first child is the back buttons that you can see it here and then we have this category text which you can see it in here then i added some margin between this text and the title and the price so for that i added the size box then i added this row to handle the title and to handle the rich text so for the edge text you saw it already before and i wrap it by flexible widget same for this one i used flex equal to 3 for the title to appear or to give it space more than the price moving forward i initialized the size box for the um swiper and we already did it before and i'm returning inside of this swiper's fancy shimmer image which i also explained it before so this is basically the same code that we used at the home screen for the swiper okay here it is now let's go to the product detail and finally we have the description so uh in here i initialize this this column also again and i wrapped it by padding and i did this way i'll actually i initialized multiple columns because i don't want a padding for this image so if you notice this swiper i didn't wrap it by padding so this is why the first column will end here which i wrap it by padding this uh this one is doesn't have any padding then for this one i added this padding and i did this column in here okay this is actually very easy just try to play around with the code so you understand everything better okay so here's the text for the description and here's the title for the description okay now save it and it looks like this and for the text i added says title style here because i used it in multiple places so we can basically do it like this now the final thing is that i added the code and the feeds widget and the end coil in here to allow us to navigate to this screen which we implement the same when we are seeing all of the products so i use this function and in here i use the product detail simple as okay that's it for this tutorial and the next tutorial we will implement the category screen i'll see you there hi guys in this tutorial let's implement the categories screen as you can see the design is very easy so please stop this video here and try to implement it by your own i hope that you did it so now let's proceed and in order to implement this i will create a new file inside of the widgets and i would name it category underscore widget dot dirt and then it's gonna be a stateless widget i will name it category widget like this and uh let's fix this okay and now let's return and the widgets that we need to use as any object which is the stack widget because we have two different widgets above of each other as you can see we have this text standing above those of this image so it's saying here stack children and as you can see the stack takes children just like the row and the column and if you want to know more about the stack i used it a lot and my other courses on udemy so check it out now let's continue and the first child gonna be is the fancy shimmer image so we can copy it from here from the feeds widget so let's go back and paste it here of course we need to import the packages we need to define the size so let's go back here copy it from here and come back and paste the size here we need to import the iconly package the material package and then we need to remove this anyways you can use a command in order to remove or fix your problems and i will make a separated tutorial about it later on so we can now test what we wrote in here so for that we can create a new file in this screens and let's name it categories underscore screen dot dirt and uh first i will change this one to the width times 45 and i will do the same for the width okay now in the categories screen we can use the same code from the feeds screen so i'll copy this go to the category screen and i will initialize the status widget i will name it category i category is a screen like this and now we can return our widget but of course we need a scaffold since it is a screen so now let's say in here body and paste our code and instead of this feeds widget we need to use the category widget and now i will change this child aspect ratio to 1.2 and for the cross for the other parameters i would just keep it like this all right so now this category screen it can be used to navigate to it so in the home screen we can use this function to navigate to the category screen so let's search you need to category um so and this for this icon which is in the upwards so for this one here so we can now use this code and instead of the fields screen we can navigate to the category widget we should navigate to the category screen so this one now restart the application and let's see how well it looks let's go back to our application and now press here okay we can navigate and it looks something like this okay so let's go now to the categories uh widget and what i'm gonna do for this moment is to wrap this stock by a container and let's say color colors dot blue save it and it looks like this okay now let's wrap this stack by padding now save it and it looks like this what i'm gonna do to show it clearly for you i will put this container here and save it and now it looks like this okay so it would be nice if we add the upper so let's say upper and let's give it the title and let's say text categories like this let's add the khan's keyword and that's it now it looks like this now we need to add the text so in order to do this let's go to the category screen and below of this clip correct so below of this image we need to write the code of the text so let's say in here text and for now let's say got name like this and then we need to do some styling for do it i will save it first and it appeared in here we will fix the position later on for now let's say text align and put it to the center save it and what else we can do is to add some styling to it so let's say text style and now we need to specify the background color like this and now you can use the card color so let's say near light card color and call opacity of 0.5 like this now save it and now it looks something like this i will change the font size to 24. and i will choose the font weight and put it to bold save it and now here it is i want this text now to be nc center and this can be done easily by wrapping this text by the positioned widget and i will use dot fill now save it it worked but it moved the text to the center horizontally to the center i want it also vertical to the center and this can be done by wrapping this text also by the outline widget like this and say in here alignment and use the center like this save it and now here it is it is nc centered if i remove this widget and try it again it's gonna work also but i used it just to show you that you can use also the position that fill but you can directly use the online widget also okay so what i'm gonna do now is to remove this container because we don't need it and later on these images will be coming from the api okay and uh i'll just keep it for this moment so it appears something like this to you so it's it's clear and later on we can get rid of it because we will not use it okay so this was for this tutorial in the next tutorial we will implement the user's screen so which is this screen and for with that our ui will be done so that's it for this tutorial see you on the next one hi guys so now our application looks like this which is just the same as the main application and we implemented in the last tutorial this categories screen and now what left only is that to implement the user's screen so in this tutorial we will finalize our application design so we need to implement this screen so i will write the code with you from the beginning for that let's create a new file inside of the widgets and let's name it users widget. and then now we can say or define a status widget and let's say user user's widget like this and now return and as you can see we can use a row but simply we can use a building widget and flutter which is named list tile and i really like this widget because it make our work way more easier we can define directly the leading which is will be in our case the transitionary image so we can get it from the fields from here so we can search for the transitional image and we can copy this directly so we can paste it here now of course we can import this image and import this image also and for this size we need to define it also so i'll just copy it and paste it here and for the height and width we need to fix it so i will use width times 0.15 and i will use the same for the width okay now this is for this leading we need for the title also we can say in here directly title and now we can give it the text and for the text it will be the user name like this and then we can access the subtitles and of course we can define again something and let's say um in here email at email.com and then final thing is that to define the trailing and the trailing is gonna be also a text so let's say text and let's say user role and now we can define this style so for this style let's say text style and we can access now the color to change it so for the color i will use actually the light icon colors like this and for the font weight i will use it um i'll put it to bold okay so let's say bold and that's it okay so the code would look something like this so this is the design for it now we can use this widget inside of the screen so for that let's initialize a new screen which is will be named users underscore screen to dirt like this and it's gonna be a stateless widget so let's say users screen and now we need to return a scaffold and let's say body paste our code here like this and now we can navigate to this screen so for that let's go to the home screen let's copy this function let's paste it here and now let's call in here the users screen now let's restart the application and let's see what will happen okay so now if i press here i should navigate and yeah here it is but of course we need to fix it so we need to add the upper so i can copy this and then come back to the user's screen and paste it here like this okay so it looks like this now one more thing is that let's define a list of uh of this this style so i'll use also the list diffuse builder because it's the best for the performance and in here we need to give it the context as usual and the index and then we need to return our widget just like this and of course it would be better if we give it the item count i will use them save it and here it is now one more thing before that i end this tutorial i will change this image so to this image so it looks like this and then i will change the categories also so i'll change this image to be like this and now we can remove the container so this container is now used as now save it and it looks like this okay let's go back and our application now it looks like this we have the product detail and for the product detail also i'll show you if i use the other image so instead of using this one i'll use this one save it and here it is now it looks like this so this is why previously i told you i don't i didn't use any animation to this image so it takes all of the space okay and if we use it any feeds screen so if it's widget um let's change it from here and save it and now it looks something like this which is really really cool now one more thing before that i end this tutorial is that we can go to the home screen search for the grid view and you can play around with this child aspect ratio to make it dynamic but for me i'll just keep it like this and now save it i change it to 0.7 and now it looks kinda better for this device and i'll do the same for for this one so uh and it feeds the screen change it to seven and that's it okay so this was for this tutorial and with this tutorial we implemented everything as the ui for our widget and uh and yeah as you can see we don't have spacing here so let's search for the text field and i'll copy the size box and i'll paste it here and let's save it now and now we have this spacing here yeah now it looks way more better and as you can see if i focus here press here the focus will be disappeared perfect so this was for this tutorial see you in the next tutorial where we will start with the rest api hi everyone and welcome to this section in this section we will start working with the rest api so before that get started i want you to know exactly what rest api is so for that if you type in google rest api and go to the images you will find a lot of diagrams let's take this one for example for now i'll open this image in new tab and here it is so for this diagram in here we have the client the client in our case will be using our mobile application and in here we have the stressed api which is stand between the client and then between the database so from this diagram you can understand that rest api is like a connection between the application and the database the user will make some requests and these requests will be of four different types and then the rest api will ask the database uh to do these tasks and then it will give us a response by json for example or xml let's take another diagram for example let's take this one and for this one it's almost the same as the previous one but in here we have the server and the server is basically a database you can take google for example where you search for something and then you get you get the results it's the same so in here we have these four different actions that it's actually related to the rest api and then we send the http request to the server or the database then the server would give us back on http response it will give it to the rest api and the rest api will give us the results as a type of json or xml or html and then our work is to convert these data and show it clearly to the user so before that i end this tutorial i want you to download a program which is called postman so search for postman and go to this website and you will be able to install it it's very small program so just install it and it's very very easy to be used hi guys and welcome to this tutorial in this tutorial i will walk you through the api that we will be using in our course so if you go to google and then search for plaid's effect store api you will get these results so we are going to use this api which is called bloody fake store api and of course i will provide you with the link of this website and then i open that then press only view docs in order to be able to understand the documentation and what this api provide us so here the introduction and then we can access the products categories users authentication and files in our case we'll use the products categories and users if you go to products in here you have the overview about um what you have inside of this api so you can get all products the rest api method will be get and here's the url that we will be using to get all the products uh for example if you want to get only a single product and this is will be very helpful in order to show the correct product inside of the details screen so here so we're gonna use later on this url um what else we have also we can create product update product delete product and the most important thing is that the pagination so the pagination you have something called offset and you have something called limit and as i told you previously if we go to the old products tab and then scroll down when i arrive until the end it will fetch more the items so i'm fetching 10 items each time and you can't change this number so we are going to use this link later on also now let's check the categories so here also we can get all the categories same as the products then you can get a single category by the ide create a category update a category and so on okay same for the users we have the same methods okay so check it out and later on when we are using it inside of our application it will become clear how can you access it and uh how can we integrate it in our flutter application for the next tutorial i want you to install the postman program so you just need to type postman and you need to go to this website then download this program this program is very easy and it will be very helpful to test the rest api before that we integrated in our application okay so i'll show it to you in the next tutorial so i'll see you there hi guys in this tutorial we are going to use the postman in order to test the api so i hope that you installed the postman on your machine and when you open it it will look something like this so you can press only new and then you press on the http request and then um in here and any tabs you can add and remove or save the files okay so uh in here you can paste your the url and then in here you can choose the method that you need so let's test the api now so first of all let's get all the products so i will copy this and then come back to the postman and paste it here and the method should be get so now send it and now i got the results okay so here are the results and these results will be useful in order to show the products and our application anyways this api is very basic and we don't have an api key and we don't have to send any other data and and this is make the api very simple so this is why i already made another tutorial or another course on udemy which is the flutter rest api course which where i built a news application so if you want to be an expert with apis you should take this course also okay but for now the course that i'm working on the store course is really helpful as i start with the rest api okay so now let's continue and i got the data and if i use for example post and try to send it i will get an error so we will also use the errors handling so later on we can check the status code we can get the message in order to show the user a friendly message for example now let's go back to our documentation and then for example if i want to get a single product so i can copy this without the id for now let's go and press on the plus here and paste it and now let's go back to the previous method change it and put it to get send and now you have the ids in here for example i want to get this id so let's go here d3 will stand at the end and now send now as you can see you will have this response so we have the id title price description the category and the images and the images as you can see we have now three different images okay now let's see for the categories for example and here if i use this url i will get all the categories so i'll try it now here it is we have the id name and image anyways for the response you can choose the format that you need if you want xml html or json for me i prefer json and in the next tutorial i will show you a method in order to transform the json to a dart file so we'll create a dart model using this adjacent data see you on the next one hi guys so in the last tutorial we got these results these jsons so now we need to use it in order to convert it to a dart model so what i'm gonna do is now to get the products so the url will be like this so press send and now we have this sample response we have an id titled price description and category for the category it is a map and also we can get it from the api so we can also convert this category to a dart model and since we have it already by this response if i convert it now to a dart model we will have also a separated class related to the category it will become clearer now when i convert it so press ctrl a ctrl c copy it then go to the browser and search for json to dart and go to this link and then press paste your data here and type the name of your class and my case i will name it products model so let's say products model like this and now generate dart like this and as you can see it is available within all safety now i will copy all of these and then i will go back to our codes and then i will create a new folder and i will name it models and then i will create a new file and i will name it products underscore model dart like this now paste our data and i didn't get an error we can get rid of these new keywords and this map we can get rid of it we don't have to define it this way we can just type in like this and we don't need this in here we can just type it like this and actually this to json constructor we don't need it i will not cover it in this course but i already covered it and the news course that i talked about so if you want to know about it you can check this course out anyways let's go back to our code and now i will remove this since we don't need it and anyways this is what i was talking about it generated also a category class and this category class is coming from this category okay because we have id name and an image and this is basically what happened okay now before that i continue editing in this file i will cut these lines of code and then create a new file and then you name it categories model do dirt and paste our code here and i prefer to change the name like this to make it clear to avoid any confusion so now paste it and that's it now this model it needs to be used also in here okay and we need to import it of course like this and now also this to json we don't need it so i will just remove it and now this category will be of type categories model now i don't have any error but i need to explain to you what basically happens in this file okay so okay so in here i have a sample response of the product so we have an id this is why we added this id in here it is an end then we have the title we have it here price description and the category which is the categories model here and then we have a list of images so all of these variables we initialize it also in here and then we created the constructor and it is a named constructor uh which is i prefer it to avoid any confusion now in here we have this factory constructor from json in order to convert this json data to a model to a product model so this products model of course it takes ide title and so on so we need to access this json in order to assign it to the products model so for the id we need to access this id so later on when we fetch our data from the api we will have we will have it in this form which is a json it's like a map so we have keys and value pairs so the key and for the id for example is an id this one and the value would be four and if i want to access the title we need to access the json title and it will give me this title for example for this case for the category it will be the same so we need to access the json and we need to access the category and these keys must match the names in here okay so this name description price title and so on must be the same okay to make it more clear for you i will show you also the categories model so let's go to the categories class or in here inside of the rest api so in our case this is simpler so we have the id name and images so in order to access the id for example we need to access the json id and this is what has been done in here to access the name we need to access the json name in order to create the categories model later on also when we start getting the data in our application and we start using these classes it will become easier for you okay so i think i will end this tutorial here i'll see you in the next one hello in this tutorial we'll start fetching the data in our application so we will integrate flutter now with the rest api that we have so for that we need for example this url in order to get the product so i will just copy it and then i will go back to our application and then create a new folder and i will name it services and then i would create a new file and i will name it api handler dirt and now let's create a class and i will name it api handler like this and the first thing we need to do is to import the http package so in order to import it we can import it like this directly and anyways previously you had to install it from the pub.dev but for now you don't have to do it anymore so now we need to initialize the method in order to get our products and of course it's going to be a feature so let's say future and for now i will keep it of type void and the name you can name it get all products like this and we need to add the asean keyword and now we can use the http package in order to get the result from this url okay so in here we can say http and you call if you press dot you will have a lot of suggestions and in our case as you can see we have the get you have the pause method delete all the method related to the rest apis in our case we need to get the data from this url so i will copy it and paste it here and now i have an error if you hover here it takes a yuri so we need to convert this url to a uri so let's say yuri.parse and we need to paste it here like this just like this and now it would be nice if we save this and a response so like this and we need to await it because this get method is a future so we need to await it and then we can for example print the response and in here we call json the code and i will pass on the response like this and of course we need to access the response body now that's it and just get all products i will use it somewhere in order to print the response and see what we have so i will go to the home screen and uh the best place in order to do this is the did they change dependencies so in here we can call the api handler then we need to call our method but now i don't have access to it so let's go back and let's make this method static so now i should have access to it as you can see that's it now if i restart the application or run it okay the application is being installed now we should see something here yeah here it is perfect so in here we have this response because we are printing in here so we have response and then we have the data in here so later on we need to use these results in order to display it in our screen what i'm gonna do now is to show you another approach in order to do this so instead of using this uri.parse we usually use a better approach by using the yuri.https and this way is actually better to organize your code and to understand what's going on so what i'm gonna do is to initialize fy and i will name it theory and it will be equal to yuri dot https and now you have the authority and an encoded path in our case the authority is this one so i will cut it and i will create a new class and the costs and i will name it api underscore costs dirt then i will say base url equal to this and of course it will be a string and let's define the type so string like this and it is as cost so we can do it like this and now for the authority as i said we can use the base url like this and since we called the https we don't have to use the http in here so we can get rid of it then we will have the an encoded path which is this path so we can paste it here like this and if you have something else just like i explained in the first tutorial of this section you can pass on the other arguments for this you yuri okay such as um the map for example query parameters if you have and in here you have an example uh the base url is this one then the an encoded path then you have the query which is the query parameters it will look something like this and i also covered all of these and the news course so if you are interested please check it out and i strongly recommend you to buy it from the discount link that i gave it to you and the description now one more thing we don't need this for the slash here and now we can use this jury here now i will start the application before we don't we don't need also this so let's remove it and we can just use the uri directly and now that's it and i should get the same response as you can see we have now this response perfect so in the next tutorial we will start showing this data and our application so i'll see you there hi guys in this tutorial we'll display the products on the screen so let's start doing this in order to do that let's go to the products model and in here we need to return a list of product model so we need to save or read our data so we need to read the json data and transform it to products model and create a list of products model in order to be able to show it inside of our application i know it might be confusing for you but while coding it will become clearer so follow along with me what can we do exactly is to initialize in here at least and it's going to be a static so let's say static at least and as i said it's it needs to be of type products model and you can name it whatever you want i will say products from snapshot or from json whatever you want to name it it needs to take a list or a json depends on how you want to implement it but i'll keep it simple to you let's say um product snapshot or whatever you want to name this list and in here you need to loop over the product snapshot so what i'm gonna do now is to leave this code like this and then go to the api handler and implement our code in here to explain to you what i want to do so in here let's define something called data and this data will contain our response body and of course we need to encode it so let's copy this paste it here and that's it now this data is iterable so i can loop over it so i can say for example value and data like this and then i can do something here of course we need to initialize this v and what i'm going to do is to print field for example so i'll say v in here dollar v then go to another line or let's add two different lines like this and now i will comment this line for you and i will comment this line to test the application so restart the application now then go here and let's see what will happen okay and now it's being printed so in here i have v i have the title i have the price and everything if i go up a little bit i have another v here and so on okay and i think i have we have around 200 products perfect so what i'm gonna do is to open this fee to a list so we can initialize in here a list and i will name it temp list for example and let's uh initialize it like this and now to add to this list you can simply um i'll just comment this line for now you can simply add to it like this and pass nv and that's it now this thing pleased it can be used for our products model in here okay so we can use now this products from snapshot and our api handler so what i'm gonna do now is to change this type of return to be a list of products model like this now i get an error because we must return something here so let's say in here return and then let's call the product model and now you can call products from snapshot and you need to give it the list in our case we need to give it this list okay so this list will contain exactly what we printed in here okay so it's v so i can also loop over it in order to access this data and this is what we need to do in here so basically in here we say return then you call your list and then we can call map to loop over it and this e i will name it data and in here we also need to return something so we can type it like this and then we need to return product model dot from json and then we pass in our data like this and finally we need to convert this to a list like this and that's it so let me explain to you what i did again so and the api handler we are calling this and we are passing it our list that contain our values here that we printed in here and then we are looping over this product snapshot and in here you have this data and this data basically adds each v of these okay so each v now is a data in here okay and as you can see this v is of type is like json format so you can access the values by its key and this is why we are using this from json so we are calling this from json and we are giving it this data which is basically m-up so we can access the data by its key okay and to make it clear for you what i'm gonna do now is to restart actually the application i wanted to remove this line do not do not print anything and now i don't have anything in my console and what i'm gonna do is to for example uh print data in here so let's say data and print it in here like this and now restart the application and now i will have all of the data in here as you can see we have it in here what i'm gonna do also i will cut this line and i will paste it here and now i will access this product snapshot like this and i will access the first index inside of it so let's restart the application and let's see the response i will have only one product here it is it is the first product inside of our list so i think now it is clear enough for you to understand it so what i want to do next is to show the data on the screen so it removes this printing line and then we can go to the home screen and now in the did the change dependencies so in here we will have a list of this type so what i'm gonna do is to define this list oops just a list like this and i will initialize it in here like this and let's say products list and i initially i will put it to equal to this you can put it equal to nothing but i'll just keep it like this and now we can put this product list equal to this and of course we need to await it so for that let's create a separated function and let's name it for example get data and it will be of type void so let's say get products like this and let's add the async keyword and now we paste our code and in here we need to add the await keyword and that's it now this method need to be called in here like this and now this product list it can be used for the grid view so it can be used here in order to send the data to the feeds widget so what i'm gonna do for now is to pass in the image url and the title so let's say title first let's say it will be a string so let's say title and image url like this just to test that for now and of course we need to pass it now from here and remove this const so let's say here image url we need to access our list and access the index and then we need to access the image url now i don't have this product list here so i also have to pass it from here so let's say final and just we can get it from here so let's search for product list and i will copy it from here like this and now here we can paste it and it's gonna be a final and we don't have to initialize it like this we just need to add it now to the constructor okay so here it should be final like this we need to import this class and we need to add the field parameter and now we can use this product list here in order to access the image url and in order to access the title and now for the images if you remember it is a list of images of strings so i will choose the first item of this list so now let's use the title so for the title let's call the products list dot title like this and let's call dot to string to it okay so now we passed this data now we can use this vdg grid widget inside of the home screen so instead of placing this code here we can just use the feeds widget grid widget like this and of course we need to pass on the products list so let's say product list like this and we need to do the same for this one so i'll copy this and then go here and now we can paste that for this one but it's kind of different from the other one so i'll just keep it like this for this one and now for this code let's remove this const and we also need to get the data so let's convert it to a stateful widget and then same as what we did in the home screen we need to initialize this list like this and we need to initialize these functions like this and of course we need to import the classes like this and now we can use this list in order to be passed here for the items here okay so let's say products list and we can access the index in here and then we can call the images and access the first image then we need to access the title and for the title we need to access it just the same way as this one so let's say title dot to string and now in here we need to do an alt checker and that's it now let's start the application and let's test everything it was a lot of work and now i got an error in here let's go to the home screen and in here let's call set state and paste it here and now restart the application and let's see if it will work okay so when i did like this now we are fetching the products but we are still getting an error so simply we can do a small check about this product at least if it is empty we can show something else so we can show a container and now if i save it i will not see an error restart the application and let's make sure i didn't get any error we need to do the same in here so we can do it like this in here also so save this one also and go to the feeds screen and now i don't have any product and in here we need to add the set state now save it also and in here we have these items so let's go back go here again and now i have these results and of course we can show a loading spinner for example but this is we'll manage it later on and this course and for the length i will use the product list length and now save it and go back to our application and i have now a lot of things but i cannot scroll it so we need to fix this we need to remove this from the fizzy screen okay so now i can scroll it and it's working fine now one more thing before that i end this tutorial is to go to the fitz screen and let's use this title for the title here like this and now it's not constant anymore so let's add the constant word here and same for the image url so let's say image url like this now restart the application and let's test it here it is now it is working correctly okay now we are displaying the correct title and the correct image url okay so that's it for this tutorial and the next tutorial i will show you a different way in order to not pass the data like this so we will use a simple state management in order to do this using the provider and it's going to be very basic but it will make our work easier again if you need more detailed things and more advanced things you should check the news api course on the udemy and i will leave for you a discount link so you can get it from there so that's it for this tutorial i'll see you on the next one hi guys so our application looks something like this and in this tutorial i will do some improvement for the code while we are reading the products so for example if i go to the to this screen to defeat the screen as you can see we have an empty screen then our products will be fetched i don't want this behavior it would be nice if we show the user some progress indicator for example so for that i will return in here as center and as a child i will give it a circular progress indicator so we can say circle progress indicator like this and that's it let's add the const keyword here and now if i restart the application and test it again we should see a circular progress indicator so here it is as you can see and this is way more better now the other improvement that i want to use is and the home screen so in the home screen previously we used this data change dependencies anyways it's very similar to the edit state as both of them run directly when you open that screen but the difference between these two is that the data change dependencies it will be called whenever you call the set state so in my case i will comment this for you and i will comment this also so of course we got an error here so what i'm gonna do is to remove this and i will call this line of code and now i will initialize a future builder widget and this is a future builder widget it takes a future and a builder and it's and this widget is really recommended to be used in such cases because we can manage a lot of things in it the connection states if we have an error and so on and now i will show you in here of course it takes a context and something called snapshot and then we need to return something in here of course we need to give it the method which is the future as you can see so in here let's say future and then as a future we need to give it our function so let's call the api handler and called the get all products anyways we could do something else and that we can also use this method but in my case i want to make it more general for you so this is why i will use the other approach in order to show you new things anyways you can specify the type of this future builder and in our case we want a list of products model like this and this is the same type as the list that we initialized at the beginning in here perfect so now we can return something but first we can do small checks so the first check i want to use is that check the connection state so we have something called uh connection state and you have active done waiting and so on so we can call this snapshot and check its connection state and we can check it if the effect is waiting we can't show for example a circular progress indicator so let's say if it's waiting here so we return a center and then let's say child and circular progress indicator as a child like this let's add the const keyword now we still having an error here because we didn't return anything yet so we can add the return line here and we can return here our feeds grid widget which is this one and of course this return line it should be here inside of the future builder now we don't have this product list but we can access it from the snapshot so we can call snapshot dot data and now as you can see we have the length okay now let's do an all check about it and now the error is gone i want to show you something is that if we remove this these suggestions will be different and we will get an error here so if i remove this and press ctrl space we will have less suggestions okay so make sure to add the type here now let's improve the code more and this can be done also by adding some other if statement so we can check about if it has an error so we can call this snapshot and check if it has an error for example by calling has error and this is a boolean so as you can see it is a boolean and if this is the case we can return for example a text here that says um an error occurred and you can do something cool which is that you can access the snapshot error directly like this and of course we need to remove this const perfect so now one more thing is that we can check if the data is null so if we don't have any product we can also do something so i will copy this or all of this and then paste it here and now we can't check if the data is equal to null and now let's say for example no products okay something like this and now let's test it now restart the application and let's see what will happen perfect so as you can see we have the loading spinner then we got this hi guys in this section we will improve our code and we'll use the provider state management in order to do this but please keep in mind that it will be very basic and very simple and if you want to know more about the state management you should check the other courses on udemy so i strongly recommend you this one the flutter grocery app and then the flutter rest api crash course and these two courses i covered the provider state management and details so you will have a lot of contents about the state management now let's go back to our code and let's start working on it so in the home screen we have this feedzy grid widget and previously we passed then this product list and if we go to the feeds with grid widget we also passing in this image url title to this feed widget and we need to display also the correct price and so on and we need the id also so if we keep passing data through the constructor it will be very annoying and we passed this product list to this screen because we needed it just to pass it in to the feeds widget and this is make it more annoying so we need a way to avoid this and this can be done easily by using the provider state management so let's go to the product model and let's call the mix and change notifier and this change notifier will help us to keep listening to the changes so now if i go to the feeds widget and in here we can initialize the provider and in order to initialize it it's gonna be of type products model so let's name it products model provider and it will be equal to the provider and of course in order to use the provider we need to get it from the pub spec to tmr file so let's go to the browser and in here let's go to the pub.dev and then let's search for the provider package and of course i strongly recommend you to read the documentation for it so let's go now to the installing tab and then let's copy this and come back to our post back to tml file and then paste it here and save your code anyways after installing any package i strongly recommend you to call to cut the process then run your application again so now we should have access to it so i will import it like this and then call of context and that's it but we need to specify the type of this provider and this is can be done by adding this in here and just type products model so now we have this products model uh provider and if i copy this and now paste it here and press dot now you have access to all of the arguments inside of this product model so instead of passing this data in here we can remove it and we need to remove it also from the constructor so like this and now of course we got errors in here for the image url we can call it like this now and let's do another checker and then we need to call the title for this one call dot string like this let's add the const keyword here and we need to also change the price so this one so for that let's say product model and we can access the price in here now we're still having another and the feeds grid in here so let's remove this and we're still having another nd feed screen also in here so let's remove it and now i will restart the application or just run it because i cut the process when i installed the provider package so now it is running and i will resume the video when it's done okay so the process is now done and we are having an error now if i scroll up and this error so the error looks something like this and basically this error you might face it a lot while you are learning about the provider and this is can be fixed easily okay so in here as you can see it says we couldn't find the correct provider above of the feeds widget so you need to understand how the provider works exactly so about the provider it is basically a listener and in order to keep listening to a widget you need to be the parent of this widget so above of the feeds widget since we initialized our provider internet so ss feeds which yet we initialized this products provider so above this widget we need to add the provider in order to be able to listen to the changes and provided to the feeds with yet okay and these things i explained in details and my other courses but as i said i want to keep it simple for this course now in order to fix that let's go to the feed the grid and in here we can wrap it by new widget which is the change notifier dot value and in here you need to give it a value and our value is going to be the product list so we can pass it like this and in the feeds screen we also need to pass something so we have also the product list so i need let's wrap it by change notifier provider dot value and then we can call value and give it the product list and we need to give it the index in here um in here i give it i gave it zero it should be index like this now restart the application and it should work perfect so here it is now it is working fine okay so instead of passing data through the constructor and we call it dependency injection we used a better method in order to access the data and now as you can see we have different prices okay let's check this screen it is also like this we have the different products different titles and different prices okay and later on we will fix also the details screen in this tutorial i will show you how can we fetch and display the categories we already did the same for the product so i strongly recommend you to do it by your own then watch this tutorial now let's go back to our application and in here we have it like this so let's start writing the code for it if you remember in the api documentation and in here for the categories we need to use this one this url in order to get the categories so we have an id for the category we have the name and the image we are interested in the name and the images and if you remember we created already the category model for it so now what i'm gonna do is to go to the products model then i will copy this function and then come back and paste it here and of course it will be of type categories model and we need to name it something else so let's change it to categories and now and the api handler just like we did in here we can copy it and paste it once more and now let's say get all categories like this and in here it should be categories if you remember here it is like this and of course it will be of type categories model and now we need to call the categories model uh categories from snapshot that we created and we have a typo and the name so let's i'll just fix it okay so i fixed that and now let's fix this name and that's it now if you may notice we have the same function but we only have difference between the urls so we can minimize our code by making this function dynamic and this function it can be done easily so we can say for example uh let's initialize a new function and let's name it get data so let's say in here get data like this and of course we need to return something and the list will be of type dynamic and now we need to return something in here so what i'm gonna do is to copy all of this then paste it here and now let's pass in a string and let's name it target and we need to add the required keyword and now the target can be used here and later on this method will be used in order to fetch the data and the categories so still one thing left to be done is to return in here the tamp list okay so basically what i'm doing in here is to send a request to the api and i'm returning the list now this list it can be used directly to return a product model or categories model so what i'm gonna do is to remove this now and we can call directly as method the getdata method so now in here let's initialize the list and i will name it temp and it will be equal to the get data method and we need to specify the target and as this case it will be products like this and now we can return in here the temp list just like this now instead of repeating this function for the categories we can remove all of this and i can copy this line of code now and in here we can pass on the categories okay and now we can use this stamp here now i will start the application and let's see if i will get an error because we are fetching the products here and we got the product and i got no errors now we can proceed and we can use this function inside of this screen so just like we did for the home screen to fetch the products we can copy this future builder so let's copy it here and then we can paste it in the categories screen like this and let's cut this grid view and instead of this feeds grid widget we can paste our code and we need to fix few other things and here we need to use the categories model and then for the api handler we need to call it and for the function we need to call the get all categories like this now to start the application and let's see if it will work okay let's try it it seems that it's working correctly but we need to present the correct data so let's start doing this and in order to do this we can access the categories model directly and the categories widget so just like we did in here we initialize this product model provider so we can do the same for the categories screen i mean category is widget so in here we can initialize the categories model so let's say in here categories model like this and let me change this name and now import the provider we don't have to specify the type of it since we already did it in here so now if i hover here on it as you can see it is of type categories model now this provider it can be used directly in order to show the category name and the image so in here we call the name dot string and down below or in here we can use the image doto string like this and now if i restart it and come to this screen i will get an error of course this error i think you remember why because we need to add the provider above of this widget so in the category screen simply we can drop it by the change notifier provider.value so this one and then we need to provide a value and for the value we can access the snapshot the data and give it the index so let's say in here like this and we need to do an all check in here even when i added this snapshot we're still having an error in here and this error is coming because we didn't add the change notifier mixin for the categories model so if you remember in here i told you about this mixon so we must add it in order to not get any error and here we need to import the material package and now restart the application and it should work let's test that here it is now it's working correctly so that's it for this tutorial see you in the next one hi guys so in the last tutorial we have finished fetching and displaying the categories on the screen now we will do something very similar uh in order to fetch the users so if we go now to the rest api documentation and here it says how can we get the users so if we made a request for this url we will get these results so let's try it in the post one so in here you need to create a new request then it will be of type get then send it and now i got these results ctrl a and ctrl c in order to copy it then google for json to dart as usual then go to this link and paste your json data in here name your class i will name it users model then generate the dart model i will copy this then come back and in the model folder i will create a new file and i will name it users underscore model.dart in here i can paste my code we don't need this to json so i will just delete it and i will keep it like this for now now let me go back to the postman so in here you have the avatar as an image then you have the role and you have the name and you have the email so we can use it in order to display our users now let's go to the categories screen and let's copy this method and then we can paste it here like this and let's change this type to users model and let's change this categories to users like this now just like we did for the categories and products we can copy this function and now paste it one more time in order to get all users okay so you can now notice how easy it is if you refactor your function and just use it by one line of code in here we need to change this to users and change this categories model in order to get the user's model and in here called the users from snapshot now let's go to the categories screen and copy all of this then go to the user screen paste it here and now change the name again to user users screen like this and change the title to users and of course we don't have to get this grid view we need to use the users widget like this okay now let's add cons keyword and in here we can initialize the provider so first in the user's model we need to add in here the change notifier mixon then we need to initialize the provider just like we did in here so i'll paste it here and change the type to be users model and we need to import the provider package and now we can use this user's model provider in order to display our data so in here we can call the avatar dot to string and then in here the user role and in here the name and let's remove this const and finally in here we need to display also the email so let's say email go to string and remove this const now if i restart and test the application let's see now as usual now i have to add the provider above of this widget so inside of the user's screen let's wrap this by change notifier i'll change notifier provider dot value and then indeed we need to give it the value so let's call the snapshot.data and give it the index and of course this user widget it should be inside of a list so we need to add the list again so i will cut our code after formatting it correctly so i will cut this then initialize a list review builder then we need to give it the item builder so let's pass in the context and the index and now we can return what we have and of course we need to specify the item count so let's call the snapshot data and we call the length like this now if i restart the application let's see okay we still have an error i should change this function also so let's change it here and we can call in here get all users now save it and it will work here it is now it is working correctly okay so if i started to make sure again we have everything here hi guys in this tutorial let's finish up the product details screen so we need to fetch the correct information for each product in order to do this we will use the api handler and we need to open the product details screen and the api handler we need to write the function in order to get the correct data for each product so before that we start writing our code let's go to the website and in the products tab if you scroll down and here you can you have just get a single product so you can get the product by id so we need to use this link or this url in order to fetch the correct information for the product so what i'm gonna do is to copy this function and i will paste it here and then i will say in here get product by id like this and we also need a string to be passed and i will name it id in here and then the target in this case it will be the products and then we will have the id here like this so we have the products here and then we have the id and this is what i did now what i'm gonna do is to show you the response and the postman so for that i will copy this and go to the postman and paste it here and hit send and now in here i have only one product we have the id title and so on if i choose another id for example 200 send i got another product and the information would be different if you choose for example another number i will get an error because this id doesn't exist okay so let's go back to our code and now the response it will not be at least it will be of type product model like this now of course i got an error here because we don't have to return this temp list we need to return the correct data so i will remove this list and in here we can call the products model dot from json and we can pass on our data of course we didn't yet implement the error handling and the next tutorials we will implement it so don't worry about it now now this method it can be used directly in the product details screen so in here we can write our function in order to get the results so the best place to write it is uh we can do it actually in the united states but i prefer to do it indeed the change dependencies so let's initialize a future of type void and we can name it for example get product info like this and then in here we need to call the api handler and use it so what i'm gonna do is to initialize something called product and it's going to be of type products model of course and it can be null like this and we can put now the product equal to the api handler dot get product by id and this id we need to pass it and this product model i will paste that here to avoid the error so we need as i said we need to use the id and we can't directly pass it by the constructor to here so let's say final string id and now let's add it to the constructor here just like this now of course i got another end of his widget and we can remove now this const from here and then we can pass in the id the id of course we can access it directly from this product model provider so let's call it in here called the id and then call dot string just like this now in the product details we don't have this id yet since i initialize it in here but in order to access this id because it's outside of our state class and it is a stateful widget so we need to call the widget dot id like this now this product model it can be accessed and we can use it in here so i can access directly the category so let's remove the constant from here and let's call the dot to string and let's do an alt check now in here we need to paste the title and then in here we need to take the price so if you remember we have a list of images so i will use one in here and in here we have three different images for example and it is a list so we need to display it and we have this index so we can directly call the product model dot images and we can use the index that we want and the index is coming from here from this builder and then let's call the two string to it and now let's do an alt check in here like this now let's scroll down we still have to add the description so let's say product model dot description dot string just like this and remove this const from here like this now before that i test it i want to show a circular progress indicator when we are fetching the results so simply this can be done by adding for example doing a small check about this product model if it is equal to null it means that our code didn't get executed yet so in here we can show a center and let's give it a circular progress indicator like this and let's add the const keyword and now let's restart the application and let's see if it will work or not so let's press here now i have the circular progress indicator and it is stuck of course this method we need to call it and the change dependencies so let's call it in here just like this and now just save or restart the application and i will start it to see what will happen and now press here and again it is a stock so this product's model is still null it's not being set to the new value so we also need to fix this so we need to reset the state whenever this value changes so when this value the the product's model value changes i want to reset our state in order to rebuild our widget so now i started the application and let's see what will happen here it is now it's working correctly okay so let's try another product as you can see it is working just fine for the other products also all is good it's working correctly okay so this was for this tutorial i'll see you in the next one hi guys in this tutorial we will work with the error handling so in here i made an error and i got a response like this so we have the status code we have the message we have the error so this error says but request and we have this message so we can show it to the user for example in order to show him a friendly error and here we have the response so let's go back to our code and we can use this and in here for example with we can do a small check inside of the get data in here we can do a small check about the response status code so in here we can call the response.status code and check if it is different than 200. and if this is the case we can say throw so the code won't execute after this line of code and in here we can throw the data message so in here we call the message because we have it in here okay just like this and now we can wrap all of this code also by a try catch so what i'm gonna do is to cut this then add the try catch block and this is will help us to also handle the errors okay so we paste our code here and in here let's say log an error occurred like this and then we can call the error like this okay so that's it for this method and we're still having an error because we also need to throw something if we have an error so in here i will say throw error dot to string like this and now the error is gone now we need to do the same for the method that we are getting the product detail in it so this one so what i will do is to cut these lines of code and add a try catcher block and let's say error in here and let's say through the error to string and it would be nice if we say in here an error occurred while getting product info for example and then we print the error like this and in here i will paste our code and that's it now we implemented the error handling now what i will do to try to test it is to access for example another id in here so let's say any number try to restart the application and let's see what will happen okay our code is still working let's go to this product and now we have an error printed in here and this is very nice of course we need to do the same as what we did in here so i will copy the this line to do a small check about the response so we can paste it here and i will start the application and let's test it again and let's see what will happen so let's check now i got another error here so and the product details we also need to put this method and a try catch so we need to call try catch in here so let's call it here and catch the error and let's say error here and let's log this error like this and now let's restart and test the application again and let's see what will happen okay so now let's go to any of these products and let's see what will happen and perfect now we have this error in here so this error is coming from here so it says product not found so this line is actually coming from the message okay so let's uh check now this error and in here as you can see it says products not found okay and if you add any other character you will get another type of error which is this one so in this case we are showing the user a friendly message um anyway we are just logging it in here we can for example print it and in any case for example there is many ways in order to do this but i'll just show you a simple approach we can just initialize for example a boolean and let's say as error in here and let's put it initially equal to false and if not let's put it here equal to true so let's say as error equal true like this and now we can do a small check about this so in here we can check if it is error and i will copy this and instead of this circular progress indicator we can show a text and in here we can say an error occurred and of course you don't have to do all of this work like this you can just use a future builder as i showed you previously but i'm also trying to show you another approach and there is many ways in order to handle this you can also show a dialog for example but for me i will just show a text and the middle of the screen so in here i will do styling for it to give it some font weight for example and font size so for the font size i would use 25 and for the font weight i will use 500. so like this and of course it would be nice if we print the error so what i'm gonna do is to initialize in here a string and let's say error and initially i'll put it equal to nothing and then we can put this error equal to the error here we don't actually have to call set state in here because we are calling it in here so i will remove it and then paste the error sdr and then we can put it equal to the error and call the string to it now we can use this error str in here like this and it's not constant anymore so let's remove it and add the const keyword here and now let's restart the application and let's see what will happen okay let's go and here it is now it's working file it says an error occurred product not found now if i go for example to this method and let's add any character in here so plus or minus and restart the application and i will get another message so let's see here it is now i'm getting another error message which is just the same as this one okay so by this tutorial i showed you how can you handle error and an efficient way so now what i'm gonna do is to revert the changes here i mean call the id in here so let's fix it and i will test the application to make sure that it's working now and it is working correctly i will keep the code now just like this for you to review it and i will keep it with the logs okay and i just find out that for the categories model how we are showing this of course we need to fix it i'll just fix it now directly because it won't take much time so let's go to the products detail search for category and in here we need to call the category dot name and of course let's do an alt check save it and now i will have the correct in here okay let's test another one here it is now we have others for example um let's check this now we have shoes okay so our application is working perfectly now and in the next tutorial what i will do is to start implementing the pagination so instead of fetching all of these products directly we will fetch for example 10 products each time so when the user arrived until the end of this list we will fetch the other 10 other products okay so i'll see you on the next one hi guys in this tutorial we will implement the pagination so before that we start writing our code i want you to understand what pagination means exactly so if i navigate to the all products screen and now i scroll until the end here i arrived until the end and then i fetched more products so every time i arrive until the end i'm fetching more products here it is as you can see so we need to implement this now in our application so for that i will go to our application and if i go through my application now i have all the products directly in here so i'm fetching all of the products in here and this is very bad for the performance so imagine that amazon or aliexpress or facebook are doing the same way so where they are fetching everything all the posts all the products and the same request it will take huge amount of time and it will slower the application so now if i scroll down i can scroll almost all the products and i don't want this behavior so let's now go to the documentation of the rest api and in the products tab if you scroll down or if you search for pagination you can find it here and here is the url that you need to use and it is a get method so now we have the offset which is basically means the page number and we have the limit so the limit per each pay a page what i'm gonna do to make it clear for you i will test it at the postman so i will copy this then go to the postman and paste it here and now if i hit send actually i'm gonna change this number to one to make it clear for you so now i will have only one item now what i'm gonna do is to change this offset also to one and now send and now i got another product with id three so i think now you understand what we need to do so once the user arrive until the end we need to change one of these values so what i'm gonna do is to fix the offset i will fix it on zero and then for the limit it will be a variable so every time the user arrive until the end i want to change the value in here so every time the user arrive at the at the end i will add 10 more products until the user arrive until the end okay so if i type in here two i will get two different products okay so now we can use this and our application so what i'm gonna do is to go back to our code and in here inside of the api handler for the get data in here we can do it so if we go back to the documentation indeed i have this interrogation mark so this is called query parameters so if i go back now to our code and hover on the https now in here you can pass in this query parameters which is a map so in here i can't type it like this but of course we need this case only if if we are passing products i don't want it for the categories so what we need to do actually is to check fd target equal to products like this and if this is the case we need to pass on our map but if not we can pass an an empty map so in here we need to pass on the offset and the limit so you can copy the offset from here to make sure that the name is correct and for the offset we need to pass any string do not pass an integer it must be a string so in here as i said i will fix it to 0 while the limit it will be variable so for the limit we can pass in something in here and it can be nullable because i want it only in one case which is for the products i don't want it for the categories or for the users so in here let's define this limit and now this limit it can be used here now of course for this get all products we need to pass in the limit so let's say required string limit and now for the get data we need to pass it here like this of course now we got errors inside of the home screen and inside of the fizzy screen and the home screen as i said i want it fixed so let's use three and of course it should be string so i can't type it like this but of course we can just type it string like this okay so now let's go to the fizzy screen and in the feed screen of course we got an error here and as i said in here we need to type in the correct code for the pagination so what we can do is to pass in the limits here and then for this limit as i said it's going to be a variable so we can initialize in here on end and i will name it limit and initially i'll put it equal to 10 and every time the user arrive until the end of the grid view or list i will fetch more items now let's initialize a boolean while it is loading so while we are fetching more products we can show a spanner for example at the bottom so this is will be helpful and in here i will put it to false and then i will also initialize another boolean and i will name it as limit and this is will tell us if the store has more products or not okay so if the user arrive until the end of each product we don't have to fetch more items and we don't have to show any spanner anymore perfect so now we need to keep listening to the grid view so we need to understand when the user arrive at the end i mean we need to know when the user arrive at the end and this is can be done easily actually so in here let me pass in this limit and of course it should be string so let's call the string like this and that's it now we need a scroll controller in order to keep listening to it so what i'm gonna do is to initialize a scroll controller so let's say scroll controller like this and let's name it scroll controller and we need to initialize it like this now the scroll controller it can be used as a controller for this grid view and we can pass on our controller now simply by using this controller we can access or know if the user arrived at the end or not and now i will show you how so for the the change dependencies we can use it now and anyways previously i was fetching this get products and they did change the dependencies but i changed it it's not a big deal so let's say did they change dependencies and now in here we need to call the scroll controller and then we add a listener to it like this and then i will add the async word in here because we will call the get products method now inside of this method in here we can do an if statement to check if the user arrived at the end of the grid view or not so we call this scroll controller dot position and then we call dot pixel and now we check if it is equal to the max scroll extent so like this and if this is the case we need to put the is loading to true like this and we need to add to the limit 10 more items so we can say plus equal 10 like this so basically this is means that i'm adding 10 each time for the limit and now i need to call the method so in order to fetch the products like this and is loading we need to put it again to false of course now of course since we initialized this scroll controller we need to dispose it so we call the scroll controller and we call dispose to it like this okay so now what i'm gonna do actually is to print the limit so let's say in here limit like this and actually i will use log in order to show it in the yellow color and for the log we need to import the dart developer now i will start the application and let's see what will happen so basically now i will fetch 10 orders because then the products i mean because we are passing the element here so here is our application let's go here let's scroll and now i can't scroll because i added these two different lines for the grid view we need to remove it and the previous code it was commented also so don't worry now i removed it and we can't test it again so now i arrived until the end and here it is it is working fine so every time i arrive until the end the limit is getting changed as you can see and we are fetching more items now what left is to show the circular progress indicator so this is can be done by wrapping by this grid view by a column and of course now we need this shin crop and this physics to avoid the overflow error inside of the column or you need to wrap it by expanded widget but i'll just keep it like this and wrap this column by a single child scroll view so in here we call this angle child scroll view and now this controller it must be for the scroll level widget which is the single child scroll view so we need to pass it for this widget okay now below the secret view we need to show the spinner so we can check in here if it is loading so we can't show a spinner at the end so in here we can call the center then show a circular progress indicator like this and let's add the const keyword here now if i restart the application let's see what will happen so let's go scroll down and now the progress is very fast so i cannot see it so what can we do actually is to try to put it to true and now save it because i wanna show it to you and for the limit i will keep it like this and now to start the application and let's see what will happen because i want to show you how how it looks like okay so here it is as you can see and this behavior it's not working good enough so even while loading our product we need to arrive until the end to show it so for that what can we do actually is to call the s limit and without using this is loading we can remove it and for the is limit we can't check in here if the limit for example equal limit equal to 200 of course the limit number you it will be different you can depends on how many items you want to put it equal to so if we if the limit equal to 100 which is i think this api gave us around 200 items so we can set the s limit to true like this so now we can do a small check about the s limit so fds limit is equal to false we need to show this center and circular progress indicator okay so now restart the application and let's see what will happen let's go now scroll down here it is now we have it here and of course i'm not adding anything now to the limit so let's add and test that once more so now i will save it and let's see okay i will start it to make sure so now let's go here and scroll down and here it is now it's working perfectly okay so if i arrive at the end okay so now i arrived at 200 and as you can see when i arrive at the end i keep fetching products and this is wrong so what basically is happening is that we are setting this limit to true so i cannot see the circular progress indicator anymore but we're still calling this get product function of course if this is the case in here we need to return we don't want to execute this line of code okay so now what i'm gonna do is to change this number to 30 and test it again and make sure that it's working correctly and now let's go to the old products scroll down here i can see this spanner and then here i arrived until the end i didn't fetch more products but we still can see the circular progress indicator so this means that this is limit value didn't change and actually this is normal previously we had this code here around here and we didn't call this return so actually this get products method was was called every time and inside of this get products method we have this set state so we are setting our state again and we are rebuilding our widgets and we are updating the values so this limit value will be set to true so basically what can we do to fix this is to call this set state in here okay so now restart the application and let's test that once more and let's see what will happen so let's go to the all products now scroll down here it is i arrived and now i can see the progress indicator and i had more products and in here i arrived until the end and now we don't see the circular progress indicator and i don't see more products anymore okay so that's it for this tutorial i hope that everything was clear for you and this course and i hope that you like it and if you did please leave a 5 stars rating and if you have any suggestions please feel free to reach me so i can update this course and i can consider it for my future courses don't forget also to start the repo on github and by this way the course and everything will arrive to the maximum number of students and we will share the knowledge around the world so that's it for this tutorial i'll see you in the next one [Music]

Channel: Coding with Hadi

Views: 104,115

Keywords: Flutter, rest_api, api, flutter api, fetch data, UI, store, ecommerce, multistore, admin panel, full flutter course, learn flutter, cross platform

Id: YAoYJfitObA

Length: 160min 46sec (9646 seconds)

Published: Mon Jul 25 2022