Flutter 2 — Complete Overview

Recently flutter announced release of flutter 2.0, a major upgrade to Flutter that enables developers to create beautiful, fast and portable apps for any platform.

With Flutter 2, you can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as web experiences targeting browsers such as Chrome, Firefox, Safari, or Edge. Flutter can even be embedded in cars, TVs, and smart home appliances.

Let’s discuss what’s new in Flutter 2.0, continue reading!

Web

As of now flutter, flutters web support has moved from beta to stable channel (Flutter has four release channels: stable, beta, dev, and master. Flutter team recommends using the stable channel unless you need a more recent release.)

In the initial release of web support, flutter focuses on three app scenarios:

1. Progressive web app (PWA): — A PWA is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.PWA features narrow the gap between user experience in web-based and native applications.
2. Single page app (SPA): — A SPA is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.In a SPA, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does it transfer control to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.
3. Expanding existing Flutter mobile apps to the web, enabling shared code for both experiences.

Today’s web platform is richer than ever, with hardware-accelerated 2D and 3D graphics, offline and installation support, and access to the underlying operating system and hardware.

Since Flutter is written in Dart, a language that offers JavaScript compilation, it was a natural next step to explore the web as a target. This also builds towards our vision of providing a portable framework for building beautiful UI wherever you want to paint pixels.

At an architectural level, Flutter is a multilayer system with:

• A framework that provides abstractions for common idioms like widgets, animation, and gestures.
• An engine that renders to the target device using the system APIs it exposes.

With Dart’s ability to compile the Flutter framework (as well as your app code) into JavaScript, our work to support the web involved replacing the low-level C++ rendering engine used by mobile apps with code that maps to web platform APIs. Flutter doesn’t merely transpile to HTML equivalents of its widgets. Instead, Flutter’s web engine offers a choice of two renderers: an HTML renderer that is optimized for size and broad compatibility, and a CanvasKit renderer that uses WebAssembly and WebGL to render Skia paint commands to the browser canvas.

Flutter has made major architectural improvements and added features that extend and optimize Flutter for the web, focusing on four areas: performance, web-specific features, desktop form factors, and plugins.

Flutter’s goal is to offer a new way to target the web platform, build on existing foundations, and provide new insights that improve the web for everyone.

Performance

Flutter originally started with an HTML, DOM-based model. In this model, Flutter’s web engine translates each generated Flutter scene into HTML, CSS, or Canvas, and renders a frame onto the page as a tree of HTML elements. Even though the HTML renderer offered the greatest compatibility with a wide variety of browsers and had a smaller code size, the HTML renderer’s repaint performance was less suitable for more graphic-intensive applications.

To handle the fidelity required to render intensive graphics efficiently, flutter started experimenting with CanvasKit, which enables rendering Skia paint commands in the browser using WebAssembly and WebGL. We discovered that CanvasKit can deliver superior performance, fidelity, and correctness, enabling the level of graphical horsepower.

Each renderer offers advantages in different scenarios, so Flutter is supporting both rendering modes:

• HTML renderer: Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.
• CanvasKit renderer: This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.

You can also use — web-renderer html or — web-renderer canvaskit to explicitly choose which renderer your app uses.

Web-specific features

The web has many strengths, especially its global reach. One of the many reasons to bring your existing Flutter app to the web is to reach users outside of app stores. To do that, flutter added support for custom URL strategies, to ensure that it’s possible for your users to reach your app anywhere with just a click of a URL. With this feature, you have control over the URLs shown in the address bar as well as the routing of your app on the web.

Hyperlinks are also critical to how users navigate the web. A new link widget in the url_launcher package enables users to deep link to anchors within your app or to external websites. You can use link on relevant widgets, including buttons, inline text, images, and specify whether the link opens in the same tab or in a new tab.

Interacting with text is just as important as being able to render text quickly and accurately. Text can now be selected, copied, and pasted by using SelectableText and EditableText widgets. Also, form text fields support autofill by enabling the browser to store data and handle cases for future autofills.

