What's new with Flutter 1.7 & how to upgrade to the latest version
Tags: flutter, android, ios, androidx
Published: 2020-03-25 22:51:18

<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="b0b3" 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="e320" class="graf graf--p graf-after--figure">Flutter has got a new &amp; improved version of itself in it’s July release. The release is available now in the stable channel for users to upgrade. Flutter 1.7 contains support for AndroidX and for updated Play Store requirements, a number of new and enhanced components, and bug fixes to customer-reported issues.</p><h3 name="7e9b" class="graf graf--h3 graf-after--p">Upgrading to Flutter&nbsp;1.7</h3><p name="23a7" class="graf graf--p graf-after--h3">If you already have Flutter on your system and you’re on the default stable channel, you can upgrade to version 1.7 by running <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">flutter upgrade</strong></code> from the command line.</p><p name="3cdc" class="graf graf--p graf-after--p graf--trailing">If you want to freshly install Flutter on your system then you can find it <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="b0da" 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="293f" class="graf graf--h3 graf--leading">New Features &amp;&nbsp;Upgrades</h3><h4 name="98df" class="graf graf--h4 graf-after--h3">New widgets and framework enhancements</h4><ul class="postList"><li name="d276" class="graf graf--li graf-after--h4"><strong class="markup--strong markup--li-strong">Range Slider<br></strong>This release features a new <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">RangeSlider</strong></code> control that lets you select a range of values on a single slider (for example a minimum and maximum temperature value):</li></ul><figure tabindex="0" contenteditable="false" name="1f4c" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 659px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 109.80000000000001%;"></div><img class="graf-image" data-image-id="1*3-xTJ2gYMa_a5WzZwW4DqA.gif" data-width="600" data-height="659" src="https://cdn-images-1.medium.com/max/720/1*3-xTJ2gYMa_a5WzZwW4DqA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">The new, themeable RangeSlider widget supports continuous or discrete&nbsp;styles</figcaption></figure><ul class="postList"><li name="9c7e" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">Snackbar<br></strong> The updated <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">SnackBar</strong></code><strong class="markup--strong markup--li-strong"> </strong>widget supports an updated look in the Material spec, and a number of new samples are added to the documentation.</li><li name="6dff" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Cupertino<br></strong>The fidelity of the <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CupertinoPicker</strong></code><strong class="markup--strong markup--li-strong"> </strong>and <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CupertinoDateTimePicker</strong></code><strong class="markup--strong markup--li-strong"> </strong>widgets are updated and added support for localization to non-English languages.</li><li name="fba8" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Text Selection &amp; Editing<br></strong>Flutter devs have made major improvements to the text selection and editing experience on iOS, regardless of whether you’re using the Material or Cupertino design language.</li><li name="a1bd" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Text Rendring<br></strong>Text rendering gets a big upgrade with support for rich typography features, including tabular and old-style numbers, slashed zeros, and stylistic sets, as this demo shows:</li></ul><figure tabindex="0" contenteditable="false" name="5e9d" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 192.5%;"></div><img class="graf-image" data-image-id="1*CECd-z9tyN5S2NmGaHGgoQ.png" data-width="831" data-height="1600" src="https://cdn-images-1.medium.com/max/720/1*CECd-z9tyN5S2NmGaHGgoQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">With Flutter, you can now add sophisticated typography with OpenType font feature&nbsp;support</figcaption></figure><ul class="postList"><li name="dcee" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">Game Controllers<br></strong>Flutter now has built-in support for gaming controllers and you can build those feature natively.</li></ul><h4 name="d5c7" class="graf graf--h4 graf-after--li">AndroidX Support for New&nbsp;Apps</h4><figure tabindex="0" contenteditable="false" name="7fe0" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 533px; max-height: 300px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*tNteefww-CcWg6l04K-8Pw.jpeg" data-width="533" data-height="300" src="https://cdn-images-1.medium.com/max/720/1*tNteefww-CcWg6l04K-8Pw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="93b3" class="graf graf--p graf-after--figure"><a href="https://developer.android.com/jetpack/androidx"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">AndroidX</a> is a new open-source support library from the Jetpack team that helps Android apps stay updated with the latest components without sacrificing backward compatibility. Now that AndroidX is itself stable and many Flutter packages have been updated to support it, Flutter supports creating new Flutter projects with AndroidX, which reduces the work needed to integrate with other parts of the Android ecosystem.</p><p name="789b" class="graf graf--p graf-after--p">When creating a Flutter project, you can add the <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">--androidx</strong></code> flag to ensure the generated project targets the new support library. Information about migrating existing projects to AndroidX can be found on <a href="https://flutter.dev"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">flutter.dev</a>. We’re actively working on bringing AndroidX / Jetifier support for apps with mixed AndroidX / Android Support libraries, such as in add-to-app cases, and will have more to share on this front in a forthcoming post.</p><h4 name="98b7" class="graf graf--h4 graf-after--p is-selected">Support for Android app bundles and 64-bit Android&nbsp;apps</h4><p name="274a" class="graf graf--p graf-after--h4">From August 1st, 2019, Android apps that use native code and target Android 9 Pie will be required to provide a <strong class="markup--strong markup--p-strong">64-bit version</strong> in addition to the 32-bit version when publishing to the <strong class="markup--strong markup--p-strong">Google Play Store</strong>. While Flutter has long supported generating 64-bit Android apps, version 1.7 adds support for creating Android App Bundles that target both 64-bit and 32-bit from a single submission. The particular steps for how to create separate APK files for both 32-bit and 64-bit devices are provided in a separate blog post.</p><h4 name="fa66" class="graf graf--h4 graf-after--p">Building apps on Xcode becomes&nbsp;easy</h4><p name="a29d" class="graf graf--p graf-after--h4">Flutter has particular added support for the new Xcode build system in Flutter 1.7 release, so as to make the development of Flutter apps easy &amp; comfortable on Mac. The support can be easily enabled for existing projects in minimum clicks.</p><h3 name="9d9d" class="graf graf--h3 graf-after--p">Over 1250 issues closed on&nbsp;Github</h3><figure tabindex="0" contenteditable="false" name="9318" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 400px; max-height: 226px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.49999999999999%;"></div><img class="graf-image" data-image-id="1*zi0eDtL7N1vNq4tpSXtgPg.gif" data-width="400" data-height="226" src="https://cdn-images-1.medium.com/max/720/1*zi0eDtL7N1vNq4tpSXtgPg.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="0da6" class="graf graf--p graf-after--figure">Flutter responded to customer-reported issues, with over 1,250 issues closed in the two months since their last stable release in May.</p><p name="0079" class="graf graf--p graf-after--p">With the rapid growth in Flutter is working to increase staffing in this area, which will help with faster triaging of new bugs, closing and merging duplicate issues and redirecting support requests to StackOverflow.</p><p name="3562" class="graf graf--p graf-after--p">Flutter team has also fixed the top crashing bug, which was an error when the Flutter tool is unable to write to the Flutter directory. Flutter now fails gracefully if the user doesn’t have write permissions, with clearer indications on how to fix the problem.</p><h3 name="dfdb" class="graf graf--h3 graf-after--p">Updated Documentation &amp;&nbsp;Samples</h3><p name="cb59" class="graf graf--p graf-after--h3">In terms of documentation, Flutter has an ever-increasing list of samples that can be created directly from the flutter create tool. From the command line, you can run a command such as:</p><pre name="1888" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$ flutter create --sample=material.AppBar.1 mysample</strong></pre><p name="de2a" class="graf graf--p graf-after--pre">If a sample can be created in this way, you’ll see a “Sample in the App” tab in the documentation of that particular widget.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="867a" class="graf graf--figure graf--layoutOutsetCenter graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 378px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31.7%;"></div><img class="graf-image" data-image-id="1*dETEBh8c3YPs3GmvPootVQ.png" data-width="1250" data-height="396" src="https://cdn-images-1.medium.com/max/1080/1*dETEBh8c3YPs3GmvPootVQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="2673" class="graf graf--p graf-after--figure graf--trailing">Behind the scenes, you’ll see lots of underlying work to create infrastructure towards enabling Flutter on macOS and Windows, with further support for important concepts like right-clicking and unique platform infrastructure such as MSBuild. Support for non-mobile platforms is not yet available in the stable channel, however.</p></div></div></section><section name="4688" 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="01ff" 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="1ed3" 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="8559" class="graf graf--figure is-defaultValue graf-after--pullquote"><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="b109" class="graf graf--p graf-after--figure">This article was originally published at <a href="https://enappd.com"  class="markup--anchor markup--p-anchor"    target="_blank">Enappd</a>.</p><p name="193d" class="graf graf--p graf--empty graf-after--p graf--trailing"><br></p></div></div></section></div></article></main>