Jekyll2023-07-26T10:35:52+00:00https://quirijngb.com/feed.xmlQuirijn Groot BlueminkLead Mobile Engineer - Flutter - AndroidLazy loading data into a ScrollView2018-08-23T11:17:19+00:002018-08-23T11:17:19+00:00https://quirijngb.com/2018/08/23/lazy-loading-data-into-a-scrollview<p>Most apps we build are composed of some sort of scrollable list of items. Some contain so many items that the response from the API is generally paginated. As app developers we consume these API and display the data to the user. There are a couple of ways we can approach this.</p>
<p>One is having a paginator at the bottom of the page</p>
<p>Another approach is having an infinite scrolling list. We do this by loading more items when we approach the end of the current list and append them. Creating a seamless scrolling experience.</p>
<p>To simplify this I’ve built a widget that will wrap a <code class="language-plaintext highlighter-rouge">ScrollView</code> which could be a <code class="language-plaintext highlighter-rouge">ListView</code> or a <code class="language-plaintext highlighter-rouge">GridView</code> and provides a listener to warn you when the user is reaching the end of the list. This will allow you to preload the next batch of items.</p>
<p>The code would look something like this:</p>
<script src="https://gist.github.com/QuirijnGB/ba1fbe6e5998690071935436ed996ead.js"></script>
<p>Check out the package on <a href="https://pub.dartlang.org/packages/lazy_load_scrollview">pub</a> or the code over in <a href="https://github.com/QuirijnGB/lazy-load-scrollview">GitHub</a></p>
<p>Enjoy!</p>
<hr />
<p>Photo by <a href="https://unsplash.com/photos/FVtG38Cjc_k?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Marten Bjork</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>Most apps we build are composed of some sort of scrollable list of items. Some contain so many items that the response from the API is generally paginated. As app developers we consume these API and display the data to the user. There are a couple of ways we can approach this.