Introduction to Flutter 2.2

Rupal Mathur
7 min readJun 6, 2021

--

Wondering what’s new with Flutter 2.2? Is Flutter ready to support web apps? Here’s all you need to know about new Flutter updates and its features. Explore your curiosity with the article below!

Flutter 2.2 is here

With the growing number of people accessing the Internet via smartphones and tablets, app development has taken a spur now. On 18th of May 2021, at Google I/O Flutter 2.2 was launched, promising to make Flutter ready for going beyond mobile development with improvement in performance and productivity. Web development now officially became part of the stable channel and desktop support follows. With Flutter 2, one 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 enables one to build apps on mobile, web and desktop with great development tools.

Some of the newly added features of Flutter are:

1. Flutter Web Changes

The most exciting part of this stable release is Flutter’s support for the web. Flutter’s web support has transitioned from beta to the stable channel. By offering this support, Flutter has pushed the reusability of code very efficiently. It has moved its approach from document-centric to the app-centric framework. By using strength of web platforms, Flutter has built a foundation for developers to build interactive web applications. Earlier, Flutter for the web had performance and usability issues. With the release of Flutter 2.0, there were considerable improvements in performance which by the latest Flutter 2.2 version improved.

The compilation target, previously very experimental and tricky to use to render the app with, that was with WebAssembly and Skia, is now called CanvasKit. It’s been refined to offer a consistent and better experience when going from running a Flutter app natively on mobile devices to running it in a browser. Now, by default, the app will render using CanvasKit for desktop web users and with the default HTML renderer for mobile web users. There is also added support for font features to enable setting FontFeature as well. Shader masks and computerLinesMetrics is also added which brings Flutter web and mobile apps all the more closer.

2. Desktop

The recent development in Flutter has also extended its support to Desktop applications. It enables developers to offer a native-like experience which includes key things like accurate mouse dragging, text selection pivot points, built-in context menu, etc. This latest version enables the developers to stop the keyboard events even once they have been initiated.

Custom Text Actions: Flutter extended it support to a number of platforms with different input types (touch, Mouse + Keyboard), users can fully customize the keystrokes associated with the text actions.

Furthermore, developers can move items in the ReorderableListView widget effortlessly. The updated scrollbar widget is another addition that gives more interaction in the desktop app. The latest Flutter release also helps developers in the smoother resizing for macOS and Windows.

3. Dart Language Changes

In particular in Flutter 2.0, Dart 2.12 brought C language interoperability support also, sound null-safety was added to the stable Dart release channel. While in Flutter 2.2 sound null safety is the default for new projects.

· null-safety: The biggest change that was made to Dart is the introduction of sound null-safety that it’s getting more and more support from third-party packages as well as the Google-developed libraries and packages. Null safety allows developers to indicate whether a variable or value can be null directly from the code. Null-safety brings compiler optimizations and reduces the chance of runtime errors.

With Flutter 2.2 comes the Dart 2.13 release. This latest version expands its support for native interoperability, with support for arrays and packed structs in FFI (foreign function interface), the interface for interacting with legacy C code. This with among other things, contains a new type aliases feature, which enables one to create aliases for types as well as for functions making it possible to give short names to long, complicated types, and it also lets one to rename classes in a non-breaking way.

Addition of new widgets and Material Icons

The latest update has given developers access two new widgets which are Autocomplete and ScaffoldMessenger. Autocompletecore represents the minimal functionality that is required to get auto-complete functionality into the Flutter app. In a nutshell this feature allows inducing auto-complete features in the native apps that are built using Flutter. With the ScaffoldMessenger widget, one can easily create SnackBar for the action between the Scaffold transitions.

This release has two separate PRs adding new Material icons to Flutter, including an icon for Dash. More than 7000 icons are brought up with new release.

· Also with Flutter 2.2 release, whenever content exceeds the screen height scrollbar is added automatically. Using ScrollBarTheme, one can change it app-wide and for specific screen ScrollBehaviour.

