Building Flutter PullToRefresh in just 15 minutes
Tags: android, ios, flutter, refresh
Published: 2020-03-25 05:21:41

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="b003" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="f058" class="graf graf--p graf-after--figure">The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data. The “Pull-to-refresh” gesture was first introduced by Loren Brichter in the Tweetie app and in no time it became so popular that countless apps adopted this gesture. Today “pull-to-refresh” feature is a natural part of many popular apps, including Twitter, Gmail, Tweetbot and others.</p><h4 name="fc96" class="graf graf--h4 graf-after--p">What you’ll&nbsp;build?</h4><p name="1aad" class="graf graf--p graf-after--h4">In this tutorial, you’ll build a mobile app featuring a PullToRefresh gesture using the Flutter SDK. Your app will:</p><ul class="postList"><li name="2b05" class="graf graf--li graf-after--p">Display a dynamic list with a random number of items</li><li name="17c4" class="graf graf--li graf-after--li">Each time you <strong class="markup--strong markup--li-strong">PullToRefresh</strong> the no of items will change in the list</li></ul><figure tabindex="0" contenteditable="false" name="0af5" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 283px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 40.400000000000006%;"></div><img class="graf-image" data-image-id="1*Wv6VXDMDm-FMSwudouXEEQ.png" data-width="2048" data-height="828" src="https://cdn-images-1.medium.com/max/720/1*Wv6VXDMDm-FMSwudouXEEQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">That’s how our PullToRefresh gonna&nbsp;work</figcaption></figure><p name="5526" class="graf graf--p graf-after--figure is-selected">This tutorial focuses on adding a PullToRefresh gesture to a Flutter app. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.</p><h4 name="f7ed" class="graf graf--h4 graf-after--p">Github Repository | @ShivamGoyal1899</h4><div name="c4fa" class="graf graf--mixtapeEmbed graf-after--h4"><a href="https://github.com/ShivamGoyal1899/PullToRefresh"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/ShivamGoyal1899/PullToRefresh"   ><strong class="markup--strong markup--mixtapeEmbed-strong">ShivamGoyal1899/PullToRefresh</strong><br><em class="markup--em markup--mixtapeEmbed-em">The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data. The…</em>github.com</a><a href="https://github.com/ShivamGoyal1899/PullToRefresh" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="d8e281a772647056cb18c027312287ab" data-thumbnail-img-id="0*2TunGvTiKas7H81q" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*2TunGvTiKas7H81q);"></a></div><h4 name="5b5a" class="graf graf--h4 graf-after--mixtapeEmbed">Widget In Focus | RefreshIndicator</h4><div name="167b" class="graf graf--mixtapeEmbed graf-after--h4 graf--trailing"><a href="https://api.flutter.dev/flutter/material/RefreshIndicator-class.html"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://api.flutter.dev/flutter/material/RefreshIndicator-class.html"   ><strong class="markup--strong markup--mixtapeEmbed-strong">RefreshIndicator class</strong><br><em class="markup--em markup--mixtapeEmbed-em">A widget that supports the Material "swipe to refresh" idiom. When the child's Scrollable descendant overscrolls, an…</em>api.flutter.dev</a><a href="https://api.flutter.dev/flutter/material/RefreshIndicator-class.html" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock" data-media-id="615b912e0316d2eb19c54f4e1b260ae3"></a></div></div></div></section><section name="5127" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="3aaa" class="graf graf--h3 graf--leading">Setting up Flutter on your&nbsp;machine</h3><p name="f77d" class="graf graf--p graf-after--h3">The detailed steps to install Flutter on your personal computer &amp; getting started with Flutter is available at the following blog</p><div name="d948" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://medium.com/enappd/install-flutter-on-windows-and-mac-1fd1dde453ba"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/enappd/install-flutter-on-windows-and-mac-1fd1dde453ba"   ><strong class="markup--strong markup--mixtapeEmbed-strong">How to install Flutter on Mac &amp; Windows</strong><br><em class="markup--em markup--mixtapeEmbed-em">Learn about Flutter and how to set it up on Windows and Mac systems</em>medium.com</a><a href="https://medium.com/enappd/install-flutter-on-windows-and-mac-1fd1dde453ba" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="568a0d4bde614e83c5bc80064d051ed5" data-thumbnail-img-id="1*nowUC5JfuBTzfRi5eSbDJQ.png" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/1*nowUC5JfuBTzfRi5eSbDJQ.png);"></a></div><h3 name="57ee" class="graf graf--h3 graf-after--mixtapeEmbed">Coding the component</h3><h4 name="024d" class="graf graf--h4 graf-after--h3">Component Syntax</h4><p name="7fec" class="graf graf--p graf-after--h4">The basic format of PullToRefresh gesture looks like the one below:</p><figure tabindex="0" contenteditable="false" name="5345" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/ShivamGoyal1899/317eb92b5539c629babec53298e11e20.js %}</div></div></figure><h4 name="259c" class="graf graf--h4 graf-after--figure">Implementation</h4><p name="fb67" class="graf graf--p graf-after--h4">The most generic way to implement PullToRefresh is as follows:</p><figure tabindex="0" contenteditable="false" name="f441" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/ShivamGoyal1899/53ed7ef36b745856ec39fa2411fbfa65.js %}</div></div></figure><h4 name="10b6" class="graf graf--h4 graf-after--figure">Importing dart libraries to main.dart file</h4><p name="3eb1" class="graf graf--p graf-after--h4">Import <strong class="markup--strong markup--p-strong">dart:async</strong> &amp; <strong class="markup--strong markup--p-strong">dart:math </strong>libraries to your main.dart file by adding the following line at the starting of the file:</p><figure tabindex="0" contenteditable="false" name="ba0c" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/ShivamGoyal1899/5fbfd9e0b28c8d045443d1928658c0c4.js %}</div></div></figure><h4 name="5f02" class="graf graf--h4 graf-after--figure">Putting Code in&nbsp;action</h4><p name="9eb0" class="graf graf--p graf-after--h4">Amend your main.dart file as per the following code:</p><figure tabindex="0" contenteditable="false" name="c0f2" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/ShivamGoyal1899/49de5b5f62da49ca15fb0836edb094ef.js %}</div></div></figure><h4 name="a993" class="graf graf--h4 graf-after--figure">Building &amp; running the application</h4><ul class="postList"><li name="97e7" class="graf graf--li graf-after--h4">Connect your Emulator or physical Android device to test the application.</li><li name="a8a5" class="graf graf--li graf-after--li">Click on Build &amp; Run.</li><li name="e004" class="graf graf--li graf-after--li">And Boooom 🧨, your app is ready.<br>The final build would look like the below illustration.</li></ul><figure tabindex="0" contenteditable="false" name="7dff" class="graf graf--figure graf-after--li graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 1066px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*Xdgqe3NAYSk44UMl2Qswlw.gif" data-width="600" data-height="1066" src="https://cdn-images-1.medium.com/max/720/1*Xdgqe3NAYSk44UMl2Qswlw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">The final output of the implementation</figcaption></figure></div></div></section><section name="3153" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="da02" class="graf graf--h3 graf--leading">🔍 Read more of my&nbsp;Articles</h3><div name="d673" class="graf graf--mixtapeEmbed graf-after--h3"><a href="https://medium.com/flutter-community/building-a-flutter-alertdialog-in-just-15-minutes-57fb81b73698"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/flutter-community/building-a-flutter-alertdialog-in-just-15-minutes-57fb81b73698"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Building a Flutter AlertDialog in just 15 minutes</strong><br><em class="markup--em markup--mixtapeEmbed-em">Learn how to implement a customized Alert Dialog / Popup in Flutter.</em>medium.com</a><a href="https://medium.com/flutter-community/building-a-flutter-alertdialog-in-just-15-minutes-57fb81b73698" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="2fe8c52af9bbf86ebfa58230d9de48b9" data-thumbnail-img-id="1*pzLy6HK-7lfU8cCT97TFWA.png" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/1*pzLy6HK-7lfU8cCT97TFWA.png);"></a></div><div name="d1f1" class="graf graf--mixtapeEmbed graf-after--mixtapeEmbed"><a href="https://medium.com/enappd/building-a-flutter-datetime-picker-in-just-15-minutes-6a4b13d6a6d1"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/enappd/building-a-flutter-datetime-picker-in-just-15-minutes-6a4b13d6a6d1"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Building a Flutter DateTime Picker in just 15 minutes</strong><br><em class="markup--em markup--mixtapeEmbed-em">Learn implementation of an iOS-style DateTime Picker in Flutter</em>medium.com</a><a href="https://medium.com/enappd/building-a-flutter-datetime-picker-in-just-15-minutes-6a4b13d6a6d1" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="7afd0850f4f461306dda2dd7216c4424" data-thumbnail-img-id="1*Nk3kkThks62avT7Cl2tc9Q.png" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/1*Nk3kkThks62avT7Cl2tc9Q.png);"></a></div><div name="5e5e" class="graf graf--mixtapeEmbed graf-after--mixtapeEmbed graf--trailing"><a href="https://medium.com/enappd/adding-firebase-to-your-flutter-app-281b8f391b47"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/enappd/adding-firebase-to-your-flutter-app-281b8f391b47"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Adding Firebase to your Flutter App</strong><br><em class="markup--em markup--mixtapeEmbed-em">Learn how to easily integrate Firebase in Flutter with a step by step guide.</em>medium.com</a><a href="https://medium.com/enappd/adding-firebase-to-your-flutter-app-281b8f391b47" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="a5b8d612717aedf0be7dcd65de69ba4b" data-thumbnail-img-id="1*cW0uazYTPqrBZsOikIbvOQ.png" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/1*cW0uazYTPqrBZsOikIbvOQ.png);"></a></div></div></div></section><section name="c7bc" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="0128" class="graf graf--h3 graf--leading">🎯 That’s all for&nbsp;today.</h3><blockquote name="d53f" class="graf graf--pullquote graf-after--h3">If you got any queries hit me up in the comments or ping me over on <a href="mailto:hi@itsshivam.com"  class="markup--anchor markup--pullquote-anchor"    target="_blank">hi@itsshivam.com</a> 📧</blockquote><blockquote name="2643" class="graf graf--pullquote graf-after--pullquote">If you learned even a thing or two, clap your hands👏 as many times as you can to show your support! It really motivates me to contribute towards the community.</blockquote><blockquote name="5822" class="graf graf--pullquote graf-after--pullquote">Feeling too generous? <a href="https://www.paypal.me/shivamgoyal1899/"  class="markup--anchor markup--pullquote-anchor" rel="noopener"    target="_blank">Buy me a Drink</a>&nbsp;🍺</blockquote><blockquote name="3c6f" class="graf graf--pullquote graf-after--pullquote">Wanna collaborate? <a href="mailto:hi@itsshivam.com"  class="markup--anchor markup--pullquote-anchor"    target="_blank">Let’s talk some tech</a>&nbsp;😊</blockquote><blockquote name="f866" class="graf graf--pullquote graf-after--pullquote">Stalk me over on <a href="https://itsshivam.com/"  class="markup--anchor markup--pullquote-anchor" rel="noopener"    target="_blank">itsshivam.com</a>, <a href="https://github.com/ShivamGoyal1899"  class="markup--anchor markup--pullquote-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">GitHub</a>, or <a href="https://linkedin.com/in/shivamgoyal1899/"  class="markup--anchor markup--pullquote-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">LinkedIn</a>. 👀</blockquote><figure tabindex="0" contenteditable="false" name="c366" class="graf graf--figure graf-after--pullquote is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 17px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 2.5%;"></div><img class="graf-image" data-image-id="1*r5VeD2fV04iDy8xfmaauHA.png" data-width="727" data-height="18" src="https://cdn-images-1.medium.com/max/720/1*r5VeD2fV04iDy8xfmaauHA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><div name="bfe6" class="graf graf--mixtapeEmbed graf-after--figure"><a href="https://store.enappd.com"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://store.enappd.com"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Enappd | Ionic, React Native, Firebase themes, templates and starters</strong><br><em class="markup--em markup--mixtapeEmbed-em">Get full source code for Ionic, React Native, Firebase mobile app templates and starters. Use free templates and…</em>store.enappd.com</a><a href="https://store.enappd.com" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="d30bfbce9a6c046f98ba43e2cd6d300e" data-thumbnail-img-id="0*kpKm0SVZrqdAUBgl" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*kpKm0SVZrqdAUBgl);"></a></div><p name="3641" class="graf graf--p graf--empty graf-after--mixtapeEmbed graf--trailing"><br></p></div></div></section></div></article></main>