When you create a Flutter web app, we include a PWA web manifest file, as well as code to setup service workers. The manifest file provides metadata about how your app should run, including information like icons and an app title. Service workers enable caching of resources and running your app offline. When running a Flutter app in the browser as a PWA, you’ll see the opportunity to install it to your device, whether as a mobile or desktop app.

Support for desktop form factors

Flutter wants to make web experiences feel right, regardless of the shape and size of your browser window. On mobile browsers, Flutter apps already have excellent support for gestures and scrolling physics inherited from mobile app support. But desktop browsers offer different UI affordances, and so updated Flutter accordingly.

For instance, there is an expectation for content on the desktop to display scrollbars that can be controlled by a mouse or keyboard. So, the new customizable interactive scrollbars support a theme, a track, and the ability to scroll by dragging a thumb. The PrimaryScrollController has been expanded so that you can use keyboard shortcuts to scroll without having to wire up your own scroll views.

Flutter also increased the default content density, because mouse pointers support a tighter density than touch devices. And we added a superset of system mouse cursors in the framework to support all platforms.

Finally, to support all users, Flutter’s web semantic features are expanded to support accessibility for Windows, macOS, and ChromeOS. On the web, a second DOM tree called the SemanticsNode tree is generated in parallel to the RenderObject DOM tree. The SemanticsNode tree translates the flags, actions, labels, and other semantic properties into ARIA attributes. Now you can use Narrator, VoiceOver, TalkBack, or ChromeVox screen readers to navigate a Flutter web app.

Plugin ecosystem

Since the beta release and with help from the community, support for the following plugins was added:

• image_picker
• google_maps
• firebase_analytics
• firebase_storage
• connectivity
• cloud_firestore
• cloud_functions
• cross_file

Sound Null Safety

Void safety (also known as null safety) is a guarantee within an object-oriented programming language that no object references will have null or void values.

In object-oriented languages, access to objects is achieved through references (or, equivalently, pointers). A typical call is of the form:

x.f(a, …)

where f denotes an operation and x denotes a reference to some object. At execution time, however, a reference can be void (or null). In such cases, the call above will be a void call, leading to a run-time exception, often resulting in abnormal termination of the program.

Void safety is a static (compile-time) guarantee that no void calls will ever arise.

Sound null safety is a significant addition to the Dart language, which further strengthens the type system by distinguishing nullable types from non-nullable types. This enables developers to prevent null error crashes, a common reason for apps to crash. By incorporating null checks into the type system, these errors can be caught during development, thus preventing crashes in production. Sound null safety is fully supported in stable as of Flutter 2, which contains Dart 2.12.

The pub.dev package repository already has more than 1,000 null safe packages published, including hundreds of packages by the Dart, Flutter, Firebase, and Material teams.

Desktops, foldables, and embedded devices

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.

To create a Flutter application with desktop support, you need the following software:

1. Flutter SDK. See the Flutter SDK installation instructions.
2. Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your desktop app within an editor. See setting up an editor for more details.

Additional Windows requirements:

For Windows desktop development, you need the following in addition to the Flutter SDK:

• Visual Studio 2019 (not to be confused with Visual Studio Code) with the “Desktop development with C++” workload installed, including all of its default components

Additional macOS requirements:

For macOS desktop development, you need the following in addition to the Flutter SDK:

• Xcode
• CocoaPods if you use plugins

Additional Linux requirements:

For Linux desktop development, you need the following in addition to the Flutter SDK:

• Clang
• CMake
• GTK development headers
• Ninja build
• pkg-config

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.

Create and run:

Creating a new project with desktop support is no different than creating a new Flutter project for other platforms.

Once you’ve configured your environment for desktop support, you can create and run a desktop application either in the IDE or from the command line.

Using an IDE:

After you’ve configured your environment to support desktop, make sure you restart the IDE if it was already running.

