On March 3rd 2021, Google announced a new version of the cross-platform framework Flutter – Flutter 2. Let me remind you that Flutter is a cross-platform framework for creating applications for different platforms, which has already become widespread. Google estimates that there are already more than 150,000 Flutter apps in the Play Store alone, including popular ones like WeChat, Grab, Yandex Go, Nubank, Sonos, Fast, Betterment, and realtor.com. Over 15,000 packages have been created for Flutter and Dart, including by companies such as Amazon, Microsoft, Adobe, Alibaba and eBay. What did this release bring?
Until recently, Flutter fully supported the creation of applications for mobile platforms-Android and iOS. And now, with the release of Flutter 2, support for creating web applications has also been added – a feature that has been in beta for the past year.
- You can develop on Flutter for Web, Desktop, embedded, and mobile devices.
- An example of an application that works on all platforms is shown – Flutter Folio.
- More than 150,000 apps have already been published on Flutter.
Flutter Web
Flutter 2 provides three scenarios for creating web applications:
- The so-called Progressive web apps (PWA), which combine the capabilities of conventional web applications and desktop applications.
- Single-page apps (Single page apps or SPA)
- Expanding existing Flutter mobile apps to the web using a common source code base.
As noted in Google, special attention was paid to performance and improved rendering, and a new CanvasKit renderer was added to the standard HTML renderer. The HTML renderer is optimized for creating smaller applications and wide compatibility. While the CanvasKit renderer uses WebAssembly and WebGL to render Skia commands on the canvas element in the browser. Accordingly, developers have a choice of which renderer to use.
At the same time, a number of widgets that are used specifically for web applications have also been added, for example, the Link widget.
Flutter Desktop
Support for creating applications for desktop systems Windows, macOS, Linux is still in the preview state, but now developers have the opportunity through a stable channel to try out support for Desktop.
To add support for desktop development, run the appropriate command for a specific OS in the console:
flutter config --enable-windows-desktop flutter config --enable-macos-desktop flutter config --enable-linux-desktop
A stable release for Desktop will reportedly be released later this year.
The following changes were added:
- Improved text handling to be the same as on all supported platforms: highlighting, dragging, keyboard and mouse interaction. For example, mouse dragging now starts immediately, instead of waiting for the delay required when processing touch input.
- A context menu has been added to the TextField and TextFormField widgets.
- Grab handles have been added to the ReorderableListView widget to allow you to move list items without waiting for a long press.
- Updated the scroll bar that displays correctly for the desktop form factor.
- Implemented interactive features that are expected on the desktop, including the ability to drag the slider, click the track to go to the page up and down, and display the track when the mouse cursor hovers over any part of the screen.
- Added the ScrollbarTheme class, which you can use to customize its appearance. Work with additional PC features: for example, double-click on a data file in Windows Explorer to open the file in the application.
- Improved handling of resizing – now it’s smoother for both Windows and macOS.
- Updated the documentation that describes what you need to do to start developing for Desktop.
Platform Adaptive Applications: Flutter Folio
Flutter supports three platforms for production applications (Android, iOS, and the Web) and three more in beta (Windows, macOS, and Linux). To create customized applications that display well on small, medium, and large screens, we created Flutter Folio.
Folio is a simple example of an application that works well on multiple platforms based on a single code base. Here you can get acquainted with the Folio source code to make the native application platform adaptive.
Beta Version of the Google Mobile Ads SDK for Flutter
The beta version of the Google Mobile Ads SDK for Flutter is now available. This is a new plugin that provides embedded banners and native ads in addition to the existing overlay formats (overlay banners, interstitial ads). This plugin combines ADManager and Admob support and allows you to create different ad formats in Flutter apps.
New Widgets: AutocompleteCore and Scaffold Messenger
Flutter 2 has two additional new widgets: AutocompleteCore and ScaffoldMessenger.
AutocompleteCore is an autocompletion in the search bar that is displayed as a drop-down window with suggestions.
ScaffoldMessenger was created to solve a number of problems and simplify working with SnackBar. Now the SnackBar saves its state when switching between different Scaffolds and stays on the screen.
AutocompleteCore and ScaffoldMessenger may seem like minor updates. But we think that everyone who has worked with Flutter and tried to implement Autocomplete on their own will understand all their charm. ScaffoldMessenger probably should have been done from the beginning. Because working with snackbar, which was implemented via Scaffold, raised a lot of questions.
Adding the Add-to-App Function
The Add-to-App feature is a great way to reuse Flutter code on both mobile platforms, while maintaining the existing native code base. The interweaving of Flutter and native screens makes it difficult to maintain navigation states, and integrating multiple Flutter models requires a lot of memory.
In Flutter 2, the cost of static memory for creating additional Flutter modules is reduced by ~ 99% to ~ 180 KB per instance.
The new APIs to do this are in beta and documented on flutter. dev, along with a set of sample projects that demonstrate this new template. As recommended by the developers, you should create multiple instances of the Flutter engine in your applications.
Flutter Fix
A command-line tool that allows you to replace legacy APIs in the project code base. In order not to interfere with more than 500,000 developers and to avoid breaking the growing number of lines of code with changes to the infrastructure API, we came up with Flutter Fix. According to Google, Flutter Fix finds all outdated methods and variables and helps to update them.
Flutter Fix is a combination of several things. First, there is a new command-line option for the dart command-line tool, called dart fix. It knows where to look for the list of deprecated APIs and how to update the code using these APIs. Secondly, it is the list of available fixes itself, which is included in the Flutter SDK, starting from version 2. And finally, it is an updated set of Flutter extensions for IDE VS Code, IntelliJ, and Android Studio that know how to expose the same.
Dart 2.12 Release
Together with Flutter, a new version of the Dart language was released – Dart 2.12, the main innovations of which were:
Sound Null Safety
Sound Null Safety is an essential addition to the Dart language that further enhances the type system by separating NULL-capable types from non-NULL-capable types. This allows developers to prevent runtime crashes – a common cause of application crashes. By including checks in the type system, these errors can be detected during development. Null safety is fully supported in the stable version of Flutter 2, which contains Dart 2.12.
The Dart FFI subsystem has now moved to the release state. It allows you to use the C library code. That is, we can write a library in C and call it, access its code from a Dart program.