· This release also allows using TestSpan with GestureDetector giving user to get the corresponding mouse cursor. It also supports onEnter and onExit events.

· Flutter Fix

One of the many improvements in Flutter is the arrival of Flutter Fix feature. With the help of Flutter Fix, one can make individual or project-wide fixes. Flutter Fix combines a Dart command-line tool with changes suggested by the Dart analyzer to automatically clean up deprecated APIs in the code. This feature has also been implemented to IDE plugins for Flutter (2.0) and Dart (2.12). Depending on the IDE the used, these updates are sometimes called quick-fixes (IntelliJ, Android Studio, Eclipse) or code actions (VS Code).

4. Latest iOS features

Flutter with its 2.0 version is has come up with 17039 PRs, out of which 178 PRs are iOS related. It also includes 23495 which have State directly without opening Xcode.

For iOS, Flutter 2.2 release made the page transition smoother in Cupertino by reducing the time it takes to render the frames of the animation by 75%, and potentially more on low-end phones. This release has implemented incremented iOS installs during the development process which resulted in 40% decrease in the amount of time to install an updated version of iOS app .This decreases turn-around time when testing app changes.

Android deferred components: For Android, the release uses Dart’s split AOT compilation feature to allow Flutter apps to download modules containing ahead-of-time compiled code and assets at runtime.

5. Multiple Flutter instances with Add-to-App and FlutterDevTool

Flutter has become the first choice for developers as it enables them to reuse the same code for developing mobile applications for both Android and iOS. Furthermore, one can add Flutter to an existing application by using the App-to-App feature. This feature is crucial as it saves the native-code base and enables developers to execute the code for both platforms.

The launch of the Flutter 2.0 release has also changed the name of the community from DevTools to FlutterDevTools especially when it comes to debugging. The new FlutterDevTool will enable Visual Studio Code, IntelliJ, and AndroidStudio to help developers with debugging by checking for exceptions. Furthermore, the new FlutterDevTool has the ability to identify images that have a higher resolution.

6. FlutterFirebase update

Invertase has added new features to the FlutterFire plugins, including a number of updates to Flutter’s integration with Cloud Firebase. eg- Typesafe API for reading and writing data, support for the Firebase Local Emulator Suite, optimizing your data queries with data bundles. Also the new feature, Firebase App Check, protects the backend resources like Cloud Storage from abuse like billing fraud or phishing.

7. Other Flutter Changes

A highly demanded by Flutter developers was the support for Admob ads, which is now finally included in the official google_mobile_ads package.

· Furthermore, there has been enhancement in the platform with APIs for building flexible & interactive 2D & 3D graphics. Moreover, the latest version has also come up with a Link widget which enables developers to give a web-app-like feel in the browser.

· It even has a new landing page for embedded support for flutter.

· Google also highlighted following in the release:

Flutter for Tizen: Tizen is an open-source Linux-based operating system that Samsung uses on its smart devices, including TVs and smartwatches. Normally, one can develop apps using JavaScript, C++, or C#. Samsung has worked in building an extension for the Flutter SDK to let developers build Tizen apps.

Flutter for UWP: UWP stands for Universal Windows Platform and is what modern-style apps in Windows 10 are built with. UWP support brings the ability to develop more native-looking applications for Windows.

· ARM64 Linux host support: With the support of Sony it has enabled to build and run Flutter apps on ARM64 Linux machines.

· Payment plugin for in-app purchases: Google has unveiled version 2.2 of its open source UI development kit Flutter. There has been upgrade in handful of features, including new ways for developers to funnel into other Google products and help them monetize through in-app purchases or adaptive ads.

Conclusion

Therefore, Flutter 2.2 focuses on polish and optimization, productivity, iOS performance improvements , android deferred components, null safety by default, updated service worker for Flutter web and many more. Since it supports web apps, Windows, macOS, Linux, and embedded devices , this makes the apps built on it more powerful by making them ready to run on any platform and more user friendly than ever.

--

--

Rupal Mathur
Rupal Mathur

No responses yet