Create a new application in your IDE and it automatically creates iOS, Android, web, and desktop versions of your app. From the device pulldown, select windows (desktop), macOS (desktop), or linux (desktop) and run your application to see it launch on the desktop.

From the command line:

To create a new application that includes desktop support (in addition to mobile and web support), run the following commands, substituting myapp with the name of your project:

flutter create myapp

cd myapp

To launch your application from the command line, enter one of the following commands from the top of the package:

flutter run -d windows

flutter run -d macos

flutter run -d linux

Build a release app

To generate a release build, run one of the following commands:

flutter build windows

flutter build macos

flutter build linux

Distribution:

Flutter don’t recommend releasing a desktop application until desktop support is stable.

In this release, Flutter announced that desktop support is available in the stable channel under an early release flag. What this means is that Flutter is ready to try as a deployment target for your Flutter apps: you can think of it as a “beta snapshot” that previews the final stable release coming later this year.

To bring Flutter desktop to this degree of quality, there have been improvements both big and small, starting with working to ensure that text editing operates like the native experience on each of the supported platforms, including foundational features like text selection pivot points and being able to stop propagation of a keyboard event once it’s been handled. On the mouse input side, dragging with a high precision pointing device now starts immediately instead of waiting for the lag needed when handling touch input. Also, a built-in context menu has been added to the TextField and TextFormField widgets for Material and Cupertino design languages. Finally, grab handles have been added to the ReorderableListView widget.

The ReorderableListView now has grab handles for easy drag ’n’ drop with a mouse

The ReorderableListView was always good at moving items around with very little effort on your part as a developer, but it required the user to initiate a drag using a long-press. That made sense on a mobile device, but few desktop users would think to long-press on an item with their mouse to move it around, so this release includes a grab handle suitable for mouse or touch input. Another improvement for platform-idiomatic functionality is an updated scrollbar that shows up correctly for the desktop form-factor.

This release includes an updated Scrollbar widget that works great in a desktop environment

The Scrollbar widget has been updated to provide the interactive features that are expected on the desktop, including the ability to drag the thumb, click on the track to page up and down, and to show a track when the mouse hovers over any part of the scrollbar. Furthermore, since the Scrollbar is themeable using the new ScrollbarTheme class, you can style it to match your app’s look and feel.

For additional desktop-specific functionality, this release also enables command-line argument handling for Flutter apps so that simple things like a double-click on a data file in the Windows File Explorer can be used to open the file in your app. We’ve also worked hard to make resizing much smoother for both Windows and macOS, and to enable IME (Input Method Editors) for international users.

Flutter desktop now supports intuitive IME input

Finally, Toyota, the world’s best-selling automaker, announced its plans to bring a best-in-market digital experience to vehicles, by building infotainment systems powered by Flutter. Using Flutter marks a large departure in approach from how in-vehicle software has been developed in the past. Toyota chose Flutter because of its high performance and consistency of experience, fast iteration and developer ergonomics as well as smartphone-tier touch mechanics. By using Flutter’s embedder API, Toyota is able to tailor Flutter for the unique needs of an in-vehicle system.

Google Mobile Ads

Recently flutter announced the beta release of Google Mobile Ads for Flutter, a new SDK that works with AdMob and AdManager to offer a variety of ad formats, including banner, interstitial, native, and rewarded video ads.

New iOS features

This release fulfills a long-standing request to build an IPA directly from the command line without opening Xcode and updates the CocoaPods version to match the latest tooling. In addition, a few iOS widgets have been added to the Cupertino design language implementation.

A new CupertinoSearchTextField offers the iOS search bar UI.

The CupertinoFormSection, CupertinoFormRow, and CupertinoTextFormFieldRow widgets make it easier to produce validated form fields with iOS’s sectioned visual aesthetics.

New widgets: Autocomplete and ScaffoldMessenger

This release of Flutter comes with two additional new widgets, AutocompleteCore and ScaffoldMessenger.

Autocomplete is an often-requested feature for Flutter, so this release starts to provide this functionality. You can use it today, but if you’re curious about the design for the complete feature, check out the autocomplete design document.

