avatarAshutosh Singh

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

4323

Abstract

href="https://github.com/flutter/flutter/pull/77156"> <div> <div> <h2>Foldable support & TwoPane Widget by andreidiaconu · Pull Request #77156 · flutter/flutter</h2> <div><h3>Adds support for foldable devices and display cutouts, in the form of Display Features exposed by MediaQuery. Adds…</h3></div> <div><p>github.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*wtdo25E6PqMwwS09)"></div> </div> </div> </a> </div><p id="b6f5">Introduce new widget <a href="https://docs.microsoft.com/en-us/dual-screen/flutter/twopane-widget"><b>TwoPane</b></a></p><div id="7396"><pre><span class="hljs-selector-tag">Widget</span> <span class="hljs-selector-tag">build</span>(BuildContext context) { <span class="hljs-selector-tag">return</span> <span class="hljs-selector-tag">TwoPane</span>( <span class="hljs-attribute">pane1</span>: <span class="hljs-built_in">_widgetA</span>(), <span class="hljs-attribute">pane2</span>: <span class="hljs-built_in">_widgetB</span>(), <span class="hljs-attribute">paneProportion</span>: <span class="hljs-number">0.3</span>, <span class="hljs-attribute">panePriority</span>: MediaQuery.<span class="hljs-built_in">of</span>(context).size.width > <span class="hljs-number">500</span> ? TwoPanePriority.<span class="hljs-attribute">both </span>:TwoPanePriority.pane1, ); }</pre></div><p id="83ad">Result of the above code:</p><figure id="4536"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*lOYE-xg0qa4eJE_R.png"><figcaption>[Source: Microsoft docs]</figcaption></figure><h1 id="7d34">4.Flutter Web Support</h1><p id="ae03">Now flutter web support in stable mode with the release of flutter <b>2.0.</b></p><figure id="6c00"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*Gk0vwybHC1CwHP9g.png"><figcaption>[Source flutter engage event]</figcaption></figure><p id="16d8">The initial release of web support they are focusing on three app scenario:</p><ul><li><b>Progressive web apps (PWAs)</b></li><li><b>Single page apps (SPAs)</b></li><li><b>Expanding existing Flutter mobile apps to the web.</b></li></ul><p id="7fb8">In web stable support, the flutter team did major architectural improvements and adding more features that extend and optimize Flutter for the web.</p><figure id="851f"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*EKTesVzFElt5pl-7.png"><figcaption>[Source: flutter engage event]</figcaption></figure><h1 id="ce93">5.macOS, Windows, and Linux Now Available In Stable</h1><p id="5370">This is a big surprise, the flutter team decided to announce stability on all desktop platforms under the early release flag.</p><p id="646c">The great news is flutter is the default choice for future desktop apps and mobile apps created by canonical. flutter has officially become the number one UI tool for future apps running on Ubuntu.</p><p id="1b9c">Canonical team also work with flutter team to published<b> flutter SDK </b>as a <b>Snap</b> in <b>Snap Store.</b> The Flutter SDK snap provides everything needed to develop Flutter apps on your favorite Linux distribution No need to install a bunch of development dependencies; simply install the Flutter SDK snap.</p><p id="1d25">just run the following command in your Linux terminal:</p><div id="dc62"><pre>snap install <span class="hljs-comment">--classic flutter</span></pre></div><figure id="bd2a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*1Jqbx0V5_CDPtzZt.png"><figcaption>[Source: flutter engage event]</figcaption></figure><h1 id="8604">6.Flutter Embedded Support</h1><p id="f575"><b>Yeah</b> isn’t amazing?</p><p id="3bef">Not only 6 platforms, but Flutter support also goes beyond the ordinary platforms. In the flutter engage event <b>Daniel Hall </b>chief engineer of<b> Toyota Motor </b>announced a partnership with flutter. Toyota is taking a completely new approach to building next-gen vehicle information systems (in-car entertainment) powered by flutter.</p><figure id="e2fd"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*HAhHDKko0EfDLEqS.png"><figcaption>[Source: Flutter

Options

