Google launches Flutter 2.0 🔥

 Google has unveiled version 2.0 of Flutter, its open-source UI development kit that helps app makers build cross-platform software from the same codebase. While the upgrade ushers in a spread of new features, today’s launch event was perhaps mostly designed to highlight Flutter’s continued transition beyond mobile to support apps wherever they reside — the web, desktop, and even emerging form factors such as foldables.

Now introducing, Flutter 2 at #FlutterEngage! Learn more about this major upgrade to the portability of Flutter that opens up a broad range of new target platforms like web and desktop from a single code base.


Stable Web support for Flutter


Fluter’s web support delivers the same experiences on the web as on mobile. Building on the portability of Dart, the power of the web platform, and the flexibility of the Flutter framework, you can now build apps for iOS, Android, and the browser from the same codebase. You can compile existing Flutter code written in Dart into a web experience because it is exactly the same Flutter framework and the web is just another device target for your app, and finally, flutter web is in a stable version.

Set up flutter web


Ads support for Flutter


💰 Building apps is great, but making money by building apps is even better! Monetizing apps using GoogleAdMob is a popular path for many mobile developers. another major package update that we’re releasing today.

Monetizing apps by using ads has been one of the most popular requests for many Flutter developers.

On top of that, Google has moved its Mobile Ads SDK plugin to beta, Flutter ads support is available through the Google Mobile Ads SDK for Flutter (Beta), which works with both AdMob and AdManager. This plugin supports a variety of ad formats, including banner (inline and overlay), interstitial, rewarded video, and native ads.

The following resources can help you get started:

Flutter 2 tooling highlights!

Added a new page explaining the Flutter Fix feature and how to use it.

What is DevTools?

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in beta release, but is under active development.

Flutter Fix

The Flutter Fix feature, introduced in Flutter 2, combines a Dart command-line tool with changes suggested by the Dart analyzer to automatically clean up deprecated APIs in your codebase.
This feature has also been added to IDE plugins for Flutter (2.0) and Dart (2.12). Depending on the IDE, these automated updates are called quick-fixes (IntelliJ, Android Studio, Eclipse) or code actions (VS Code).
Applying individual fixes
You can use any supported IDE to apply a single fix at a time.

IntelliJ and Android Studio

When the analyzer detects a deprecated API, a light bulb appears on that line of code. Clicking the light bulb displays the suggested fix that updates that code to the new API. Clicking the suggested fix performs the update.

VS Code

When the analyzer detects a deprecated API, it presents an error. You can do any of the following:
  • Hover over the error and then click the Quick Fix link. This presents a filtered list showing only fixes.
  • Put the caret in the code with the error and click the light bulb icon that appears. This shows a list of all actions, including refactors.
  • Put the caret in the code with the error and press the shortcut (Command+. on Mac, Control+. elsewhere) This shows a list of all actions, including refactors.

Applying project-wide fixes

To see or apply changes to an entire project, you can use the command-line tool, dart fix.
This tool has two options:
  • To see a full list of available changes, run the following command:
  • dart fix --dry-run
  • To apply all changes in bulk, run the following command:
dart fix --apply

Configuring the URL strategy on the web

Flutter web apps support two ways of configuring URL-based navigation on the web:

Hash (default): Paths are read and written to the hash fragment. For example, flutterexample.dev/#/path/to/screen.
Path: Paths are read and written without a hash. For example, flutterexample.dev/path/to/screen.
These are set using the setUrlStrategy API with either a HashUrlStrategy or PathUrlStrategy.

Beta Snapshot in Stable channel

To make it easier to try out Desktop support for Flutter, we are shipping a snapshot of the Flutter beta channel’s Desktop support in Flutter 2 stable. This means that you can easily try it out without needing to switch to the Flutter beta channel. However, the snapshot included in the stable channel will not be updated with the latest Flutter support for Desktop until the next Flutter stable release.

Added a page on how to implement deep linking for mobile and web.

Version note: Navigator 2.0 is now called Router, which allows you to declaratively set the displayed routes based on the app’s current state. This API is opt-in.

Flutter supports deep linking on iOS, Android, and web browsers in the dev channel. Opening a URL displays that screen in your app. With the following steps, you can launch and display routes by using named routes (either with the routes parameter or onGenerateRoute), or by using the Router widget.
If you’re running the app in a web browser, there’s no additional setup required. Route paths are handled in the same way as an iOS or Android deep link. By default, web apps read the deep link path from the url fragment using the pattern: /#/path/to/app/screen, but this can be changed by configuring the URL strategy for your app.

Other

Codelabs

Many of our code labs have been updated to null safety.
These are the big changes in Flutter 2.0 concerning desktop and mobile platforms. What do you think about Flutter as a framework for desktop and mobile development? Let us know!

Get the Latest Info in Tech Subscribe to our newsletter Right Now!