• Web
  • Sound Null Safety
  • Desktop
  • Platform adaptive application: Flutter Folio Sample
  • Google mobile ads beta
  • New features of iOS
  • New Widgets: Autocomplete and ScaffoldMessenger
  • Add-to-app implements multiple Flutter instances
  • Flutter Fix – Tool to replace obsolete apis
  • Flutter DevTools
  • Android Studio/IntelliJ Extension
  • Visual Studio Code Extension
  • DartPad update supports Flutter 2
  • Ecosystem updates
  • Breaking Changes

On March 4, 2021, Flutter 2 was officially released. This article introduces the new features of Flutter 2.

Official source: medium.com/flutter/wha…

It has been more than two years since Flutter 1.0 was released, but in this short time we have closed 24,541 issues and merged 17,039 PR from 765 contributors. Since launching Flutter1.22 in September, we have closed 5,807 issues and consolidated 4,091 PR from 298 contributors. Special thanks to our contributors who generously used their spare time to improve the Flutter project. The biggest contributors to Flutter 2 release were Xu-Baolin (46 PR), A14N (32 PR), which focused on introducing null safety into Flutter. And hamdikahloun (20 PR) improved many Flutter plug-ins. But it’s not just the coders who have contributed to the Flutter project; A large group of volunteers (PR Reviewer) was also responsible for reviewing 1,525 PR’s, including Hamdikahloun (again!). , CareF and YazeedAlKhalaf (only 16!) . Flutter is a true community effort, and we would not have gotten version 2 without issue proposers, PR contributors, and code reviewers. This version is for all of you.

There are a lot of exciting things happening as part of Flutter 2 release. For an overview of the new features of Flatter 2 and Dart 2.12, and how our customers and partners can use Flatter 2, see Announcing Flatter 2. For more information about Dart 2.12, see Announcing Dart 2.12. See The Flutter Web Support Hits the Stable Milestone for how best to use the Flutter Web (now recommended for production environments).

And, to learn about the new features of Flatter 2 itself, read on!

Web

As of today, Web support for Flutter has been transitioned from beta to Stable Channel. In this initial stable release, Flutter takes code reuse to another level with the support of the Web platform. So now, when you create a Flutter application in stable, the Web is just another device target for your application.

Moi Mobiili is a modern mobile virtual network operator committed to operational excellence through digitization. Moi Mobiili chose Flutter to build their Mun Moi Account management application and recently launched their Web application.

By taking advantage of many of the advantages of the Web platform, Flutter lays the foundation for building rich interactive Web applications. We focused on performance and rendering fidelity improvements. In addition to our HTML renderer, we have added a new CanvasKit-based renderer. We also added Web-specific features, such as Link widgets, to ensure that the application running in the browser feels like a Web application.

More details about this stable release can be found in Flutter’s Web Support blog post.

Sound Null Safety

The null-safety statement is an important addition to the Dart language that further strengthens the type system by distinguishing between nullable and non-nullable types. This enables developers to prevent empty error crashes, which are a common cause of application crashes. By incorporating null checks into the type system, you can catch these errors during development, preventing crashes in production. Sound Empty Type safety is fully supported by stable Flutter 2, which contains Dart 2.12. For more details, see the Dart 2.12 blog post.

The pub.dev repository has published over 1000 NULL Safe packages, including hundreds of packages from the Dart, Flutter, Firebase, and Material teams. If you are the author of a package, check out the migration guide and consider migrating immediately.

Desktop

In this release, we are pleased to announce that Desktop support for Flutter is available in Stable Channel with an early release logo. This means that we’re ready for you to try this out as a deployment target for the Flutter application: you can think of it as a “beta snapshot”, previewing the final stable version to be released later this year.

To achieve this quality for the Flutter desktop, there have been major and minor improvements, starting with ensuring that text editing works as a native experience on every supported platform, including basic features such as text selection pivots and the ability to block the propagation of keyboard events once they are processed. On the mouse input side, using a high-precision fixed-point device drag operation, the drag begins immediately, rather than waiting for the delay required to process the touch input. In addition, a built-in context menu has been added for TextField and TextFormField Widgets in the Material and Cupertino design languages. Finally, the grab handle is added to the ReorderableListView widget.

The ReorderableListView now has a grab handle that can be easily dragged and dropped with the mouse

