Building an iOS-style Shopping App with a minimalist design using Flutter
Tags: flutter, cupertino, ios, shopping
Published: 2020-03-25 21:30:59

<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="071b" 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="f126" class="graf graf--p graf-after--figure">The Material Design language was created for any platform, not just Android. When you write a Material app in Flutter, it has the Material look and feels on all devices, even iOS. If you want your app to <em class="markup--em markup--p-em">look</em> like a standard iOS-styled app, then you would use the Cupertino library.</p><p name="b439" class="graf graf--p graf-after--p">You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won’t have the correct fonts on Android. For this reason, use an iOS-specific device when writing a Cupertino app.</p><h4 name="c87f" 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 shopping app with an iOS materialistic design using the Flutter SDK. Your app will have:</p><ul class="postList"><li name="2b05" class="graf graf--li graf-after--p">Three tabs for <strong class="markup--strong markup--li-strong">Products</strong>, <strong class="markup--strong markup--li-strong">Search</strong> and <strong class="markup--strong markup--li-strong">Cart</strong>.</li><li name="194c" class="graf graf--li graf-after--li">Holistic flow for buying any product.</li><li name="a593" class="graf graf--li graf-after--li">Use the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">provider</strong></code><strong class="markup--strong markup--li-strong"> </strong>package to manage state between screens.</li></ul><figure tabindex="0" contenteditable="false" name="07df" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1244px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="1*308ry-b9mD5sZxxbtaedcQ.png" data-width="1080" data-height="1920" src="https://cdn-images-1.medium.com/max/720/1*308ry-b9mD5sZxxbtaedcQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="602e" class="graf graf--p graf-after--figure">This tutorial focuses on building important components and Cupertino layout. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.</p><h4 name="359c" class="graf graf--h4 graf-after--p">Github Repository | <a href="https://github.com/ShivamGoyal1899/CupertinoShoppingApp"  class="markup--anchor markup--h4-anchor"    target="_blank">@ShivamGoyal1899</a></h4><p name="c4fa" class="graf graf--p graf--empty graf-after--h4" ><br></p><h4 name="3aaa" class="graf graf--h4 graf-after--p graf--trailing">Package Used |&nbsp;<a href="https://pub.dev/packages/provider"  class="markup--anchor markup--h4-anchor"    target="_blank">provider</a></h4></div></div></section><section name="f2f6" 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="2e7e" class="graf graf--h3 graf--leading">Setting up Flutter on your&nbsp;machine</h3><p name="f77d" class="graf graf--p graf-after--h3 graf--trailing">The detailed steps to install Flutter on your personal computer &amp; getting started with Flutter is available at the following blog post <a href="https://medium.com/enappd/install-flutter-on-windows-and-mac-1fd1dde453ba"  class="markup--anchor markup--p-anchor"    target="_blank">here</a>.</p></div></div></section><section name="06d9" 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="0eb8" class="graf graf--h3 graf--leading">Coding the application</h3><h4 name="269c" class="graf graf--h4 graf-after--h3">Create the initial Cupertino app</h4><ul class="postList"><li name="4657" class="graf graf--li graf-after--h4">Create a simple templated Flutter app, using the instructions in the above blog. Name the project <strong class="markup--strong markup--li-strong">cupertino_store.</strong> You’ll be modifying this starter app to create the finished app.</li><li name="f353" class="graf graf--li graf-after--li">Replace the contents of <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">main.dart</strong></code><strong class="markup--strong markup--li-strong"> </strong>with the following code.</li></ul><figure tabindex="0" contenteditable="false" name="fd66" class="graf graf--figure graf--iframe graf-after--li 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/b29ab97b229c230da68efaef5a7db69f.js %}</div></div></figure><ul class="postList"><li name="dd60" class="graf graf--li graf-after--figure is-selected">Add a file to the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib</strong></code><strong class="markup--strong markup--li-strong"> </strong>directory called <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">styles.dart</strong></code>. The <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Styles</strong></code><strong class="markup--strong markup--li-strong"> </strong>class defines the text and color styling to customize the app.</li></ul><figure tabindex="0" contenteditable="false" name="3bf7" class="graf graf--figure graf--iframe graf-after--li 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/d1b67ed3b83591acb2d424245f97ebf8.js %}</div></div></figure><ul class="postList"><li name="eb55" class="graf graf--li graf-after--figure">Add the following <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CupertinoStoreApp</strong></code><strong class="markup--strong markup--li-strong"> </strong>class to <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/app.dart</strong></code>.</li></ul><figure tabindex="0" contenteditable="false" name="9d31" class="graf graf--figure graf--iframe graf-after--li 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/9e4e064a83d76596c4d4a61a2adb7533.js %}</div></div></figure><ul class="postList"><li name="a721" class="graf graf--li graf-after--figure">Add the following <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CupertinoStoreHomePage</strong></code><strong class="markup--strong markup--li-strong"> </strong>class to <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/app.dart</strong></code> to create the layout for the homepage.</li></ul><figure tabindex="0" contenteditable="false" name="0da6" class="graf graf--figure graf--iframe graf-after--li 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/0edd52c73dfe9cfdb2ad5ff23c1da258.js %}</div></div></figure><ul class="postList"><li name="1a3b" class="graf graf--li graf-after--figure">At the top of the project, edit the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">pubspec.yaml</strong></code> file. Add the libraries that you will need, and a list of the image assets.</li></ul><figure tabindex="0" contenteditable="false" name="a180" class="graf graf--figure graf--iframe graf-after--li 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/8ec88f0f292d2a4d1dddd7c60f594475.js %}</div></div></figure><h4 name="d85b" class="graf graf--h4 graf-after--figure">Create the structure for a 3-tab&nbsp;app</h4><figure tabindex="0" contenteditable="false" name="8784" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 84px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 12%;"></div><img class="graf-image" data-image-id="1*LkWTLn2vGc5hkSJFkHo0zQ.png" data-width="1079" data-height="130" src="https://cdn-images-1.medium.com/max/720/1*LkWTLn2vGc5hkSJFkHo0zQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">BottomAppBar</figcaption></figure><ul class="postList"><li name="2dbe" class="graf graf--li graf-after--figure">The final app features 3 tabs:<br>Product list | Product search | Shopping cart</li><li name="4ac5" class="graf graf--li graf-after--li">Replace the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CupertinoStoreHomePage</strong></code><strong class="markup--strong markup--li-strong"> </strong>class with the following, which sets up a 3-tab scaffold:</li></ul><figure tabindex="0" contenteditable="false" name="5284" class="graf graf--figure graf--iframe graf-after--li 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/83935be23d5e5755580bb73ea431d2ee.js %}</div></div></figure><ul class="postList"><li name="3883" class="graf graf--li graf-after--figure">Create a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/product_list_tab.dart</strong></code><strong class="markup--strong markup--li-strong"> </strong>file for the first tab that compiles cleanly, but only displays a white screen. Use the following content:</li></ul><figure tabindex="0" contenteditable="false" name="8037" class="graf graf--figure graf--iframe graf-after--li 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/11bd485e25f354416e0c0c07df7332e8.js %}</div></div></figure><ul class="postList"><li name="4e20" class="graf graf--li graf-after--figure">Create a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/search_tab.dart</strong></code> file that compiles cleanly, but only displays a white screen. Use the following content:</li></ul><figure tabindex="0" contenteditable="false" name="500d" class="graf graf--figure graf--iframe graf-after--li 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/a3dbe6fa19bc5ba44d7a3a2dcbf4e096.js %}</div></div></figure><ul class="postList"><li name="8f1e" class="graf graf--li graf-after--figure">Create a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/shopping_cart_tab.dart</strong></code> file that compiles cleanly, but only displays a white screen. Use the following content:</li></ul><figure tabindex="0" contenteditable="false" name="30c3" class="graf graf--figure graf--iframe graf-after--li 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/c4fe1e0fe537530ef00b6da2dcb747ca.js %}</div></div></figure><ul class="postList"><li name="6740" class="graf graf--li graf-after--figure">Update the import statements in <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/app.dart</strong></code> to pull in the new tab widgets:</li></ul><figure tabindex="0" contenteditable="false" name="8e58" class="graf graf--figure graf--iframe graf-after--li 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/ff4cbe4ae2f105ae1dcb77d20737352a.js %}</div></div></figure><h4 name="8d41" class="graf graf--h4 graf-after--figure">Add state management</h4><ul class="postList"><li name="1010" class="graf graf--li graf-after--h4">Create a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">model</strong></code> directory under <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib</strong></code>. Add a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/model/product.dart</strong></code> file that defines the product data coming from the data source:</li></ul><figure tabindex="0" contenteditable="false" name="acc6" class="graf graf--figure graf--iframe graf-after--li 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/5242c30b17dd2a64894be6f94b32bea4.js %}</div></div></figure><ul class="postList"><li name="333b" class="graf graf--li graf-after--figure">Create a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/model/products_repository.dart</strong></code> file. This file contains all products for sale. Each product belongs to a category.</li></ul><figure tabindex="0" contenteditable="false" name="65ae" class="graf graf--figure graf--iframe graf-after--li 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/b56a4d1ea6336ca526810e35c9d7636d.js %}</div></div></figure><ul class="postList"><li name="1561" class="graf graf--li graf-after--figure">Here is the list of method signatures provided by this class.</li></ul><figure tabindex="0" contenteditable="false" name="f22c" class="graf graf--figure graf--iframe graf-after--li 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/9d27af60bd936ec8e2b02a250bd9804d.js %}</div></div></figure><ul class="postList"><li name="50ae" class="graf graf--li graf-after--figure">In the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">main()</strong></code>method, initialize the model. Add the lines marked with NEW.</li></ul><figure tabindex="0" contenteditable="false" name="7c08" class="graf graf--figure graf--iframe graf-after--li 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/59ab7f673b502e0278c0fe5ebaace8fc.js %}</div></div></figure><h4 name="b8c1" class="graf graf--h4 graf-after--figure">List products for&nbsp;sale</h4><ul class="postList"><li name="3ba2" class="graf graf--li graf-after--h4">Create the <code class="markup--code markup--li-code">lib/product_row_item.dart file</code>, with the following content:</li></ul><figure tabindex="0" contenteditable="false" name="4389" class="graf graf--figure graf--iframe graf-after--li 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/6cb90a17e9d4bd36511cce9563285cef.js %}</div></div></figure><ul class="postList"><li name="feec" class="graf graf--li graf-after--figure">In <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/product_list_tab.dart</strong></code>, import the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">product_row_item.dart</strong></code> file.</li></ul><pre name="cd3d" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">import</strong> 'package:flutter/cupertino.dart';<br><strong class="markup--strong markup--pre-strong">import</strong> 'package:provider/provider.dart';<br><strong class="markup--strong markup--pre-strong">import</strong> 'model/app_state_model.dart';<br><strong class="markup--strong markup--pre-strong">import</strong> 'product_row_item.dart';      <strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">// add this line</em></strong></code></pre><ul class="postList"><li name="813a" class="graf graf--li graf-after--pre">In the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">build()</strong></code> method for <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">ProductRowTab</strong></code>, get the product list and the number of products. Add the new lines indicated below:</li></ul><figure tabindex="0" contenteditable="false" name="a59a" class="graf graf--figure graf--iframe graf-after--li 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/1160b634e13f9be438067f39bff11f7f.js %}</div></div></figure><ul class="postList"><li name="d6d9" class="graf graf--li graf-after--figure">Also in the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">build()</strong></code> method, add a new sliver to the sliver widgets list to hold the product list. Add the new lines indicated below:</li></ul><figure tabindex="0" contenteditable="false" name="16f0" class="graf graf--figure graf--iframe graf-after--li 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/cca5ad3d2010e641a013f1696ba8ef3a.js %}</div></div></figure><h4 name="093b" class="graf graf--h4 graf-after--figure">Add product&nbsp;search</h4><figure tabindex="0" contenteditable="false" name="01d5" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 266px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.400000000000006%;"></div><img class="graf-image" data-image-id="1*feb51AWSGeWjmu1JtdBNKA.gif" data-width="480" data-height="266" src="https://cdn-images-1.medium.com/max/720/1*feb51AWSGeWjmu1JtdBNKA.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><ul class="postList"><li name="8351" class="graf graf--li graf-after--figure">Update the imports in <code class="markup--code markup--li-code">lib/search_tab.dart</code>. Add imports for the classes that the search tab will use:</li></ul><figure tabindex="0" contenteditable="false" name="4580" class="graf graf--figure graf--iframe graf-after--li 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/3c953fefed2365f847e1f12f5550cd3a.js %}</div></div></figure><ul class="postList"><li name="2b0b" class="graf graf--li graf-after--figure">Update the <code class="markup--code markup--li-code">build()</code> method in <code class="markup--code markup--li-code">_SearchTabState</code>. Initialize the model and replace the <code class="markup--code markup--li-code">CustomScrollView</code> with individual components for searching and listing.</li></ul><figure tabindex="0" contenteditable="false" name="dc74" class="graf graf--figure graf--iframe graf-after--li 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/d2dc47540d2ed02b5e16bbaca9e6bf92.js %}</div></div></figure><ul class="postList"><li name="e2e2" class="graf graf--li graf-after--figure">Add supporting variables, functions, and methods to the <code class="markup--code markup--li-code">_SearchTabState</code> class. These include <code class="markup--code markup--li-code">initState()</code>, <code class="markup--code markup--li-code">dispose()</code>, <code class="markup--code markup--li-code">_onTextChanged()</code>, and <code class="markup--code markup--li-code">_buildSearchBox()</code>, as shown below:</li></ul><figure tabindex="0" contenteditable="false" name="6b7c" class="graf graf--figure graf--iframe graf-after--li 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/76996237c4cea653bcecfc0797e63edd.js %}</div></div></figure><ul class="postList"><li name="d742" class="graf graf--li graf-after--figure">Create a new file, <code class="markup--code markup--li-code">lib/search_bar.dart</code>. The <code class="markup--code markup--li-code">SearchBar</code> class handles the actual search on the product list. Seed the file with the following content:</li></ul><figure tabindex="0" contenteditable="false" name="1f58" class="graf graf--figure graf--iframe graf-after--li 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/e6071bfd261c143ff6297a9a5a0187f7.js %}</div></div></figure><h4 name="d26a" class="graf graf--h4 graf-after--figure">Add customer&nbsp;info</h4><ul class="postList"><li name="b6e4" class="graf graf--li graf-after--h4">Update the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/shopping_cart_tab.dart</strong></code> file. Add private methods for building the name, email, and location fields. Then add a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_buildSliverChildBuildDelegate()</strong></code> method that builds out parts of the user interface.</li></ul><figure tabindex="0" contenteditable="false" name="1515" class="graf graf--figure graf--iframe graf-after--li 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/da55d021a676d3241d7c712a75c4b431.js %}</div></div></figure><ul class="postList"><li name="918b" class="graf graf--li graf-after--figure">Update the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">build()</strong></code> method in the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_SearchTabState</strong></code><strong class="markup--strong markup--li-strong"> </strong>class. Add a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">SliverSafeArea</strong></code><strong class="markup--strong markup--li-strong"> </strong>that calls the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_buildSliverChildBuildingDelegate</strong></code> method:</li></ul><figure tabindex="0" contenteditable="false" name="dbe3" class="graf graf--figure graf--iframe graf-after--li 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/a2d6fea4db1c29292ee5155c35eb4bb3.js %}</div></div></figure><h4 name="cf14" class="graf graf--h4 graf-after--figure">Add date&nbsp;picker</h4><ul class="postList"><li name="5385" class="graf graf--li graf-after--h4">Add imports and a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">const</strong></code> to <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">lib/shopping_cart_tab.dart</strong></code>. Add the new lines, as shown:</li></ul><figure tabindex="0" contenteditable="false" name="c152" class="graf graf--figure graf--iframe graf-after--li 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/aa9a7376cc73541f048556b5b2430b55.js %}</div></div></figure><ul class="postList"><li name="2208" class="graf graf--li graf-after--figure">Add a <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_buildDateAndTimePicker()</strong></code> function to the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_ShoppingCartTab</strong></code> widget. Add the function, as follows:</li></ul><figure tabindex="0" contenteditable="false" name="a409" class="graf graf--figure graf--iframe graf-after--li 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/0d330bf1c2d6f9bbf13076addc185b67.js %}</div></div></figure><ul class="postList"><li name="5efa" class="graf graf--li graf-after--figure">Add a call to build the date and time UI, to the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_buildSliverChildBuilderDelegate</strong></code><strong class="markup--strong markup--li-strong"> </strong>function. Add the new code, as shown:</li></ul><figure tabindex="0" contenteditable="false" name="f903" class="graf graf--figure graf--iframe graf-after--li 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/bcdae57d23e43a3ce27bd053a6c03820.js %}</div></div></figure><h4 name="7259" class="graf graf--h4 graf-after--figure">Add selected items for&nbsp;purchase</h4><ul class="postList"><li name="da57" class="graf graf--li graf-after--h4">Import the product package in <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">shopping_cart_tab.dart</strong></code>.</li></ul><pre name="e681" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">import</strong> 'model/product.dart';</code></pre><ul class="postList"><li name="b5a2" class="graf graf--li graf-after--pre">Add a currency format to the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_ShoppingCartTabState</strong></code><strong class="markup--strong markup--li-strong"> </strong>class.</li></ul><pre name="cdbf" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">final</strong> _currencyFormat = NumberFormat.<strong class="markup--strong markup--pre-strong">currency</strong>(symbol: '\$');</code></pre><ul class="postList"><li name="0a76" class="graf graf--li graf-after--pre">Add a product index to the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">_buildSliverChildBuilderDelegate</strong></code><strong class="markup--strong markup--li-strong"> </strong>function.</li></ul><pre name="d34b" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0">SliverChildBuilderDelegate _buildSliverChildBuilderDelegate(<br>   AppStateModel model) {<br> return SliverChildBuilderDelegate(<br>   (context, index) {<br>     final productIndex = index - 4;    <em class="markup--em markup--pre-em">// NEW</em><br>     switch (index) {]<br>  <em class="markup--em markup--pre-em">// ...</em></code></pre><ul class="postList"><li name="e8be" class="graf graf--li graf-after--pre">In the same function, display the items to purchase. Add the code to the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">default:</strong></code> section of the switch statement, as follows:</li></ul><figure tabindex="0" contenteditable="false" name="13a6" class="graf graf--figure graf--iframe graf-after--li is-defaultValue graf--trailing"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/ShivamGoyal1899/9abd874cfaf68ba823756b35ca005336.js %}</div></div></figure></div></div></section><section name="a543" 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="25f3" class="graf graf--h3 graf--leading">Building &amp; running the application</h3><ul class="postList"><li name="97e7" class="graf graf--li graf-after--h3">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="afc4" class="graf graf--figure graf-after--li is-defaultValue 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*7vgO_HahD3t-T6ztdqcraQ.gif" data-width="600" data-height="1066" src="https://cdn-images-1.medium.com/max/720/1*7vgO_HahD3t-T6ztdqcraQ.gif"><div class="crosshair u-ignoreBlock"></div></div></figure></div></div></section><section name="656e" 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="4f4f" 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="1b0e" 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="7ec5" 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><p name="df54" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>