Flutter 2.0 Release: What’s New
Google recently launched Flutter 2.0. In this article, we take an in-depth look at it. Find out what’s new in Flutter 2.0.
Overview
On March 3, 2021, Google launched Flutter 2.0 during an event called Flutter Engage. This launch was widely talked about, with many IT pros and developers referring to it as a landmark. The Flutter 2.0 update contains features and fixes that are unusual in their own way.
Previously, programmers used Flutter to develop Android and iOS apps. But with the latest version, Flutter has expanded its usefulness beyond the development of mobile applications to other platforms such as macOS, Windows, Linux, and embedded devices. In addition, developers can now use Flutter to develop web applications.
This has come as a huge relief for developers all over the world, as working on different platforms for the same project is tedious; an application’s logic needs to be changed depending on how the operating system perceives it.
What’s more, the stable version of Flutter 2.0 boasts the closure of 24,541 issues, bringing together 17,039 PRs from 765 contributors. In addition, voluntary PR reviews contributed to the 1525 PR review.
Let’s take a look at some of the technical changes Flutter has made to the stable channel with version 2.0.
Flutter web changes
Flutter for the web was already in a fairly usable form, but there were performance and usability issues that meant it never felt as flawless as mobile Flutter. With the release of Flutter 2.0, many improvements have been made to Flutter for web, especially when it comes to performance.
The compilation target, which used to be very experimental and difficult to render your app (with WebAssembly and Skia), is now called CanvasKit. It has been refined to offer a consistent and efficient experience when moving from running a Flutter app on a mobile device to running it in a browser.
By default, your app will now render using CanvasKit for desktop web users and using the default HTML renderer for mobile web users. (The default HTML renderer has also undergone improvements, though not as many as CanvasKit.)
If you’ve tried using Flutter to build web applications, you may have noticed that creating something as simple as a hyperlink is not intuitive.
At least you can now create hyperlinks a little more than HTML using the Link class.
In fact, it is not an addition to the most Flutter, and the recent addition of Google url_launcher package. You can find a full description and examples of how to use the Link class in the official API reference.
The selection of text has been improved because the pivot point is now where the user starts to select the text rather than the left edge of the SelectableText in question. Also, copy/cut/paste options now work correctly.
However, text selection is still not top-notch, as it isn’t possible to select text in different SelectableText widgets, and text is still not selectable by default.
Sound null safety
Sound null safety is a large addition to the Dart language, which similarly strengthens the kind device by distinguishing nullable types from non-nullable types. This lets developers prevent null mistake crashes, which is a common reason for Flutter apps to crash. By incorporating null checks into the type machine, these errors may be identified during development, stopping crashes in production. Sound null safety is completely supported in the strong as of Flutter 2.0, which includes Dart 2.12.
More than 1000 zero programs have already been published in the pub.dev package repository, including many programs created by the Dart, Flutter, Firebase, and Material teams. If you are the author of a package of services, compare migrations manually and don’t forget about migrations for now.
Desktop
In this release, Flutter desktop support is available in the stable channel under the early release flag. This means you can try it out as a deployment target for your Flutter apps. You can think of it as a beta snapshot, and the Flutter team will announce the final stable release later this year.
Flutter 2.0 also includes big and small improvements, starting with the fact that text editing now works the same as on all supported platforms, including basic features such as text selection pivot points and the ability to stop propagation of the keyboard event after it has been processed.
On the input side, dragging with a high-precision pointing device now starts immediately instead of waiting for the delay required when handling touch input. In addition, a built-in context menu has been added to the TextField and TextFormField widgets for the Material and Cupertino design languages. Finally, grab handles have been added to the ReorderableListView widget.
ReorderableListView now has grab handles for easy drag and drop.
The ReorderableListView has always been good at moving items around with very little effort on your part as a developer, but it required the user to initiate the drag with a long press. This made sense on a mobile device, but few desktop users would consider the possibility of movement of the element with the mouse and move it, so this release includes gripping the handle, which is suitable for input using a mouse or touchscreen. Another improvement in the functionality of the platform idioms is an updated scrollbar that appears to the right in the desktop form factor.
This release includes an updated scrollbar widget that works great in the desktop environment.
The scrollbar widget has been updated to provide the interactive functionality expected on a desktop, including the ability to drag the slider, click the scroll bar to page up and down, and display the scroll bar when you hover over any part of the screen. In addition, since the scroll bar is customizable using the new ScrollbarTheme class, you can match it to the look and feel of your application.
For additional desktop-specific functionality, this release also includes command-line argument handling for Flutter applications, so simple things like double-clicking a data file in Windows Explorer can be used to open a file in your application. Resizing has also been made smoother for both Windows and macOS, and Flutter 2.0 enables IMEs (Input Method Editors) for international users.
Flutter desktop now supports intuitive IME input
There are up-to-date documents on what you need to do to get started preparing your desktop application for deployment to the appropriate OS-specific repositories.
When it comes to beta testing Flutter desktop, you can access it by switching to the beta channel and setting the configuration flags for the platforms you’re targeting as per the instructions on flutter.dev.
If you use flutter config to activate one of the desktop configuration parameters (for example, enable-macos-desktop), you can test the functionality in the desktop beta without going through the lengthy transition process (going to the channel of the beta version and getting all the latest beta versions of the Flutter SDK, build tools, etc.). This is great for trying out or using desktop support as a simple Flutter emulator.
However, if you decide to stay on the stable channel to access the best version of the desktop version of Flutter, you will not get new features or bug fixes as fast as if you switched to the beta or development channel. Therefore, if you’re actively targeting Windows, macOS, or Linux, we recommend switching to a channel that provides faster update delivery.
Google mobile ads to beta
In addition to the desktop beta of Flutter, there is an open beta of the Google Mobile Ads SDK for Flutter. This is an advanced plugin that provides inline banners and native ads in addition to existing overlay formats (banner overlays, interstitials, and rewarded video ads). This plugin integrates help for Ad Manager and AdMob, so no matter how long you work, it can be customized to suit your scenarios.
This plugin was tested with a number of early non-public beta clients, and many of them have effectively released their apps with these new formats. For example, Sua Musica (the largest Latin American track platform for independent artists with over 15,000 verified artists and 10 million MAUs) has released its new Flutter app with the Google Mobile Ads SDK plugin for Flutter. Impressions increased 350%, CTR increased 43%, and effective CPM increased 13%.
This plugin is currently available for use. As part of Flutter Engage, Andrew Brogdon and Zoe Fan hosted a Flutter app monetization consultation (which will be available on the Flutter Engage website) where they talked about monetization strategies for apps built with Flutter and how to advertise your Flutter app. In addition, there will be a new webpage with ads on flutter.dev where you can find useful resources including a plugin implementation guide, inline banners, and native ads as well as overlays, interstitial ads, and video ads. Be sure to check them out!
Platform adaptive apps: Flutter Folio example
Now that Flutter supports three platforms for application production (Android, iOS, and the web) and has three more in beta (Windows, macOS, and Linux), a natural question arises: How to write an application that is highly adaptable to many different form factors (small, medium, and large screens), different input modes (touchscreen, keyboard, and mouse), and different platforms (mobile, web, and desktop)?
Folio is a simple example of an application that you can run well across multiple platforms from a single code base. By “well,” we mean that it looks good on small, medium, and large screens, that it uses touch, keyboard, and mouse input, and that it works well with platform idioms (for example, using web links and menus on desktop). Applications like this are called “platform responsive” because they adapt well to whatever platform they run on.
If you want to know how to make your application environment responsive, you can check out the Folio source code. In the future, expect to find docs and code labs that explore this topic in depth.
New iOS features
This release brings together 178 iOS-related PRs, including 23495, which allows the state to be restored on iOS, 67781, which fulfills a long-standing request to create IPA directly from the command line without opening Xcode, and 69809, which updates the CocoaPods version to match the latest version. In addition, several iOS widgets have been added to the Cupertino design language implementation.
The new CupertinoSearchTextField offers an iOS search bar user interface.
The CupertinoFormSection, CupertinoFormRow, and CupertinoTextFormFieldRow widgets make it easy to create validated form fields with the visual aesthetics of iOS sectioning. In addition to working on iOS features, it continues monitoring improvements in iOS and Flutter performance in general when it comes to shaders and animations. iOS is still the leading platform for Flutter, and it will continue to work on adding important new features and performance improvements.
New widgets: Autocomplete and ScaffoldMessenger
There are two additional new widgets in this release of Flutter: AutocompleteCore and ScaffoldMessenger. AutocompleteCore contains the minimum functionality required to add autocomplete functionality to your Flutter app.
Autocomplete is an often requested feature for Flutter, and this release is starting to provide it. You can use it today, but only if you’re interested in designing the entire function.
Likewise, ScaffoldMessenger was built to address a number of SnackBar issues, including adding the ability to easily create a SnackBar in response to an AppBar action, to create SnackBars to save between Scaffold transitions, and to display a SnackBar after an asynchronous action has been completed, even if the user has navigated to another page.
Here are a couple lines of code that you should use from now on to display your SnackBars:
final messenger = ScaffoldMessenger.of(context); messenger.showSnackBar(SnackBar(content: Text(‘Hello Flutter 2.0.’)));
Multiple Flutter times with Add-to-App
You can take advantage of Flutterby, which includes it in your current iOS and Android apps. Called Add-to-App, this feature is an incredible way to reuse your Flutter code across both mobile platforms while maintaining your existing native code base.
Sometimes, developers don’t understand what to do without integrating the home screen into Flutter. The intertwining of Flutter and native displays makes it difficult to maintain navigation states, and it takes a lot of memory to integrate multiple Flutters in the browse phase.
In the past, Flutter overtime received equal pay for memories due to case number one. In Flutter 2, the static memory cost is reduced for building additional Flutter engines by ~99% to ~180KB per instance.
Flutter Fix
As any infrastructure matures and gathers users with more and more codebases, over time, there is a tendency to avoid making any changes to the infrastructure APIs so as not to break the growing number of lines of code. Flutter 2, with over 500,000 developers on an ever-growing number of platforms, quickly falls into this category.
Flutter Fix is a combination of several things. First, there’s a new command for the Dart command-line tool called dart fix, which knows where to look for a list of deprecated APIs and how to update the code of those APIs. Secondly, there’s a list of available fixes themselves, which have been included in the Flutter SDK since version 2. And finally, there is an updated set of Flutter extensions for VS Code IDE, IntelliJ, and Android Studio that know how to expose the same thing.
As an example, suppose you have the following line of code in your application:
Stack ( overflow: Overflow.visible, children: _children, ) , // Stack
Creating a Flutter widget using a deprecated argument
Since this constructor argument has been deprecated, it should be replaced with the following:
Stack ( clipBehavior: Clip.none, children: _children, ) , // Stack
Creating a Flutter widget with the deprecated argument replaced
Even if you are familiar with all of Flutter’s many outdated suggestions, the more changes you have to make to your code, the harder it is for you to apply all the fixes and the easier it is to make mistakes. But we have computers. By running the following command, you should be able to see all the fixes:
$ dart fix --dry-run
If you want to apply them in bulk, you can easily do this:
$ dart fix --apply
Flutter DevTools
DevTools is a new feature that allows you to nullify your troubles even before you’ve released DevTools is a limitation that Android Studio, IntelliJ, or Visual Studio code can honor as long as a normal space exception exists, and a suggestion to provide it in DevTools, which will help you debug It.
After starting DevTools, new tabbed error icons will help you record specific issues in your application. Another new feature of DevTools is the ability to easily see images that are a higher resolution than is displayed, allowing you to track excessive application length and memory use. To enable this feature, enable “Invert Oversized Images” in Flutter’s Inspector.
Now, when you display an image that is much larger than the screen size, it will be displayed upside-down so you can easily find it in the app.
Here’s a rundown of some of the advanced features of Flutter DevTools 2:
- Added information on average FPS and service improvement to the Flutter frame chart
- Calling failed community requests in the network profiler with purple error markers
- New memory scan charts are faster, smaller, and easier to use, and they include a new tooltip explaining actions at selected times
- Added search and filtering to the Logging tab
- Tracklogs are from an earlier version than DevTools, so you can see complete log entries while DevTools is running
- Renamed Performance View to CPU Profiler to clarify what it provides
- Added time grid to CPU Profiler flame charts
- The Timeline view has been renamed to Performance to help you understand its capabilities
Ecosystem updates
Flutter’s mobile app development experience includes more than just the framework and tools; it is also an extensive set of programs and plugins available for Flutter applications. Over time, due to the last strong release of Flutter, a lot has happened here. For example, several camera plugins and video_player, nearly 30 PRs have been combined to dramatically improve the quality.
In addition, Google has presented the most famous plugins to improve the production quality of X, including zero security help, a complete set of help documentation, and general usage guides for Android, iOS, web, and macOS. These plugins include the following:
- Core
- Authentication
- Cloud Firestore
- Cloud Functions
- Cloud Messaging
- Cloud Storage
- Crashlytics
The Flutter Community “plus” plugins include the following:
- Android Alarm+
- Android Intent+
- Battery+
- Connectivity+
- Device Info+
- Network Info+
- Package Info+
- Sensors+
- Share+
There are currently over 15,000 programs and plugins that work well with Flutter, making it difficult to find the ones you need to remember first. When Flutter 2 was released, many new packages were added to the list:
- animated_text_kit
- bottom_navy_bar
- chopper
- font_awesome_flutter
- flutter_local_notifications
- just_audio
Final thoughts
As Flutter continues to evolve, we can do more and more things with it. But it’s still unreasonable to say that Flutter can be used for any application development project.
When it comes to mobile devices, it’s unlikely you will come across anything Flutter is not very good at because mobile app development has been supported and improved from the beginning. Most things you’ll ever need are already there.
If you’re looking for Flutter developers to hire for your project, contact Mobindustry for a free consultation.
Sep 05, 2022
4771 views 
