This article was first published from "imooc.com". If you want to know more about IT dry goods and hot news in the programmer circle, please pay attention to "imooc".com!
Author: CrazyCodeBoy|MOOC Lecturer
At the beginning of the new year, the official version of Flutter 3.7 will "lead the way"! We and the entire Flutter community have continued to optimize the framework in Flutter 3.7, including creating custom menu bars and cascading menus, better internationalization tool support, new debugging tools, and other functions and features.
In the new stable version, we are continuing to improve some features, such as global text selection, Impeller rendering speed, DevTools and performance optimization all the time. Let's quickly explore the new features of Flutter 3.7!
Enhanced support for Material 3
In Flutter 3.7, the following widgets have been adapted for Material 3:
-
Badge
-
Filled and Filled Tonal buttons
-
Radio buttons
- You can enable Material 3 directly by setting useMaterial3 in ThemeData in your application . Only under the complete color scheme can the most complete details of Material 3 be displayed. You can use the new Material theme builder to generate your theme configuration, or you can automatically generate a whole set of themes through the (color seed) in the Flutter ThemeData structure :
colorSchemeSeed
MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green,
),
// …
);
To see how Flutter is progressing with Material 3 support, you can check out flutter issue #91605 on GitHub .
You can also try the Material 3 samples , which showcase all the theme's features.
Menu bar and cascading menus
Flutter can now create menu bars and cascading menus.
On macOS, you can use PlatformMenuBara widget to create a menu bar, and your menu bar will be rendered by the macOS system instead of using Flutter.
Additionally, for all other platforms, you can define a Material Design menu that provides a cascading menu bar ( MenuBar ), or create a cascading menu using one triggered by UI interface elements ( MenuAnchor ). These menus are fully customizable, and the menu items can be custom widgets, or use new menu item widgets: ( MenuItemButton and SubmenuButton ).
Impeller Preview
The Flutter team is excited to bring you a preview of the Impeller rendering engine for iOS on the stable channel . We believe that Impeller's performance matches or exceeds that of Skia rendering on most existing applications. In terms of image fidelity, Impeller has also covered most application scenarios except extreme conditions. We hope to use Impeller as the default rendering engine for the iOS platform in the next stable version. If you have any problems during the experience, please continue to submit feedback on Impeller on .
Although we are confident enough that Impeller on iOS can meet the rendering needs of existing applications, there are still some APIs that need to be supplemented. You can see the current progress of Impeller on the Flutter wiki documentation . Users and developers may notice the difference in rendering details between Impeller and Skia when using it. These differences may be bugs. When you encounter them, please remember to submit .
The rapid progress of Impeller would not be possible without the support of community contributors. Especially developers ColdPaleLight , guoguo338 , JsouLiang and magicianA contributed 31 of the 291 submissions (>12%) in this release of Impeller. Thanks a lot for their help!
We're also continuing to push Vulkan as a rendering backend for Impeller (with a fallback to OpenGL on some older devices), but Android Impeller isn't ready for public preview yet. We'll share more about the active Impeller development process, including desktop and web platform support, in future releases.
If you are interested, you can follow the Impeller project board on GitHub to follow the development progress.
iOS Release Validation
When you're building a release version of an iOS app, Flutter provides you with a project setup checklist to make sure your app is ready to publish to the App Store.
flutter build ipaThe command now validates some of the project's settings and tells you in the manifest to make changes before publishing.
Developer Tools Update
In this release, the development tools also bring new features and experience optimization. DevTools' memory debugging tool has undergone a complete round of tweaks. We have brought three new tabs: Profile , Trace , and Diff , which contain all the previous memory debugging functions, and also add more debugging-friendly operations. Now you can analyze the current memory allocation by class or memory type, you can analyze which codes call which parts of memory at runtime, and you can compare the differences between two memory snapshots at different points in time to understand the memory usage. detail.
The above memory features have been introduced in the document, if you are interested, you can go to learn more details.
There are also some notable new features on the performance page, which now has a new Frame Analysis tab at the top, which provides suggestions for tracking down certain frames and operations that consume heavily in Flutter.
In addition to the above new features, this update has other bug fixes and optimization improvements, including bug fixes for the CPU logger of the Inspector and network logger. You can check out the DevTools changelog below for more details.
https://docs.flutter.dev/development/tools/devtools/release-notes/release-notes-2.17.0Customize context menu
Starting with the new version, you can create custom context menus anywhere in your Flutter app, and you can also customize the built-in context menus.
For example, you can add a "Send Email" button ( code address ) to the default selection menu of the text box when the user selects an email address . The contextMenuBuilder parameter has also been added to existing widgets containing context menus. You can return any widget you want contextMenuBuilderin , including the platform-adaptive context menu.
This new feature can also be used for scenarios other than text selection. For example, you can add a "Save" button ( code address ) to a Imagewidget's right-click and long-press operations . You can also use ContextMenuController to display the platform's default or custom context menu anywhere in the application.
To see a complete example, head over to the Flutter samples repository to learn more.
CupertinoListSection 和 CupertinoListTile widget
The Cupertino series of widgets ushered in two new members: CupertinoListSection and CupertinoListTile , which can be used to display iOS-style scrolling list content. They are the Cupertino version of ListViewand ListTile.
sliding optimization
This release also includes numerous swipe- related bug fixes, including trackpad interaction optimization and text selection behavior in swipe components.
It is worth noting that macOS applications can now experience a sliding experience with a higher degree of matching through the new physical sliding feature.
The new AnimatedGrid and SliverAnimatedGridcan be used to animate the addition and removal of content.
Finally, we fixed an issue since Flutter's move to sane null safety that affected all swipe widgets that included itemBuildera parameter (for example ListView). When migrating to null-safety, itemBuilderthe type of is migrated to IndexedWidgetBuilder, that is, it is not allowed to return null, while before nullit can be used to represent that the list has reached the bottom, etc. The parameter has now been modified to NullableIndexedWidgetBuilder. Thanks to @rrousselGit for spotting and fixing this!
Internationalization Tools and Documentation
Flutter's support for internationalization has been revamped! We gen-l10nhave rewritten to support the following features:
-
descriptive syntax error
-
Nested or multiple plurals, selections and placeholder message content
Read more at the updated Internationalization documentation in Flutter apps .
Global selection optimization
SelectionAreaKeyboard operation is now supported. You can use shortcut keys Shift+→such as to make selections.
Background isolate
Now platform channels can be called in any isolate. Previous platform channels could only be called in the main isolate. After optimization, it will be easier for plug-ins and hybrid development to call isolate and host platform code. For more information, please read the documentation on writing platform code and the article on introducing the background isolate channel.
text magnifying glass
The magnifying glass that appeared for text selection on Android and iOS now also appears in Flutter. It is added to all text selections, but you can also disable or customize it via magnifierConfiguration .
Plugin code migrated to Swift
Apple is migrating their entire code to Swift, and we hope to provide examples and guidance for developers building plugins for Swift. quick_actions has been migrated from Objective-C to Swift, and can also be used as a best practice for Swift plugins. If you are interested in helping Flutter migrate first-party plugins to Swift, please refer to the Swift migration section in the wiki .
Resources for iOS Developers
We've released a new set of resources for iOS developers, including:
-
Create multi-channel for Flutter (for Android and iOS)
Obsolete Bitcode
Starting with Xcode 14, apps for watchOS and tvOS no longer require bitcode, and the App Store no longer accepts app submissions with bitcode. Therefore, Flutter also removed bitcode support.
Bitcode is turned off by default in Flutter apps, so this shouldn't affect too many developers' projects. However, if you ever manually enabled bitcode for your project, please turn off bitcode as soon as possible after upgrading to Xcode 14. You can use Xcode to open and ios/Runner.xcworkspacefind that Enable Bitcode is set to No , and the mixed development project needs to be disabled in the host project.
iOS platform view application BackdropFilter
We have added the ability to render Gaussian blur to iOS native views, and now nested BackdropFilterin UiKitViewcan render Gaussian blur correctly.
You can check out the corresponding design docs for more details.
memory management
This release includes some improvements to memory management that collectively reduce jank caused by GC pauses, reduce CPU usage due to allocation speed and background GC threads, and reduce memory usage.
For example, we extended the existing dart:uipractice of manually freeing some Dart objects' local resources. Previously, local resources were held by the Flutter engine until Dart VM garbage collected Dart objects. Through the analysis of user applications and our benchmarks, we believe that this strategy cannot avoid inappropriate GC and excessive memory usage in many cases. Therefore, in this update, the Flutter engine has added an API for explicitly releasing local resources held by the Vertices, Paragraphand ImageShaderobjects .
In the benchmarks of the Flutter framework that we migrated to this API, 90% of frame build times were reduced by more than 30%, and end users will experience smoother animations and less stuttering.
Additionally, the Flutter engine no longer reports the size of GPU images in the Dart VM. As mentioned above, these image resources have been manually released by the framework when they are no longer needed. If you continue to report to Dart according to the GC policy of the GPU memory size at this time, it will cause unnecessary heap memory pressure and further trigger invalid GC. A similar method is also applied to the Flutter engine to dart:uireclaim the implicit memory usage of native objects .
In our testing, this change eliminates the need for synchronous GC work when widgets create GPU-resident image build frames.
In this version release, the Flutter engine has made progress in dynamically updating the application state to the Dart VM. Specifically, Flutter will now use the RAIL-style API in Dart VM to make the rendering delay lower when routing transitions , that is, to keep the heap memory growing during transitions instead of GC, to avoid animation freezes. At present, this change will not bring much performance optimization, but in the future we will extend this improvement to other methods to eliminate the impact of GC. In addition, we also fixed a , and also reduced the lag caused by GC. Finally, when the Flutter view is no longer displayed, the Dart VM will also be notified for processing, further optimizing the memory usage when the Flutter view is not displayed.
Dropped support for macOS 10.11 to 10.13
We mentioned in [Flutter 3.3 release article] that Flutter will no longer support macOS 10.11 and 10.12 versions . Big impact, but the effect is that it can help to greatly simplify the code base. This means that desktop applications built using Flutter 3.7 and subsequent versions will no longer be able to run on macOS 10.11, 10.12, and 10.13. Flutter's minimum 10-point requirement for macOS has been upgraded to macOS Mojave 10.14.
So far, the iOS and macOS applications built by Flutter have included Metal support, and the OpenGL backend rendering engine has been removed from the iOS and macOS embedder layer. After removal, the compressed Flutter engine size has been reduced by about 100KB.
Add toImageSync to dart:ui
In this version release, Picture.toImageSyncthe and Scene.toImageSyncmethods are directly added dart:ui. Similar to Picture.toImageand Scene.toImage.such asynchronous methods, Picture.toImageSync will directly return Picturea handle to an Image, and asynchronously rasterize the Image in the background.
When a GPU context is available, the image is GPU-resident, which means it can be drawn faster than toImagegenerated images. (The image generated by toImage can also achieve GPU resident, but it has not been implemented yet).
Examples of new toImageSyncAPI support:
-
Quickly capture an expensive rasterized image for reuse across multiple frames.
-
Applied to the multiplex filter on the image
-
Applied on custom shaders
As an example, the Flutter framework now uses this API to optimize the performance of page transition animations on Android, cutting frame rasterization time by almost half and reducing stutter, and animations can reach 90% on machines that support these refresh rates. / 120 FPS.
Improvements to custom shader support
This release includes a lot of optimized support for custom shader fragments in Flutter. The Flutter SDK now has a built-in shader compiler capable of compiling the GSGL shaders listed in pubspec.yamlthe file to the correct platform-specific counterpart for the target platform. Additionally, custom shaders can be easily hot reloaded during development. Custom shaders are currently supported on both Skia and Impeller on iOS.
We've been impressed with the samples shared by the community and look forward to more ideas for custom shaders in Flutter in the future.
See documentation on the docs site and on pub.dev
flutter_shaders package to learn more.
Font resources support hot reloading
In the past, when adding new font resources to pubspec.yamlthe file you need to rebuild the application before you can view them. Unlike other resources, which can be directly hot-reloaded to take effect, nowadays, after the font list file is modified (including adding new fonts), it can also be viewed. It can be directly hot reloaded into the application and immediately visible.
Reduce the stuttering of animation effects on iOS devices
There are two important contributions from community member luckysmg that help reduce animation stuttering on iOS devices. In particular, add a dummy on the main thread CADisplayLinkto . In addition, the keyboard animation also CADisplayLinksets . As a result of these new changes, users will experience more consistent and smooth animations on 120Hz iOS devices.
epilogue
Again, Flutter wouldn't be as good as it is today without the amazing and passionate contributors in the Flutter community, and as we continue on this journey, we hope you know that we couldn't do this without you excellent results. Thanks to every contributor!
Our momentum continues, so please look forward to future updates!
Welcome to follow the official account of "MOOC" (www.imooc.com). We will always insist on original content, provide high-quality content in the IT circle, and share dry knowledge. Let's grow together!
This article was originally published on Muke.com, please indicate the source for reprinting, thank you for your cooperation