The ReorderableListView is always good at moving items around, and it takes very little effort on your part as a developer, but it requires the user to start dragging with a long press. This makes sense on mobile devices, but few desktop users would think of long pressing an item with a mouse to move it, so this version includes a grab handle suitable for mouse or touch input. Another improvement to platform conventions is an updated scroll bar that displays the correct shape of the desktop.

This version includes an updated scrollbar widget that works very well in a desktop environment

The Scrollbar Widget has been updated to provide expected interaction on the desktop, including the ability to drag your thumb, click a track to page up and down, and display the track when the mouse hovers over any part of the Scrollbar. In addition, because the Scrollbar is themed with the new ScrollbarTheme class, you can style the application based on how it looks. For other desktop-specific features, this release also supports the command line argument processing of the Flutter application so that files in the application can be opened using simple actions such as double-clicking a data file in Windows File Explorer. We are also working to make Windows and macOS adjustments smoother and enable IME (Input method editor) for international users.

The Flutter desktop now supports intuitive input methods

In addition, we’ve provided updated documentation on what you need to do to start preparing your desktop applications for deployment to the appropriate operating system-specific store. Give it a try and provide feedback if we missed anything.

When you try to use the beta version of Flutter desktop, you can switch to beta Channel as expected and set the target platform configuration flags according to the instructions on Flutter. Dev. In addition, we made a snapshot of the beta bits available on Stable Channel. If you use flutter Config to enable a desktop configuration setting (for example, enable-macos-desktop), then you can try the desktop supported beta features, Without having to go through the long process of moving to beta Channel, downloading all the latest Beta versions of the Flutter SDK, and building tools, it is great to try or use desktop support as a simple “Flutter Emulator”.

However, if you choose to access the desktop beta on Stable Channel, you won’t get new features or bug fixes as quickly as switching to beta or Dev Channel. So if you are actively targeting Windows, macOS, or Linux, we recommend switching to a channel that offers faster updates.

As the first full production quality release of Flutter Desktop nears, we know we have more work to do, including support for integration with native top-level menus, text editing that feels more like a single platform experience, accessibility support, and general bug fixes and performance enhancements. If you think there are other things that need to be done before the desktop goes into production quality, please be sure to provide your feedback.

Platform adaptive application: Flutter Folio Sample

Since Flutter supports three production application platforms (Android, iOS and Web) and three other beta platforms (Windows, macOS and Linux), a natural problem arises: How do you write one that works well with many different form factors (small, medium, and large), different input modes (touch screen, keyboard, and mouse), and different idioms (mobile, Web, and desktop)? To answer this question for ourselves and for Flutter developers everywhere, we commissioned the Flutter Folio scrapbooking app.

Official demo video (for science online) : www.youtube.com/watch?v=x4x…

Folio is a simple example of an application where you want a code base to work well on multiple platforms. By “good,” we mean that it looks good on small, medium, and large screens, that it leverages touch, keyboard, and mouse input, and that it works well with platform idioms (for example, by using links on the Web and menus on the desktop). We call this kind of application “platform adaptation” because it fits well with applications running on any platform.

If you want to learn how to adapt your application platform, look at Folio’s source code. In the future, we hope to find documentation and code LABS that explore this topic in more depth. In the meantime, check out Alois Deniel’s excellent blog posts and videos on the subject.

Google mobile ads beta

In addition to upgrading the Flutter desktop to beta, today we are pleased to announce a public beta of the Google Mobile advertising SDK for Flutter. This is a brand new plug-in that provides inline banners and local ads in addition to the existing overlay formats (overlay banners, gaps, and bonus video ads). This plugin unifies support for Ad Manager and Admob, so no matter how big you are as a publisher, the plugin can be customized for your scenario.

We have already tried the plug-in in a private beta test program with some early customers, many of whom have successfully launched applications in these new formats. For example, Sua Musica (the largest music platform for independent artists in Latin America with over 15K proven artists and 10 million MAUs) launched their new Flutter app, This includes the Google Mobile Ads SDK For Flutter Plugin. They found a 350 percent increase in Impressions, a 43 percent increase in CTR, and a 13 percent increase in eCPM.

This plug-in is available for you to use today. As part of Flitter Engage, Andrew Brogdon and Zoey Fan present a session on “Monetizing Applications with Flutter” (available on the Flutter Engage website), They discuss monetization strategies for applications built using Flutter and how to load ads within Flutter applications. In addition, we created a new ads page on flutter. Dev, where you can find all the useful resources such as plugin implementation guides, inline banners and native ads Codelab, as well as covered banners, gaps and bonus video ads Codelab. Please do check!

