Easy Lazyload in Flutter Using SetState, Provider, and GetX
hello, in this article i am going to share my experience using flutter to build some features called lazyload. not only on one method, i will show you in each method using common way no package needed, come by default there is setState, and some packages that require to install and setup in your flutter project before follow this article using provider and getx.
you don’t have to follow this 3 ways that i will show to you in this article. you only have to choose one way that relevant to your flutter project, is it setState, provider, or getx.
Disclaimer, in this article i will only show you how to use lazy load in several ways. not how to setup the app from beginning. espescially, provider and getx. so, state management knowledge is required in this article.
Creating the components first
before we create a lazy load, we need some components that can handle if it is in the end of the scroll or not.
here some code that i used to wrap my ListTile or Widget that build for each item of the list of data.
after that, let me tell you how to use it inside your widget or screen and how should we fetch the data to show it inside your widget or screen.
Default way, setState
for the first way, we only use one class that extends StatefullWidget to handle it.
of course you can simplify some part of the code or giving more validations if you want to.
Use Provider
in here, i have create some utils and component that has been helped me a lot to process the data. you can check it the source at the end of this article.
now let me focusing to show you how i can fetch the data from provider and deliver it into UI.
and this is the code that we have in our provider
Use Getx
when we use getx, then we haven’t a reason to use StatefullWidget anymore. because, all of the widget lifecycle we can rely on getx controller.
after we setup the UI, here is the controller.
finish.
if you have a question or correction to this article. do not be hesitate to me.
thanks.