engage event]</figcaption></figure><h1 id="3219">7.Null Safety In Dart</h1><p id="41c7">Flutter 2.0 launches in parallel with Dart 2.12 which brings a lot of exciting features to the developer experience. Sound null safety is available in Dart 2.12 and Flutter 2.0.</p><figure id="c708"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*pxeJWknNdtcjiGNy"><figcaption>[Source: Flutter engage event]</figcaption></figure><p id="a843">It’s a very awaited feature to bring a stable version of <b>sound null safety. Null Safety </b>makes every variable you declare a <b>non-nullable</b> type unless you <b>explicitly </b>indicate that it can be null.</p><p id="a4d2">Dart compiler can optimize your code much better if it doesn’t need to check for nulls all over the place. it means your app is <b>even faster </b>than before while using null safety in the code, it also decreases your app size.</p><h1 id="4ee5">8.Framework Tools Updates</h1><p id="4ee8">Tools are a very important part of the development, flutter is known for amazing tools. the flutter team introduced new migration tools <b>Flutter fix</b>. Dart null-safety migration<b> dart migrate</b> command and exciting improvements to existing Dart DevTools</p><p id="91cc"><b>Flutter fix-</b> Flutter is on the growing framework, as a developer if you look at your old project then you may find many deprecation warnings. The <i>Flutter Fix</i> feature helps you to remove deprecation warning in Flutter 2.0, combines a Dart command-line tool with changes suggested by the Dart analyzer to automatically clean up deprecated APIs in your codebase.</p><p id="87d0">You can use any supported IDE to apply a single fix at a time just click on a light bulb that appears on that line of code.</p><figure id="aebf"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*-1W8QSN5kPsu8AOx.png"><figcaption>[source:flutter.dev]</figcaption></figure><p id="3887">To see or apply changes to an entire project, you can use the command-line tool</p><div id="0f46"><pre>dart <span class="hljs-built_in">fix</span> </pre></div><p id="41aa"><b>Dart null-safety migration tool-</b>If you want to try migrating to null-safety, start the migration tools by running the <b>dart migrate</b> commnad.If your package is ready to migrate, then the tool produces a line like the following:</p><div id="8bd0"><pre>http:<span class="hljs-regexp">//</span><span class="hljs-number">127.0</span>.<span class="hljs-number">0.1</span>:<span class="hljs-number">60278</span><span class="hljs-regexp">/Users/y</span>ou<span class="hljs-regexp">/project/my</span>pkg.console-simple?authToken=Xfz0jvpyeMI%<span class="hljs-number">3</span>D</pre></div><p id="43a4">Visit that URL in a Chrome browser to see an interactive UI where you can guide the migration process.</p><h1 id="4971">9.FlutterDevTools now available for VS Code and Android Studio</h1><p id="0e0d">With the new <b>Flutter Dev Tools, </b>you can find and fix UI errors on your IDE. Also, you can explore your app size and analyze it.</p><p id="df1a">Inspecting overflowed widgets straight from the error message — now you don’t have to search for the broken widget yourself. This change shortens the process of inspecting an overflowed widget <b>just to a button click</b> in the IDE error popup.</p><figure id="e84d"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*A7tW8z7zrng1wnyx.png"><figcaption>[Source: Flutter engage event]</figcaption></figure><h1 id="2dba">10.Monetizing The Flutter Apps With AdMob</h1><p id="1034">The brand new flutter ads package <a href="https://pub.dev/packages/google_mobile_ads">google_mobile_ads</a> has been released in beta mode for the public. this plugin provides inline banners and native ads.it’s unified integration with AdMob and Ad Manager. Using the new package ads we can be inserted as normal widgets they can scroll and interact much better with the app’s layout.</p><figure id="1780"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*j1QcwTIYE0mzA9CO"><figcaption></figcaption></figure><p id="37cd"><b>Conclusion!</b> Flutter is everywhere.</p><figure id="3351"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*i8dvOW9UjMJFEfKsFx4qqQ.jpeg"><figcaption>[Source: Internet]</figcaption></figure></article></body>

10 Things You Need To Know About Flutter Engage 2021.

Pic by author.

“Hello, World !”

On 3rd March 2021, flutter engage event organized by google to celebrating the new release version of flutter i.e flutter 2.0.

If you are a flutter developer or just start learning flutter then this article is for you. In this article, we gonna talk about all the important announcements, releases, and news of this event. Believe me, you can grab all important keynote from the flutter engage event.

Let's Start, without wasting your time…

If you are Indian I’m sure you definitely got it.[GIF from tenor.com]

1.From a mobile framework to a portable framework.

The new release of flutter support four additional platforms apart from Android and iOS.

1.Windows

2.macOS

3.Linux

4.Web

Now you can think of flutter 2.0 as a free upgrade of your app if you have an existing app in flutter now you can run your app on a variety of different platforms with just a little or no change in code.

All you have to do just upgrade the flutter.

flutter upgrade
[Source flutter engage event]

gSkinner introduces Flutter Folio (a scrapbooking app) which spans all these platforms. They are reusing 95% of their code to targeting different platforms

2.GPay(Google Pay)is moved to Flutter

There are many apps used by Google that are built-in flutter but the largest app google pay which has 150M, active users, monthly.

Google pay completely re-written In flutter for productivity gains. Now google pay use flutter in the production system.

In the flutter engage event the VP Engineering of google pay talk about how flutter improves his efficiency and resources :