New features of iOS

Just because we’re constantly improving the quality of support for other platforms, don’t think we’ve forgotten about iOS. In fact, this release brings 178 ios-related PR, including 23495, which brings state recovery to iOS, 67781, which satisfies a long-standing request to build IPA directly from the command line without opening Xcode, and 69809, It updates the CocoaPods version to match the latest tools. In addition, some iOS widgets have been added to the Cupertino Design Language implementation.

The new CupertinoSearchTextField provides an iOS search bar UI.

CupertinoFormSection, CupertinoFormRow and CupertinoNotextFormFieldRow widget to generate effective form fields with visual aesthetic feeling of iOS partition easier.

In addition to iOS feature work, we are continuing to work on iOS performance improvements, and when it comes to shaders and animations, Flutter is often also studied. IOS remains Flutter’s premier platform and we will continue to work to bring important new features and performance improvements.

New Widgets: Autocomplete and ScaffoldMessenger

This version of Flutter comes with two new widgets, AutocompleteCore and ScaffoldMessenger. AutocompleteCore represents the minimum functionality required to import auto-complete functionality into a Flutter application.

Autocomplete is a frequently required feature of Flutter, so this release begins to provide this feature. You can use it now, but if you’re interested in a full-featured design, check out the AutoComplete design documentation.

Similarly, ScaffoldMessenger has been created to address a number of snackbar-related issues, including the ability to easily create Snackbars in response to AppBar operations, create Snackbars to persist between scaffolds transformations, And the ability to display the SnackBar when an asynchronous operation is complete, even if the user has navigated to a page with a different scaffold.

All of these advantages can be achieved with a few lines of code, which you should use from now on to display your SnackBars:

finalmessenger = ScaffoldMessenger.of(context); Messenger. ShowSnackBar (SnackBar (content: Text (" I can fly. ")));Copy the code

As you might imagine, there’s more to do; For details, please check out an Excellent Video from Kate Lovett on ScaffoldMessenger.

Add-to-app implements multiple Flutter instances

We know from our conversations with many Flutter developers that a significant number of them have no appeal for launching a brand new app, but you can take advantage of Flutter by adding it to your existing iOS and Android apps. This feature, called Add-to-app, is a great way to reuse Flutter code on both mobile platforms while preserving the existing native code base. However, for those who do, we sometimes hear that it is not clear how to do this, other than integrating the first screen into Flutter. Interweaving the Flutter with the native screen makes navigation state difficult to maintain, and integrating multiple Flutter at the view level takes up a lot of memory.

In the past, a Flutter instance of a Flutter had the same memory overhead as the first instance of a Flutter. With Flutter 2, we reduced the static memory cost of creating additional Flutter engines by 99%, to 180kB per instance.

The new API for implementing this functionality is available in beta Chennel’s preview and in flutter. Dev as well as a set of sample projects that demonstrate this new pattern. With this change, we no longer hesitate to recommend that you create multiple Flutter engine instances in your native application.

Flutter Fix – Tool to replace obsolete apis

As any framework matures and gathers users of a larger and larger code base, the tendency over time is to avoid making any changes to the framework API to avoid breaking more and more lines of code. With the addition of more than 500,000 Flutter developers on an increasing number of platforms, Flutter 2 soon entered this category. However, in order to continue to improve Flutter, we hope to make a breakthrough change to the API. The question is, how do you continue to improve the Flutter API without interrupting the developers?

Our answer is Flutter Fix.

A Flutter Fix is a combination of many factors. First, the Dart CLI tool has a new command-line option called Dart Fix that knows where to look for a list of unrecommended apis and how to use them to update your code. Second, it is a list of available fixes themselves, bundled with the Flutter SDK as of version 2. Finally, it’s a set of updated Flutter extensions for VS Code, IntelliJ, and Android Studio IDE that know how to expose the list of available patches as quick fixes with small bulbs, which will help you change Code with a click of the mouse.

For example, suppose your application has the following lines of code:

Create a Flutter widget with deprecated parameters

Since the arguments to this constructor are deprecated, they should be replaced with the following arguments:

Create a Flutter widget that replaces undesirable parameters

The more deprecated apis there are, the more code changes there are, the harder it is to apply all fixes, and the more error-prone it becomes; Humans are not good at these repetitive tasks. But computers are good; You can see all the fixes we know how to make throughout the project by executing the following command:

$ dart fix --dry-run
Copy the code

If you want to batch use, you can easily do so:

$ dart fix --apply
Copy the code

Or, if you want to apply these fixes interactively in your favorite IDE, you can do so.

Although we have marked old apis as not recommended for many years, we now have a policy on when to actually remove the not recommended API, and Flutter 2 is the first time we have done so. Although we have not yet captured all of the deprecated apis as data into the List of Flutter Fix, we will continue to add more content from previously deprecated apis and will make breakthrough changes in the future. Our goal is to make Flutter’s API the best we can be, while also keeping your code up to date.

Flutter DevTools

To make it clear that DevTools is a tool that should be used to debug Flutter applications, we rename the Flutter DevTools when we debug the Flutter application. In addition, we did a lot of work to make it fit fit Flutter 2 in a production environment.

A new feature, Android Studio, IntelliJ, or Visual Studio Code, is the ability to notify common exceptions when they occur and offer to display that exception in DevTools to help you debug, Can help you focus on your problems before you even start DevTools. For example, an overflow exception thrown in an application is shown below, which opens an option in Visual Studio Code to debug the problem in DevTools.

The Flutter IDE alerts applications when they throw layout overflow exceptions

By pressing this button, you can find the Flutter Inspector on the widget causing the problem in DevTools so that you can fix it. We’re only doing this today for layout overflow exceptions, but our plan is to include this handling in all common exceptions that DevTools can resolve.

Once you’ve run DevTools, the new error badge on the TAB will help you track specific problems in your application.

The red dots in DevTools help you focus on the parts of your application that went wrong

Another new feature in DevTools is the ability to easily see images at higher resolution than displayed, which helps track excessive application sizes and memory usage. To enable This feature, enable Retro Images in the Flutter Inspector.

Enable the ‘Invert Win-win Images’ option to highlight Images that are larger than the required image

Now, when you display an image with a resolution significantly larger than its display size, it appears upside down so it’s easy to find in your app.

Additionally, according to popular demand, in addition to displaying detailed information about flexible layouts in the Layout Explorer of the Flutter Inspector, we have added the ability to display fixed layouts, enabling you to debug various layouts.

And that’s not all. Here is just a summary of some of the new features of Flutter DevTools 2:

  • Added average FPS information and usability improvements to the Flutter framework

  • Invoke failed network requests with red error labels in network profiler

  • New memory view charts are faster, smaller, and easier to use, including a new hover card to describe activity at a specific time in the log TAB with search and filter added

  • Trace the logs before DevTools starts so that you can see the full logging history at startup

  • Rename the “Performance” view to “CPU Profiler” to get a clearer idea of what it provides

  • Added time grid to CPU Profiler Flame chart

  • Rename the “Timeline” view to “Performance” to get a clearer picture of what it provides

But that’s not all. For the full set of changes, I recommend you check the following bulletin:

  • DevTools 0.9.4
  • DevTools 0.9.5
  • DevTools 0.9.6
  • DevTools 0.9.7
  • DevTools 2.0

Android Studio/IntelliJ Extension

The IDE’s IntelliJ family of Flutter plug-ins also provide many new features for Flutter 2. First, there is a new project wizard that matches the new wizard style in IntelliJ.

Also, if you program the Flutter SDK installed in the Snap store on Linux using IntelliJ or Android Studio, the Flutter Snap path has been added to the list of known SDK paths. This makes it easier for Users of Flutter Snap to configure the Flutter SDK in their Settings. Thanks to Marcustomlinson@ for contributing!

Android Studio on Linux is easier to use with the Flutter SDK installed via Snap

You can see more of the good stuff in the recently updated announcement:

  • IntelliJ Plugin M51
  • IntelliJ Plugin M52
  • IntelliJ Plugin M53
  • IntelliJ Plugin M54

Visual Studio Code Extension

The Visual Studio Code extension to Flutter 2 also has improvements, starting with a number of test enhancements, including the ability to re-run a test that just failed.

After two years of development, LSP (Language Server Protocol) support for Dart is now being rolled out as the default way to access Dart analyzers for integration into Visual Studio Code for Flutter extension. LSP support provides many improvements for Flutter development, including the ability to apply all specific types of fixes in the current Dart file and make the code complete to generate full function calls, including parentheses and required parameters.

And LSP support is not just for Dart, it also supports code completion for pubSpec. yaml and Analysis_options. yaml files.

