Google launches Flutter 2.0 🔥

Published in

Nerd For Tech

9 min readMar 3, 2021

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:

To get the Google Mobile Ads SDK for Flutter, download the google_mobile_ads plugin from pub.dev.
For instructions on creating and loading an Ad with AdMob or AdManager, see the detailed implementation guide.
To learn how to implement overlay banner, interstitial, and rewarded ads, see the Adding AdMob ads to a Flutter app codelab.
To learn how to implement inline banner and native ads, see the Adding AdMob banner and native inline ads to a Flutter app codelab.

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.

Configuring the URL strategy

Note: Flutter uses the hash (/#/) location strategy by default. These instructions are only required if you would like to use the URL path strategy.

The setUrlStrategy API can only be called on the web. The following instructions show how to use a conditional import to call this function on the web, but not on other platforms.

Include the flutter_web_plugins package and call the setUrlStrategy function before your app runs:

dependencies:
  flutter_web_plugins:
    sdk: flutter

a) Create a lib/configure_nonweb.dart file with the following:

void configureApp() { 
  // No-op.
 }

b) Create a lib/configure_web.dart file with the following:

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

Use a conditional import to import configure_web.dart when the html package is available, and configure_nonweb.dart when it isn’t:

import 'package:flutter/material.dart';
import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';

void main() {
  configureApp();
  runApp(MyApp());
}

Hosting a Flutter app at a non-root location
Update the <base href="/"> tag in web/index.html to the path where your app is hosted. For example, to host your Flutter app at myapp.dev/flutter_app, change this tag to <base href="/flutter_app">.

Foldable, dual-screen devices are ready for your Flutter app!

Since Flutter was originally a cross-platform mobile framework, there’s not really too much to say here. For the most part, Flutter has been feature-complete of mobile for a while now, except for one thing: foldables. With Flutter 2.0, there’s now support for foldable displays, thanks to contributions made by Microsoft. Flutter now knows how to deal with this form-factor and lets developers lay their apps out how they want.

There’s now a new TwoPane widget in Flutter 2.0 that lets you, as the name implies, show two panes. The first pane will show on any device, while the second will show on the right half of a foldable display. Dialogs will also let you choose on which side of a foldable display they should show.

The crease or hinge on a foldable is exposed to developers as a display feature (like a notch), so apps can still stretch to the entire foldable display if they want, or take into account where the hinge is located and display accordingly.

The future of Toyota‘s infotainment systems will be powered by Flutter.

Dart: the secret sauce behind Flutter.

Flutter is the default choice for future ubuntu apps.

Desktop support for Flutter

Desktop support allows you to compile Flutter source code to a native Windows, macOS, or Linux desktop app. Flutter’s desktop support also extends to plugins — you can install existing plugins that support the Windows, macOS, or Linux platforms, or you can create your own.

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.

Once you have snapd, you can install Flutter using the Snap Store, or at the command line:

sudo snap install flutter --classic

If snapd is unavailable on the Linux distro you’re using, you might use the following command:

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev libblkid-dev liblzma-dev

Create a new project

You can use the following steps to create a new project with desktop support.

Set up

At the command line, perform the following commands to make sure that you have the latest desktop support and that it’s enabled. If you see “flutter: command not found”, then make sure that you have installed the Flutter SDK and that it’s in your path.

flutter config --enable-<platform>-desktop

Where <platform> is windows, macos, or linux:

flutter config — enable-windows-desktop
flutter config — enable-macos-desktop
flutter config — enable-linux-desktop

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

Updated the Creating responsive and adaptive apps page.
Many pages (including all codelabs on flutter.dev) and examples are updated to be null safe.
Added two new add to app pages:
Using multiple Flutter instances
Adding a Flutter view to an Android app
Added a page on how to write integration tests using the integration_test package.
Significant updates to the internationalization page.
New and updated performance pages, including:
Performance metrics
Performance faq
More thoughts about performance

Codelabs

Many of our code labs have been updated to null safety.

Adding AdMob banner and native inline ads to a Flutter app

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!