They are ended with a 35% smaller codebase, 1.7M lines of code reduce to 1.1M lines of code.

After re-write has done the engineer is 90% more productive in terms of feature implementation

Getting 50% efficiency because android and iOS developer working on the same things

[Source: flutter engage event]

3.Foldable Supports To Flutter

Flutter 2.0 brings foldable support to flutter. Microsoft collaborating with google, Microsoft continue contributing code to flutter repo to bringing foldable support to flutter.

Microsoft published some major pull requests to enable the support of these complex devices.

Introduce new widget TwoPane

Widget build(BuildContext context) {
  return TwoPane(
    pane1: _widgetA(),
    pane2: _widgetB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both :TwoPanePriority.pane1,
  );
}

Result of the above code:

[Source: Microsoft docs]

4.Flutter Web Support

Now flutter web support in stable mode with the release of flutter 2.0.

[Source flutter engage event]

The initial release of web support they are focusing on three app scenario:

  • Progressive web apps (PWAs)
  • Single page apps (SPAs)
  • Expanding existing Flutter mobile apps to the web.

In web stable support, the flutter team did major architectural improvements and adding more features that extend and optimize Flutter for the web.

[Source: flutter engage event]

5.macOS, Windows, and Linux Now Available In Stable

This is a big surprise, the flutter team decided to announce stability on all desktop platforms under the early release flag.

The great news is flutter is the default choice for future desktop apps and mobile apps created by canonical. flutter has officially become the number one UI tool for future apps running on Ubuntu.

Canonical team also work with flutter team to published flutter SDK as a Snap in Snap Store. The Flutter SDK snap provides everything needed to develop Flutter apps on your favorite Linux distribution No need to install a bunch of development dependencies; simply install the Flutter SDK snap.

just run the following command in your Linux terminal:

snap install --classic flutter
[Source: flutter engage event]

6.Flutter Embedded Support

Yeah isn’t amazing?

Not only 6 platforms, but Flutter support also goes beyond the ordinary platforms. In the flutter engage event Daniel Hall chief engineer of Toyota Motor announced a partnership with flutter. Toyota is taking a completely new approach to building next-gen vehicle information systems (in-car entertainment) powered by flutter.

[Source: Flutter engage event]

7.Null Safety In Dart

Flutter 2.0 launches in parallel with Dart 2.12 which brings a lot of exciting features to the developer experience. Sound null safety is available in Dart 2.12 and Flutter 2.0.

[Source: Flutter engage event]

It’s a very awaited feature to bring a stable version of sound null safety. Null Safety makes every variable you declare a non-nullable type unless you explicitly indicate that it can be null.

Dart compiler can optimize your code much better if it doesn’t need to check for nulls all over the place. it means your app is even faster than before while using null safety in the code, it also decreases your app size.

8.Framework Tools Updates

Tools are a very important part of the development, flutter is known for amazing tools. the flutter team introduced new migration tools Flutter fix. Dart null-safety migration dart migrate command and exciting improvements to existing Dart DevTools

Flutter fix- Flutter is on the growing framework, as a developer if you look at your old project then you may find many deprecation warnings. The Flutter Fix feature helps you to remove deprecation warning in Flutter 2.0, combines a Dart command-line tool with changes suggested by the Dart analyzer to automatically clean up deprecated APIs in your codebase.

You can use any supported IDE to apply a single fix at a time just click on a light bulb that appears on that line of code.

[source:flutter.dev]

To see or apply changes to an entire project, you can use the command-line tool

dart fix 

Dart null-safety migration tool-If you want to try migrating to null-safety, start the migration tools by running the `dart migrate` commnad.If your package is ready to migrate, then the tool produces a line like the following:

http://127.0.0.1:60278/Users/you/project/mypkg.console-simple?authToken=Xfz0jvpyeMI%3D

Visit that URL in a Chrome browser to see an interactive UI where you can guide the migration process.

9.FlutterDevTools now available for VS Code and Android Studio

With the new Flutter Dev Tools, you can find and fix UI errors on your IDE. Also, you can explore your app size and analyze it.

Inspecting overflowed widgets straight from the error message — now you don’t have to search for the broken widget yourself. This change shortens the process of inspecting an overflowed widget just to a button click in the IDE error popup.

[Source: Flutter engage event]

10.Monetizing The Flutter Apps With AdMob

The brand new flutter ads package google_mobile_ads has been released in beta mode for the public. this plugin provides inline banners and native ads.it’s unified integration with AdMob and Ad Manager. Using the new package ads we can be inserted as normal widgets they can scroll and interact much better with the app’s layout.

Conclusion! Flutter is everywhere.

[Source: Internet]
Flutter
Dart
Flutter Engage
Flutter App Development
Google Flutter
Recommended from ReadMedium