These are just some recent updates to the Visual Studio Code Code extension for Flutter. You can read the full list of these announcements:

  • Visual Studio Code Plugin v3.16
  • Visual Studio Code Plugin v3.17
  • Visual Studio Code Plugin v3.18
  • Visual Studio Code Plugin v3.19
  • Visual Studio Code Plugin v3.20

DartPad update supports Flutter 2

This list of tool updates would be incomplete without a mention of DartPad, which has been updated to support Flutter 2.

Now you can try the new air-safe version of Flutter without leaving the comfort of your favorite browser.

Ecosystem updates

The Flutter development experience includes not only the framework and tools, but also the various software packages and plug-ins available for Flutter applications. A lot has also happened in this space since the last Release of Flutter Stable. For example, nearly 30 PR’s have been merged between the camera and video player plug-ins, greatly improving the quality of both. If you’ve had trouble using either of these methods in the past, you should take another look; We think you’ll find them even more powerful.

In addition, if you are a Firebase user, we are pleased to announce that the most popular plug-ins have been upgraded to include air security support, as well as a full set of reference documentation and commonly used tutorials for Android, iOS, Web and macOS. These plug-ins include:

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

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

Use Sentry’s Flutter SDK to notify you of errors that occur on Android, iOS, or native platforms in real time. You can see the details in the Sentry documentation.

Also, if you haven’t seen the Flutter Community “plus” plugins, you can check them out. They have fork many of the popular plug-ins originally developed by the Flutter team, add air safety support, support for other platforms, and a whole new set of documentation, as well as start fixing the appropriate issues from the Flutter/Plugin repository. These plug-ins include:

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

At this point, Flutter is compatible with more than 15,000 packages and plugins, which makes it difficult to find the ones you should consider first. For this reason, we have published Pub Points, popularity rankings, likes, and a special name for those packages labeled Flutter Favorite for extra high quality. In Flutter 2, we added several new packages to the favorites list:

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

Congratulations to the authors of these packages! If you haven’t checked them out yet, or any of the other packages on the list, you should give them a try.

Finally, for package authors or users who are interested in whether the latest version of the package applies to the latest version of Flutter, you should check out Codemagic’s pub.green site.

This Pub. Green field tests Flutter compatibility and different Flutter versions of Pub. Dev are available on Dart Package. Think of it as the “Can I use it” of Flutter. For more details, I recommend the CodeMagic team’s announcement blog.

Breaking Changes

We made the following ground-breaking changes to Flutter 2, many of which can be resolved automatically using the Dart fix command or quick fixes in your IDE of choice:

  • 61366 Continue the clipBehavior breaking change
  • 66700 Default FittedBox’s clipBehavior to none
  • 68905 Remove nullOk parameter from Cupertino color resolution APIs
  • 69808 Remove nullOk from Scaffold.of and ScaffoldMessenger.of, create maybeOf for both
  • 68910 Remove nullOk parameter from Router.of and make it return a non-nullable value
  • 68911 Add maybeLocaleOf to Localizations
  • 68736 Remove nullOK in Media.queryOf
  • 68917 Remove nullOk parameter from Focus.of, FocusTraversalOrder.of, and FocusTraversalGroup.of
  • 68921 Remove nullOk parameter from Shortcuts.of, Actions.find, and Actions.handler
  • 68925 Remove nullOk parameter from AnimatedList.of and SliverAnimatedList.of
  • 69620 Remove deprecated methods from BuildContex
  • 70726 Remove the nullOk parameter from Navigator.of and add Navigator.maybeOft
  • 72017 Remove deprecated CupertinoTextThemeData.brightness
  • 72395 Remove deprecated [PointerEnterEvent, PointerExitEvent].fromHoverEvent
  • 72532 Remove deprecated showDialog.child
  • 72890 Remove deprecated Scaffold.resizeToAvoidBottomPadding
  • 72893 Remove deprecated WidgetsBinding.[deferFirstFrameReport, allowFirstFrameReport]
  • 72901 Remove deprecated StatefulElement.inheritFromElement
  • 72903 Remove deprecated Element methods
  • 73604 Remove deprecated CupertinoDialog
  • 73745 Remove deprecated actionsForegroundColor from Cupertino[Sliver]NavigationBar
  • 73746 Remove deprecated ButtonTheme.bar
  • 73747 Remove span deprecations
  • 73748 Remove deprecated RenderView.scheduleInitialFrame
  • 73749 Remove deprecated Layer.findAll
  • 75657 Remove vestigial nullOk parameter from Localizations.localeOf
  • 74680 Remove nullOk from Actions.invoke, add Actions.maybeInvoke