Likewise, the ScaffoldMessenger was created to deal with a number of SnackBar-related issues, including the ability to easily create a SnackBar in response to an AppBar action, creating SnackBars to persist between Scaffold transitions, and being able to show SnackBars at the completion of an asynchronous action, even if the user has navigated to a page with a different Scaffold.

All of this goodness can be yours with a couple of lines of code that you should be using from now on to display your SnackBars:

final messenger = ScaffoldMessenger.of(context);
messenger.showSnackBar(SnackBar(content: Text(‘I can fly.’)));

Multiple Flutter instances with Add-to-App

It’s sometimes not practical to rewrite your entire application in Flutter all at once. For those situations, Flutter can be integrated into your existing application piecemeal, as a library or module. That module can then be imported into your Android or iOS (currently supported platforms) app to render a part of your app’s UI in Flutter. Or, just to run shared Dart logic.

In a few steps, you can bring the productivity and the expressiveness of Flutter into your own app.

As of Flutter v1.12, add-to-app is supported for the basic scenario of integrating one full-screen Flutter instance at a time per app. It currently has the following limitations:

Packing multiple Flutter libraries into an application isn’t supported.

Plugins used in add-to-app on Android should migrate to the new Android plugin APIs, based on FlutterPlugin.

Plugins that don’t support FlutterPlugin might have unexpected behaviors if they make assumptions that are untenable in add-to-app (such as assuming that a Flutter Activity is always present).

As of v1.17, the Flutter module only supports AndroidX applications on Android.

As of Flutter v1.26, add-to-app experimentally supports adding multiple instances of Flutter engines, screens, or views into your app. This can help integration scenarios such as a hybrid navigation stack with mixed native and Flutter screens, or a page with multiple partial-screen Flutter views. Having multiple Flutter instances allows each instance to maintain independent application and UI state while using minimal memory resources.

Supported features

Add to Android applications:

1. Auto-build and import the Flutter module by adding a Flutter SDK hook to your Gradle script.
2. Build your Flutter module into a generic Android Archive (AAR) for integration into your own build system and for better Jetifier interoperability with AndroidX.
3. FlutterEngine API for starting and persisting your Flutter environment independently of attaching a FlutterActivity/FlutterFragment etc.
4. Android Studio Android/Flutter co-editing and module creation/import wizard.
5. Java and Kotlin host apps are supported.
6. Flutter modules can use Flutter plugins to interact with the platform. Android plugins should be migrated to the V2 plugins APIs for best add-to-app correctness. As of Flutter v1.12, most of the plugins maintained by the Flutter team as well as FlutterFire have been migrated.
7. Support for Flutter debugging and stateful hot reload by using flutter attach from IDEs or the command line to connect to an app that contains Flutter.

Add to iOS applications:

1. Auto-build and import the Flutter module by adding a Flutter SDK hook to your CocoaPods and to your Xcode build phase.
2. Build your Flutter module into a generic iOS Framework for integration into your own build system.
3. FlutterEngine API for starting and persisting your Flutter environment independently of attaching a FlutterViewController.
4. Objective-C and Swift host apps supported.
5. Flutter modules can use Flutter plugins to interact with the platform.
6. Support for Flutter debugging and stateful hot reload by using flutter attach from IDEs or the command line to connect to an app that contains Flutter.

See more in the multiple Flutter below,

Before Flutter 2.0.0, multiple instances of FlutterEngine and its associated UI could be launched, but each instance came with significant latency and fixed memory cost.

Multiple Flutter instances can be useful in the following scenarios:

• An application where the integrated Flutter screen is not a leaf node of the navigation graph, and the navigation stack might be a hybrid mixture of native -> Flutter -> native -> Flutter.
• A screen where multiple partial screen Flutter views might be integrated and visible at once.

The advantage of using multiple Flutter instances is that each instance is independent and maintains its own internal navigation stack, UI, and application states. This simplifies the overall application code’s responsibility for state keeping and improves modularity.

