Building a Flutter DateTime Picker in just 15 minutes
Tags: android, ios, flutter, datetimepicker
Published: 2020-03-25 05:14:00

<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="bc59" 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="c874" class="graf graf--p graf-after--figure">With the <a href="https://pub.dev/packages/flutter_datetime_picker"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Flutter DateTime Picker plugin</a>, you can add date &amp; time pickers to your native application. The plugin’s interface is inspired by the iOS Cupertino style menu.</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 mobile app featuring a DateTime Picker using the Flutter SDK. Your app will:</p><ul class="postList"><li name="2b05" class="graf graf--li graf-after--p">Display separate Date &amp; Time Pickers with a minimalistic interface</li><li name="17c4" class="graf graf--li graf-after--li">Display the selected data as outputs to console</li></ul><figure tabindex="0" contenteditable="false" name="2262" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 280px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 39.900000000000006%;"></div><img class="graf-image" data-image-id="1*Q90FHAfT2z5cImKivaL9BA.png" data-width="2048" data-height="818" src="https://cdn-images-1.medium.com/max/720/1*Q90FHAfT2z5cImKivaL9BA.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 DateTime Picker gonna&nbsp;look</figcaption></figure><p name="602e" class="graf graf--p graf-after--figure">This tutorial focuses on adding a DateTime Picker 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="359c" 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/DateTimePicker"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/ShivamGoyal1899/DateTimePicker"   ><strong class="markup--strong markup--mixtapeEmbed-strong">ShivamGoyal1899/DateTimePicker</strong><br><em class="markup--em markup--mixtapeEmbed-em">With the Flutter DateTime Picker plugin, you can add date &amp; time pickers to your native application. The plugin's…</em>github.com</a><a href="https://github.com/ShivamGoyal1899/DateTimePicker" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="bc23734fc456569195d720e339ed0824" data-thumbnail-img-id="0*h9Nk4dvslRWjouFW" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*h9Nk4dvslRWjouFW);"></a></div><h4 name="3aaa" class="graf graf--h4 graf-after--mixtapeEmbed">Package Used | flutter_datetime_picker</h4><div name="f633" class="graf graf--mixtapeEmbed graf-after--h4 graf--trailing"><a href="https://pub.dev/packages/flutter_datetime_picker"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://pub.dev/packages/flutter_datetime_picker"   ><strong class="markup--strong markup--mixtapeEmbed-strong">flutter_datetime_picker | Flutter Package</strong><br><em class="markup--em markup--mixtapeEmbed-em">(Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date…</em>pub.dev</a><a href="https://pub.dev/packages/flutter_datetime_picker" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="27189a586d2f79f86dce70e5817f0411" data-thumbnail-img-id="0*RtKSeVzQJDequPL1" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*RtKSeVzQJDequPL1);"></a></div></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">The detailed steps to install Flutter on your personal computer &amp; getting started with Flutter is available at the following blog</p><div name="ca81" 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="25f3" 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 a DateTime Picker looks like the one below:</p><figure tabindex="0" contenteditable="false" name="b1de" 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/a9c940d27e1f7e9f3ab00d11a4694576.js %}</div></div></figure><h4 name="54d1" class="graf graf--h4 graf-after--figure">Adding DateTime Picker plugin as a dependency</h4><p name="de16" class="graf graf--p graf-after--h4">Adding additional capability to a Flutter app is easy using <a href="https://pub.dev/flutter"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Pub packages</a>. In this tutorial, you introduce the <a href="https://pub.dev/packages/flutter_datetime_picker"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">DateTime Picker plugin</a> by adding a single line to the <code class="markup--code markup--p-code">pubspec.yaml</code> file.</p><figure tabindex="0" contenteditable="false" name="2ab2" 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/c42e9a1293c7b990cc55068d9b3127b8.js %}</div></div></figure><h4 name="efcd" class="graf graf--h4 graf-after--figure">Importing plugin to main.dart file</h4><p name="3eb1" class="graf graf--p graf-after--h4">Import <strong class="markup--strong markup--p-strong">flutter_datetime_picker</strong> dependency to your main.dart file by adding the following line at the starting of the file:</p><figure tabindex="0" contenteditable="false" name="97f6" 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/eee11d94ebfafab8bef2001b19eb5332.js %}</div></div></figure><h4 name="dbee" class="graf graf--h4 graf-after--figure">Putting Code in&nbsp;action</h4><p name="cb5b" class="graf graf--p graf-after--h4">Amend your main.dart file as per the following code:</p><figure tabindex="0" contenteditable="false" name="8834" 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/2200371794b2d5cf1bc684023a947b02.js %}</div></div></figure><h4 name="ac06" 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 is-selected">And Boooom, your app is ready.<br>The final build would look like the below illustration.</li></ul><figure tabindex="0" contenteditable="false" name="4596" 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*yMUKAc0Z2tNcEV-eMI2UfA.gif" data-width="600" data-height="1066" src="https://cdn-images-1.medium.com/max/720/1*yMUKAc0Z2tNcEV-eMI2UfA.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="c6dc" 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="05e1" class="graf graf--h3 graf--leading">Customization Options</h3><p name="fc4d" class="graf graf--p graf-after--h3">There are three functional variations of the plugin available as follows:</p><ul class="postList"><li name="936c" class="graf graf--li graf-after--p">Solo DatePicker</li><li name="2db5" class="graf graf--li graf-after--li">Solo TimePicker</li><li name="15ce" class="graf graf--li graf-after--li">Dual DateTimePicker</li></ul><h4 name="c80a" class="graf graf--h4 graf-after--li">Language Options</h4><p name="645b" class="graf graf--p graf-after--h4">There are various language options available to implement the plugin for international use. For changing the language of the component amend the following with preferred <strong class="markup--strong markup--p-strong">LocaleType</strong>.</p><pre name="4eac" class="graf graf--pre graf-after--p">locale: LocaleType.<strong class="markup--strong markup--pre-strong">en</strong></pre><ul class="postList"><li name="b89f" class="graf graf--li graf-after--pre">English(en)</li><li name="4ead" class="graf graf--li graf-after--li">Persian(fa)</li><li name="0a68" class="graf graf--li graf-after--li">Chinese(zh)</li><li name="9dd8" class="graf graf--li graf-after--li">Dutch(nl)</li><li name="3574" class="graf graf--li graf-after--li">Russian(ru)</li><li name="ff83" class="graf graf--li graf-after--li">Italian(it)</li><li name="e2dd" class="graf graf--li graf-after--li">French(fr)</li><li name="1c67" class="graf graf--li graf-after--li">Spanish(es)</li><li name="04a9" class="graf graf--li graf-after--li">Polish (pl)</li><li name="8b66" class="graf graf--li graf-after--li">Portuguese(pt)</li><li name="0547" class="graf graf--li graf-after--li">Korean(ko)</li><li name="95a1" class="graf graf--li graf-after--li">Arabic(ar)</li><li name="f592" class="graf graf--li graf-after--li">Turkish(tr)</li><li name="5a6e" class="graf graf--li graf-after--li">Japanese(jp)</li><li name="9bf2" class="graf graf--li graf-after--li">German(de)</li><li name="11e0" class="graf graf--li graf-after--li">Danish(da)</li><li name="1cb6" class="graf graf--li graf-after--li">Bengali(bn)</li><li name="fd79" class="graf graf--li graf-after--li">Vietnamese(vi)</li><li name="cfb6" class="graf graf--li graf-after--li">Armenian(hy)</li></ul><h4 name="b85d" class="graf graf--h4 graf-after--li">Further Customisations</h4><p name="bf7b" class="graf graf--p graf-after--h4">If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker models (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand.</p><p name="635b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">How to customize your own picker model:</strong></p><figure tabindex="0" contenteditable="false" name="7b9b" class="graf graf--figure graf--iframe graf-after--p 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/441c080a6ef7880b966e9ecdcddda28a.js %}</div></div></figure></div></div></section><section name="1bf3" 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="beef" class="graf graf--h3 graf--leading">🔍 Read more of my&nbsp;Articles</h3><div name="b5ff" class="graf graf--mixtapeEmbed graf-after--h3"><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="af0d80c40373d080db1bd8695be94a38" 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 name="b598" class="graf graf--mixtapeEmbed graf-after--mixtapeEmbed"><a href="https://medium.com/enappd/flutter-tutorial-for-native-app-building-and-facebook-authentication-978f0ee44976"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/enappd/flutter-tutorial-for-native-app-building-and-facebook-authentication-978f0ee44976"   ><strong class="markup--strong markup--mixtapeEmbed-strong">How to add Facebook Authentication to your Flutter App</strong><br><em class="markup--em markup--mixtapeEmbed-em">Learn how to add Facebook OAuth to your Flutter App with easy step by step guide</em>medium.com</a><a href="https://medium.com/enappd/flutter-tutorial-for-native-app-building-and-facebook-authentication-978f0ee44976" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="30761846c5d360f37f5aa7c8156cf1c0" data-thumbnail-img-id="1*iYb-v9BRCiwvreMdahpqPA.png" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/1*iYb-v9BRCiwvreMdahpqPA.png);"></a></div><div name="4090" class="graf graf--mixtapeEmbed graf-after--mixtapeEmbed graf--trailing"><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="2eef953bcbe9b5e33e3a0301d4bc0b8c" 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></div></section><section name="3153" 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="e77b" 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="97a4" 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="e881" 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*3r_XtJjCgu-mCree" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*3r_XtJjCgu-mCree);"></a></div><p name="b80b" class="graf graf--p graf--empty graf-after--mixtapeEmbed graf--trailing"><br></p></div></div></section></div></article></main>