{"id":12966,"date":"2020-05-22T09:40:33","date_gmt":"2020-05-22T09:40:33","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=12966"},"modified":"2026-05-19T10:38:17","modified_gmt":"2026-05-19T10:38:17","slug":"everything-you-need-to-know-about-flutter-1-17-and-dart-2-8","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/everything-you-need-to-know-about-flutter-1-17-and-dart-2-8","title":{"rendered":"Everything You Need to Know About Flutter 1.17 and Dart 2.8 (First Stable Update of Flutter and Dart)"},"content":{"rendered":"<style>\np{\n   width:100%;\n}\n<\/style>\n<p>The year 2022 has been an unpredictable one for sure. Who knew that the Covid-19 pandemic would stick to our lives for such a long time? Even Google canceled the <a href=\"https:\/\/events.google.com\/io\/\" rel=\"nofollow  noopener\" target=\"_blank\">Google I\/O event<\/a>, which was supposed to be the biggest newsbreak. However, <a href=\"https:\/\/www.bacancytechnology.com\/blog\/covid-19-outbreak-how-we-can-help-you-run-your-business\" rel=\"noopener\" target=\"_blank\">We Can Help You Run your Business-as-Usual and Ensure Productive IT Operations as Earlier<\/a>.<\/p>\n<p>Nevertheless, the year\u2019s most stable and favorable release from Google is the recently released Flutter 1.17 and Dart 2.8 versions.<\/p>\n<h2>All About Flutter 1.17 Update<\/h2>\n<p><strong>1. Google fonts<\/strong><\/p>\n<p>So, this is the primary essential change that Google has brought up with the latest Flutter 1.17 version. The google_fonts package provides you 977 fonts that you may readily use. <\/p>\n<p>It would help if you imported it in your pubspec dependencies, like this:<\/p>\n<p>import &#8216;package:google_fonts\/google_fonts.dart&#8217;;<\/p>\n<p>To use Google fonts, you can write the below code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/0_rVDzyHR9pg8vm-Zj.png\" alt=\"Google fonts\" width=\"377\" height=\"116\" class=\"aligncenter size-full wp-image-12967\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/0_rVDzyHR9pg8vm-Zj.png 377w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/0_rVDzyHR9pg8vm-Zj-300x92.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/0_rVDzyHR9pg8vm-Zj-20x6.png 20w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/p>\n<p>To use them with various styles, <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/various-styles.png\" alt=\"various styles\" width=\"622\" height=\"147\" class=\"aligncenter size-full wp-image-12969\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/various-styles.png 622w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/various-styles-300x71.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/various-styles-20x5.png 20w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/p>\n<p>And to incorporate fonts in your project theme, <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/incorporate-fonts.png\" alt=\"incorporate fonts\" width=\"440\" height=\"165\" class=\"aligncenter size-full wp-image-12972\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/incorporate-fonts.png 440w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/incorporate-fonts-300x113.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/incorporate-fonts-20x8.png 20w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/p>\n<p><strong>2. Better performance and Size Enhancements<\/strong><\/p>\n<p>Having your apps perform better is always a bait, and sure, it must be! After all, it\u2019s getting your app advantage from your users and the market. <\/p>\n<div id=\"attachment_12973\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12973\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Better-performance-and-Size-Enhancements.png\" alt=\"Better performance and Size Enhancements-Flutter 1.17\" width=\"800\" height=\"388\" class=\"size-full wp-image-12973\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Better-performance-and-Size-Enhancements.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Better-performance-and-Size-Enhancements-300x146.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Better-performance-and-Size-Enhancements-768x372.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Better-performance-and-Size-Enhancements-20x10.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-12973\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/medium.com\/flutter\/announcing-flutter-1-17-4182d8af7f8e\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Flutter Medium Blog<\/a>]<br \/><\/p><\/div>\n<p>The above graphical representation shows how memory is suitably utilized in the new version and improves your app performance. <\/p>\n<p>The latest Flutter 1.17 update has got the following performance enhancements:<\/p>\n<p>\u27a5 Quick and clear animations<br \/>\n\u27a5 Compact apps<br \/>\n\u27a5 Low memory consumption<br \/>\n\u27a5 Better navigation (20-40% improved)<br \/>\n\u27a5 Reduced CPU\/GPU (40%)<br \/>\n\u27a5 Better scrolling consuming low memory units<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Ready to Transform Your App Idea into Reality?<\/span><br \/>\n<a href=\"https:\/\/www.bacancytechnology.com\/hire-flutter-developer\" target=\"_blank\" rel=\"noopener\">Hire Flutter developers<\/a> from Bacancy to turn your vision into a fully functional, user-friendly, and visually captivating app.<\/i><\/strong><\/p>\n<p><strong>3. Metal Support for iOS<\/strong><\/p>\n<p>Most of the improved performance of Flutter 1.17 comes from the support of Metal API. Let me share a shred of evidence to express the difference between OpenGL and Metal on iOS.<\/p>\n<div id=\"attachment_12975\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12975\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Metal-Support-for-iOS.png\" alt=\"Metal Support for iOS\" width=\"800\" height=\"589\" class=\"size-full wp-image-12975\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Metal-Support-for-iOS.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Metal-Support-for-iOS-300x221.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Metal-Support-for-iOS-768x565.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Metal-Support-for-iOS-20x15.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-12975\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/medium.com\/flutter\/announcing-flutter-1-17-4182d8af7f8e\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Medium Post<\/a>]<\/p><\/div>\n<p>The above graph shows your iOS app frame, rendering time using OpenGL API Vs. Metal API. Shorter bars are meaning better speed and performance. And from the chart, Metal is way far better than OpenGL that Flutter used earlier.<\/p>\n<p>To understand better, see below image depicting how an iOS game would take up the memory using OpenGL and Metal. Results are Clear.<\/p>\n<div id=\"attachment_12977\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12977\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/OpenGL-and-Metal.jpg\" alt=\"OpenGL and Metal\" width=\"640\" height=\"336\" class=\"size-full wp-image-12977\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/OpenGL-and-Metal.jpg 640w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/OpenGL-and-Metal-300x158.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/OpenGL-and-Metal-20x11.jpg 20w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><p id=\"caption-attachment-12977\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/www.iphonelife.com\/blog\/28861\/ios-8-metal-get-ready-next-generation-mobile-gaming\" rel=\"nofollow  noopener\" target=\"_blank\">Iphonelife blog<\/a>]<\/p><\/div>\n<p>The Metal API provides direct access to the GPU, and it reduces the app frame rendering time.<\/p>\n<p><strong>4. New widgets \/ Updated Widgets<\/strong><\/p>\n<p>The Flutter update comes with some new and updated Material Design widgets such as NavigationRail(), DatePicker(), the new Text Input Mode, along with other <a href=\"https:\/\/www.bacancytechnology.com\/blog\/flutter-widgets\">Flutter widgets<\/a> like NavigationBar() and SegmentedButton().<\/p>\n<p>Here is a quick view of the new navigation widget, which is a boon for apps that want to switch from mobile to desktop.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Material-widgets.gif\" alt=\"Material widgets\" width=\"756\" height=\"1008\" class=\"aligncenter size-full wp-image-21741\" \/><\/p>\n<p>[Source: <a href=\"https:\/\/medium.com\/flutter\/announcing-flutter-1-17-4182d8af7f8e\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Flutter Medium Blog<\/a>]<\/p>\n<p>You may try it on the <a href=\"https:\/\/dartpad.dev\/b9c6cd345fd1cff643353c1f4902f888\" rel=\"nofollow  noopener\" target=\"_blank\">DartPad<\/a> using the <a href=\"https:\/\/github.com\/flutter\/samples\/tree\/master\/experimental\/web_dashboard\" rel=\"nofollow  noopener\" target=\"_blank\">web_dashboard GitHub package<\/a> to see this widget in real-time. <\/p>\n<p>Apart from the navigation widget, there\u2019s a new date picker widget and the new text input widget. Check them out here below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/619b5954b7358065754369.gif\" alt=\"New widgets\" width=\"245\" height=\"437\" class=\"aligncenter size-full wp-image-21742\" \/><br \/>\n[Source: <a href=\"https:\/\/medium.com\/flutter\/announcing-flutter-1-17-4182d8af7f8e\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Flutter Medium Blog<\/a>]<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/text-selection-overflow-in-Android.gif\" alt=\"text selection overflow in Android\" width=\"202\" height=\"186\" class=\"aligncenter size-full wp-image-21743\" \/><br \/>\n[Source: <a href=\"https:\/\/medium.com\/flutter\/announcing-flutter-1-17-4182d8af7f8e\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Flutter Medium Blog<\/a>]<\/p>\n<p>These newer widgets will surely improve the user experience of your Flutter apps on both Android and iOS platforms. <\/p>\n<p><strong>5. Material Text Scale<\/strong><\/p>\n<p>In the new Flutter update, the team has implemented <a href=\"https:\/\/material.io\/design\/typography\/the-type-system.html\" rel=\"nofollow  noopener\" target=\"_blank\">Material Design 2018 specifications<\/a>, while maintaining the integrity of the existing Flutter apps.  <\/p>\n<p>According to the Material TextStyles of 2018, we have mentioned some of the names and configurations in the table below:<\/p>\n<div id=\"attachment_12981\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-12981\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Material-Text-Scale.png\" alt=\"Material Text Scale\" width=\"800\" height=\"931\" class=\"size-full wp-image-12981\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Material-Text-Scale.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Material-Text-Scale-258x300.png 258w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Material-Text-Scale-768x894.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/Material-Text-Scale-17x20.png 17w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-12981\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/material.io\/design\/typography\/the-type-system.html#type-scale\" rel=\"nofollow  noopener\" target=\"_blank\">2018 Material Design Specifications<\/a>]<\/p><\/div>\n<p>However, if you are using older versions of Flutter, your application won\u2019t break down. But just the platforms will suggest you upgrade to the newer naming conventions. For eg., Body 1 &#038; Body 2 in the above image will be known as bodyText1 &#038; bodyText2 respectively in the TextTheme API, and H1-H6 are called headline-1 to headline-6. <\/p>\n<p><strong>6. You may now actively track your Network traffic using,<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/actively-track-your.png\" alt=\"actively track your\" width=\"455\" height=\"123\" class=\"aligncenter size-full wp-image-12982\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/actively-track-your.png 455w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/actively-track-your-300x81.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/05\/actively-track-your-20x5.png 20w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/p>\n<p><strong>7. The Google Team has overcome the issue of Hot reload and fixed it right. <\/strong><\/p>\n<p><strong>8. From this version onwards, using Android X will be mandatory and default choice.<\/strong> <\/p>\n<p><strong>9. The Samsung keyboard issue is now solved, which now makes accessibility and internationalization inevitable.<\/strong> <\/p>\n<p>10.<strong>Google has updated the scrolling and text input widget. <\/strong><\/p>\n<p>Well, the rest remains unchanged, and you can surely continue with your older versions yet. Now let us look at what Google has upgraded with Dart.<\/p>\n<h2>The New Dart 2.8<\/h2>\n<p>Along with Flutter\u2019s new release, Google also announced the official Dart 2.8 update. <\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">\ud83d\udce3Announcing Dart 2.8: Including pub outdated!<\/p>\n<p>Modern apps often depend on many packages, and keeping these dependencies up-to-date can be time consuming.<\/p>\n<p>\u2728Pub outdated scans which dependencies are stale and enables you to update them quickly.<\/p>\n<p>Learn \u2192 <a href=\"https:\/\/t.co\/NBAvO71ihw\">https:\/\/t.co\/NBAvO71ihw<\/a> <a href=\"https:\/\/t.co\/XnETjsTZjn\">pic.twitter.com\/XnETjsTZjn<\/a><\/p>\n<p>&mdash; Dart Language (@dart_lang) <a href=\"https:\/\/twitter.com\/dart_lang\/status\/1258079293864767492?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">May 6, 2020<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>It has below-prescribed features:<\/p>\n<ul class=\"bullets\">\n<li>Your existing apps will execute with the same code, but the new release has edge cases and changed the library.<\/li>\n<li>As there are already above 10k packages in the pub, Dart 2.8 has improved the visibility and also enhanced visual recommendations.<\/li>\n<li>The Dart developers get the most benefit from this version because they will require much less time to get all the packages from the pubget.<\/li>\n<li>The Google team has come forward to work over the null reference issue for safety. However, they are yet to test it.  <\/li>\n<li>Another useful function for the developers is the puboutdated command, through which they can figure out the older extinct version and get the new versions available in the market. Hence, they have resolved the \u201cout-of-date\u201d dependency issue.<\/li>\n<li>With the Dart 2.8 update, you can inspect traffic, check your network requests manually, or use the new network tab introduced by Google. <\/li>\n<\/ul>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #ed781f;box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);text-align: center;\"><strong>Get in Touch If Want to Build your New App With Flutter 1.17 and Dart 2.8<\/strong><\/p>\n<h2>Conclusion<\/h2>\n<p>We are the most experienced <a href=\"https:\/\/www.bacancytechnology.com\/flutter-app-development\" target=\"_blank\" rel=\"noopener\">Flutter App Development Company<\/a>, and we can assure you that as you update Flutter and Dart versions of your app, your enterprise will have to face no downstream. Hire our proficient Flutter developers in the manner you wish you, hourly, weekly, monthly, or project-based, and be ready to receive high-quality development practices. <\/p>\n<p>Our experienced developers follow the Agile Software development methodology and use the <a href=\"https:\/\/www.bacancytechnology.com\/blog\/best-flutter-libraries-tools-packages-and-plugins\" rel=\"noopener\" target=\"_blank\">top Flutter tools and libraries<\/a> for excellent project implementation. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The year 2022 has been an unpredictable one for sure. Who knew that the Covid-19 pandemic would stick to our lives for such a long time? Even Google canceled the Google I\/O event, which was supposed to be the biggest newsbreak. However, We Can Help You Run your Business-as-Usual and Ensure Productive IT Operations as [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":12985,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1200],"tags":[],"coauthors":[1568],"class_list":["post-12966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"modified_by":"Nisarg Bhavsar","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/12966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=12966"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/12966\/revisions"}],"predecessor-version":[{"id":59081,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/12966\/revisions\/59081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/12985"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=12966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=12966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=12966"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=12966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}