In the past, additional Flutter instances had the same memory cost as the first instance. In Flutter 2, it reduced the static memory cost of creating additional Flutter engines by ~99% to ~180kB per instance.

Flutter Fix

Flutter Fix is a combination of things. First, there’s a new command-line option to the dart CLI tool called dart fix that knows where to look for a list of deprecated APIs and how to update code using those APIs. Second, it’s the list of available fixes itself, which is bundled with the Flutter SDK as of version 2. And finally, it’s an updated set of Flutter extensions for the VS Code, IntelliJ, and Android Studio IDEs that know how to expose that same list of available fixes as quick fixes with little light bulbs that will help you to change the code with a click of your mouse.

As an example, let’s say you had the following line of code in your app:

Creating a Flutter widget using a deprecated argument

Because the argument to this constructor is deprecated, it should be replaced with the following:

Creating a Flutter widget with the deprecated argument replaced

Even if you’re familiar with all of the many Flutter deprecations, the larger the number of changes you have to make in your code, the harder it is for you to apply all of the fixes and the easier it is to make mistakes; humans are not great at these kinds of repetitive tasks. But computers are; by executing the following command, you can see all of the fixes we know how to make across your entire project:

$ dart fix — dry-run

If you’d like to apply them in bulk, you can easily do so:

$ dart fix — apply

Or, if you’d like to apply these fixes interactively in your favorite IDE, you can do that, too.

Ecosystem updates

The Flutter development experience includes more than the framework and the tools; it also includes the wide range of packages and plugins available for Flutter apps. In the time since the last Flutter stable release, much has happened in that space as well. For example, between the camera and the video_player plugins, nearly 30 PRs have been merged to greatly increase the quality of both. If you’ve had trouble using either of these in the past, you should have another look; we think you’ll find them much more robust.

Also, if you’re a Firebase user, we are pleased to announce that the most popular plugins have been brought to production quality, including null safety support, and a full set of reference documentation and common usage tutorials for Android, iOS, web, and macOS. These plugins include the following

• Core
• Authentication
• Cloud Firestore
• Cloud Functions
• Cloud Messaging
• Cloud Storage
• Crashlytics

Also, if you’re looking for crash reporting for your app, you may want to consider Sentry, which has announced a new SDK for Flutter apps.

The Sentry crash reporting tool now supports Flutter

With Sentry’s SDK for Flutter, you can be notified of errors that occur on Android, iOS, or native platforms in real-time. You can see the details in the Sentry documentation.

In addition, if you haven’t yet seen the Flutter Community “plus” plugins, you’ll want to check them out. They’ve forked a number of the popular plugins initially developed by the Flutter team and have added null safety support, support for additional platforms and a whole new set of documentation as well as beginning to fix appropriate issues from the flutter/plugins repository. These plugins include the following:

• Android Alarm+
• Android Intent+
• Battery+
• Connectivity+
• Device Info+
• Network Info+
• Package Info+
• Sensors+
• Share+

At this point, the set of Flutter-compatible packages and plugins numbers greater than 15,000, which makes it hard to find those you should consider first. For this reason, we publish the Pub Points (static analysis scoring), popularity rank, likes and, for exceptionally high quality, a special designation for those packages marked as a Flutter Favorite. In time for Flutter 2, we’ve added several new packages to the list of favorites:

• animated_text_kit
• bottom_navy_bar
• chopper
• font_awesome_flutter
• flutter_local_notifications
• just_audio

And last but certainly not least, for package authors or package users interested in whether the latest version of a package works on a recent version of Flutter, you’ll want to check out Codemagic’s new pub.green site.

Codemagic’s new pub.green site shows compatibility for the top packages with recent Flutter releases

References

What’s New in Flutter 2.0

Google Developers Blog

Flutter web support hits the stable milestone

Desktop support for Flutter

Add Flutter to existing app

Multiple Flutter screens or views

Flutter Fix

Thank you…!!!