Flutter Pagination Made Fun & Easy | Unraveling Secrets of Flutter Pagination What You Need to Know

hey we are just going to discuss the pagination in the flutter so what is the pagination in the flutter allows you to load the data into the chunks uh chunks the term is to Define to load the data into the small pieces this is very helpful for us to load the large data into your apps so let's get started the P ini in the flirter so we are on the IDE and here I am just divide into two parts this practice I have just into two parts uh the first part is to load the first data and then we we will apply on the pagination onet so first we get the data from the URL or from our source so I have just created a function here load data for time saving this this would be very crucial okay so uh I have the data so we we are just getting the uh response from the G URL that your url is basically uh we are just defined on the above and uh we are just uncommanded the these are the uh Fe API so I am just getting the getting the response from this API okay so uh we have the loot data here and we don't need the pr statement and the pagination and the limit okay so what what would be a page in the start the page would be start by one and and I have to define the limit what the limit we are just providing the data from the for the user it can be a 10 it can be 20 it can be five whatever you whatever uh you define for it is your requirement so uh page pagination and limit first page it it shows the first page and then this limit shows after the 21th this page will be increased by one okay so at the time at one page the items list would be 20 okay so uh we have the base URL and then page and then uh limit as a parameters okay so uh we are just putting the response and uh getting the G API and calling the HTTP fun HTTP function. G ex should.get and URL pass and then pass the URL here and then getting the URL if the response you are know that about uh the Gat function the G Returns the status code and the body the status code 200 is means the these are returning the data successfully okay so uh these two 200 status code if the status code of the small is 200 so it will come into the F statement then go to the decode the uh decode the response. body and then s State and then provide the data okay so data we are just not initialized yet okay so data is we have just initialized the empty list and now done it okay so uh we are just I have Define the loader function uh load data function we need to call it into the in state so I'm just calling it into the inate and then the okay it's fine it's okay so uh then we are just going to describe in the body section so uh in the body section we have just implemented the all the code the uh code will be would be available for you the link in the description this is the public Rao you can clone for your practice okay so uh we don't need about that and uh we just uh we're just completing the first part and then move to the second part on it okay so now the data uh the things are ready and let's get restart and I'm just restarting it and uh refine and now the data is has been loaded okay so data has been loaded I am just printing the ID here indexing here so what index it should be print 19 so it means it means we are just printing the data in the limit of the 20 okay so we are just printing the data in the limit of the 20 because it's it's starting with the with the 0o 0 to 19 is a 20 the counter of the 20 okay so if I increase the Page by one increase the Page by one so it will start with a 21 to 40 okay so now the first part has been completed the data has been loaded successfully and now the second part is to pagination to apply the pagination on it so the second functions I have just declared as before okay so uh we don't need the print statement we have just declar the page and uh uh we don't read about all things all the stuffs okay so now uh okay one more thing one more thing from the part one and you you need to load the data you need to show the loader while your data is fetching and then the uh First loting Data basically the false and I will be true it why we are just putting the true because we have the we have the section in the body it's a true statement if it's true the loader will play the role okay so this loader will play the r and then after after that we have F the data then it will automatically fall so what it what the what the step you are just doing to to then it falls so we are just going to through it because we are just defined the loader under the body because we are just defining the here as a true so I just put the false after the fetching all the stuff all the data so it automatically Falls so loader will close it and then the column section would be start okay okay so you can see the loader is here and then N Dat appears okay so first thing is start so the second thing is we have just uncommit the load mode data the functions and now the time is to call it we are just calling into the controller what is the controller controller is basically a scroll controller which defines the scrolling uh where you are scroll it okay okay so this controller is not defined so we are just going to Define it and I have already defined it and um just going to uncommit and in the list view builder in the list view Builder we are just going to uncomment controller and controller okay so basically we Define the controller and we listen the controller into the end state where is the State into the iner state we are just listening it and Pa as a callback function load more data it will load the data while we are scrolling up okay so this is the scenario basically while we are scrolling up it is called the function and load the data so this load data is pretty much uh different with the load load data because we are just checking here the decoder is not empty if it's empty so it's turn different thing it's a different kind of thing okay so uh we we need to put the condition here and now now the second thing our things are ready but the second thing is the loader we we need to show the loader here okay so what what the thing we are just doing going to to deliver so we are just going to uh discuss uh so we are just putting the loader out of here okay so uh the next fer and here it is this is the loader here we are just going to Define it so here it is and load mod data we have the condition here and we are just not initializing it and uh then this condition is very similar to this condition which I told you before is loading what is it's uh it's first load running what what it will do it will run the control it will run the loader while the data is fetching from the internet uh in the first load okay so in the first load it's F the data from the internet while this this instance it will show the loader on the screen okay so in the same instance we are just putting the we are just getting the data from the internet while the while this instance we are just showing to the loader into the bottom section so we are just loading data it's load from for more Runner running and then uh we are just getting the true why we are just getting the true because we just show the loader out of the here okay we are just showing the two loaders one loader while just the data initialize while we are just loading the data into the start and the second loader while we are just scrolling up on the screen okay so so this loader is basically Define us so we are just put uncommanded and uh we have true we have defined the true we have defined false and then we just we uh if we call this functions it automatically true and then load the data if it's true the loader will appear and lo the load the data while the loader is appearing and then if the data is load if the loading of the data is completed then it will call automatically false okay so let's get the results what we are have okay restarted and above now the loader is showing the data is getting from the API and it's very pretty similar with the r requirements okay so thank you so much for watching this video If It video is very helpful for you so thumbs up and keep share and keep like so it will motivate for us so thank you so much

Channel: BugsBunny

Views: 114

Keywords: flutter shared preferences, button, figma tutorial, figma tutorial for beginners, figma tutorial app design, figma, figma for beginners, flutter, flutter ui, figma to flutter, figma ui convert to flutter ui, how, to, create, design, tutorials, basic tutorials, flutter tutorials, flutter for beginners, flutter tutorial for beginners, flutter tutorial, ui design, flutter crash course, routing in flutter, routing, navigation, navigation in flutter, slidable navigation, 100 mystery buttons

Id: D0Es9Xs_zrA

Length: 11min 39sec (699 seconds)

Published: Sat Oct 21 2023