Flutter Update 3.16: Learn How to Boost Your Productivity

Flutter 3.16 has been rolled out, building upon the foundations laid by the previous 3.13 update, and bringing with it a suite of updates and improvements. This iteration has emerged from three months of concerted effort by the Flutter community, with contributions from a diverse group of developers. The switch to Material 3 as the default theme and the introduction of a preview for Impeller on Android are notable milestones, enhancing the overall developer experience. For an extensive overview of the changes that are part of this release, the Flutter release notes provide all the necessary details.

Now, let's proceed to a detailed examination of what Flutter 3.16 brings to the table and its potential effects on your development process.

1. Framework: With Material 3 now the default theme, developers are greeted with updated component visuals and new components, easing the future transition away from Material 2.
2. Engine: The engine has been bolstered by the addition of a Vulkan backend for Impeller on Android, aimed at providing better graphical performance and inviting developer feedback through a preview.
3. Games: The Flutter Casual Games Toolkit has been expanded with more resources, including genre-specific templates and integrations, to aid developers in creating engaging mobile games.
4. Platform: Android experiences a more responsive mouse scroll wheel interaction, and on iOS, Flutter extends its capabilities to support a wider range of app extensions.
5. Package Ecosystem: The package ecosystem is strengthened with new Flutter Favorites, highlighting exceptional packages that contribute to robust app development.
6. DevTools: A significant DevTools update introduces an extensions framework, allowing developers to build and integrate custom tools, enhancing the debugging process.

With this overview as a starting point, let's delve deeper into each update to uncover the full range of features and improvements that Flutter 3.16 has introduced.

1. Material You as default

With the release of Flutter 3.10 in May 2023, Material You, also known as Material 3, has been updated to conform to the latest specifications in Material Design, introducing a variety of new components, themes, and refreshed visuals. Starting with Flutter 3.16, Material You becomes the default option, setting useMaterial3 to true automatically within the framework.

Developers can incorporate Material You in their Flutter apps by leveraging the updated ThemeData properties like colorScheme and textTheme. For instance, creating a color scheme that aligns with Material You design principles is now streamlined with ColorScheme.fromSeed(), ensuring both aesthetic appeal and accessibility standards are met. It's also possible to derive a color scheme from image colors using ColorScheme.fromImageProvider. Customizing the appearance of Material 3 components further, developers can add specific component themes to their ThemeData, like segmentedButtonTheme or snackBarTheme, which override the default settings detailed in the component's API documentation.

For those interested in experiencing the range of Material You components firsthand, a demo application is available. This demo includes a feature to toggle useMaterial3, allowing for a side-by-side comparison with previous Material designs.

2. Material 3 motion

Flutter 3.16 enhances the fluidity of user interfaces with the introduction of new Easing and Durations classes, elevating the Material 3 motion experience. These improvements facilitate more refined and expressive animations within apps. Existing Material 2 curves are now labeled as legacy to align with the transition towards more modern animation curves. This update, detailed in GitHub issue, is a step forward in streamlining the animation process, making it both simpler and more intuitive for developers to create engaging motion designs.

3. Expanded edit menu options for iOS

Flutter 3.16 brings an important update for iOS users with expanded text selection capabilities. Now, when users select text, they can access additional options directly from the edit menu, including look up, search, and share. These new features enhance user interaction, making information retrieval and content sharing more seamless within Flutter apps.

4. Text scaling for Android

Flutter introduces the TextScaler class, a new feature that allows developers to define a global text scale factor, enhancing text accessibility across the app. This update aligns with Android 14’s non-linear font scaling, which is especially beneficial for users with visual impairments.

5. Updated gesture support

The SelectionArea and SelectableRegion widgets in Flutter have been enhanced to support intuitive gesture controls for text selection. With this update, users can now use a single click to place the cursor, double-click to select a word, and combine a double-click with a drag to select multiple words. Additionally, long-pressing and dragging on a touch device allows for block text selection, streamlining the text interaction experience across different devices.

6. Improved focus handling

Flutter's latest update simplifies how focus is managed with menu widgets. When interacting with menu items, the FocusManager now ensures that once a menu item is clicked, focus automatically returns to the widget that was originally active before the menu was accessed. This means smoother transitions and less manual focus management for developers, enhancing the user's navigation experience within the app.

7. Shortcut reordering on Apple devices

Flutter's recent update streamlines the user interface for Apple devices by reordering menu item shortcuts to match the sequence recommended by Apple's Human Interface Guidelines. This ensures a more intuitive user experience by aligning with familiar Apple conventions. For developers, this means less manual configuration and for users, it translates to more predictable keyboard shortcuts.

8. Enhanced animations

Flutter's introduction of the MatrixTransition widget marks a significant leap in animation capabilities within the framework. This powerful widget allows developers to apply matrix transformations to a child widget, enabling a broad spectrum of animated effects that can enhance the interactivity and visual appeal of an application. By using the animation's current value as a reference, the MatrixTransition can dynamically alter the transformation applied, making the animations more fluid and responsive to user interactions.

9. Streamlining canvas testing

The flutter_test package now includes the PaintPattern class, a significant update for developers who perform unit testing on custom painting code. By using PaintPattern, developers can verify the properties of paint calls without the cumbersome process of creating golden files, traditionally used for capturing and comparing visual renderings.

This class is particularly useful when testing custom implementations of widgets like CustomPainters and Decorations, as it allows for more efficient and precise assertions in tests. This update simplifies the testing process, reducing the time and effort needed to ensure that the visual aspects of widgets are rendered correctly.

10. Improved 2D scrolling functionality

Following the foundational work laid out in Flutter 3.13, the latest release enhances the two-dimensional scrolling experience. The framework now better supports KeepAlive widgets, ensuring that the state of scrollable content is preserved. Additionally, the default focus traversal and implicit scrolling have been refined, providing a more intuitive navigation that aligns with users' expectations.

The two_dimensional_scrollables package has been updated to include the TableView widget, which benefits from these improvements. This widget and subsequent updates in the package bring more robust decoration and styling features, along with bug fixes, enhancing both the visual appeal and the performance of scrolling in Flutter apps.

1. Impeller preview for Android

Flutter 3.16 introduces a preview of Impeller on Android, featuring a Vulkan backend aimed at enhancing graphics performance. This update is part of Flutter's ongoing efforts to refine rendering capabilities on Android devices.

Performance benchmarks indicate significant improvements in frame rasterization times, leading to smoother animations and steadier framerates. The shift to testing on more advanced devices like the Pixel 7 Pro has shown promising results, with a noticeable decrease in performance issues.

Developers can enable Impeller by adding the enable-impeller flag to their flutter run command or by inserting the following meta-data tag within the <application> element of their AndroidManifest.xml:

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true" />

The progress made with Impeller's fidelity and performance on Vulkan-enabled Android devices is substantial, setting the stage for more robust and visually appealing Flutter apps. Although, there are some limitations with the current preview. Platform views lack implementation, and custom shaders aren't yet supported. A comprehensive list of issues is maintained on the Impeller project board on GitHub.

The Flutter team is actively seeking feedback to further improve Impeller's performance. Detailed feedback, especially from diverse Android hardware, is invaluable.

2. Enhanced text performance

Flutter 3.16 has made significant strides in improving text rendering with Impeller, positively impacting both Android and iOS platforms. By optimizing the glyph atlas management and the distribution of text rendering tasks between UI and raster threads, the update ensures smoother rendering of text-heavy content. This means users can expect a noticeably smoother experience when interacting with text-intensive applications, with reduced lag and jank.

3. Refined engine performance

The Flutter engine has been updated to prioritize performance-sensitive threads on the more powerful cores of mobile devices. This optimization leads to a substantial reduction in frame build and rasterization times, particularly on Android, resulting in a more responsive and fluid user experience. Even though the improvement is less pronounced on iOS, due to the less varied core performance, users will still benefit from a more efficient rendering process.

4. API and fidelity improvements

With this update, Flutter's performance overlay now functions correctly with Impeller, providing developers with essential performance metrics during the app development process.

Furthermore, the issue of color banding has been addressed by enabling dithering by default, which will eliminate visual artifacts in gradients and shadows, enhancing the visual fidelity of apps. These changes demonstrate Flutter's commitment to delivering a reliable and visually appealing experience across all devices.

The Flutter ecosystem has rapidly become a hub for casual game development. Standout examples include Etermax’s Trivia Crack and Lotum's 4 Pics 1 Word, which showcase Flutter's versatility and capability in creating interactive and high-performance gaming experiences.

• Genre-specific templates: Flutter now offers specialized templates for popular game genres. The basic game template provides a quick-start foundation, while the card game template offers tailored mechanics and layout, and the endless runner template focuses on fluidity and dynamic controls.

• Comprehensive integrated services: Play Games Services integration simplifies the implementation of social features and leaderboards, while the in-app purchase module helps set up a revenue stream. Additionally, advertisement integration is streamlined, offering developers an avenue for ad-monetization right out of the box.

• Features to boost engagement: To keep players coming back, the toolkit provides a framework for adding achievements, which are key to player retention. Crashlytics support ensures that developers can quickly pinpoint and fix issues. Perhaps most importantly, the toolkit includes support for multiplayer functionality, allowing developers to tap into the vast market of social and competitive gaming with less hassle.

Developers can access these updates through the open source Flutter Casual Games Toolkit. The toolkit is planned to be further developed, adding more templates and resources adapted to different game genres.

1. Android updates

Flutter 3.16 resolves the issue with mouse scroll wheel sensitivity on Android devices, particularly tablets and foldables. The scrolling behavior with a mouse now mirrors the native scroll speed expected on Android, enhancing the user experience on larger screens. This improvement aligns with Android's large screen guidelines.

The release also integrates Android 14's predictive back gesture, allowing users to preview the home screen with a back swipe gesture. This intuitive navigation feature brings a smoother, more natural interaction to Flutter apps on Android.

2. iOS updates

Flutter extends its capabilities to iOS app extensions, enabling the use of Flutter widgets for crafting UI elements in certain iOS app extensions. This update opens up new possibilities for Flutter developers to integrate more deeply with the iOS ecosystem.

Flutter's latest update highlights outstanding packages such as flame, flutter_animate, flutter_rust_bridge, riverpod, video_player, macos_ui, and fpdart, awarding them the title of Flutter Favorites for their exceptional quality.

Flutter's first package ecosystem summit has brought together contributors to share expertise and collaborate, marking a step forward in community-driven development.

Detailed package updates:

• Cloud-based Google Maps styling: The ability to customize Google Maps from the cloud is a game-changer, making map styling more flexible for developers.
• Camera X plugin enhancement: The Camera X plugin now includes more robust features for Android, setting the stage for it to become the preferred camera plugin.
• macOS video player support: Extending the video player plugin to macOS allows for seamless video integration across mobile and desktop platforms within Flutter apps.

Developers can incorporate these packages into their Flutter apps and provide feedback to contribute to ongoing improvements. Visit pub.dev for further details on these tools.

1. Chrome DevTools integration

Flutter's integration with Chrome DevTools has been enhanced, exposing Timeline events within the performance panel. This allows web developers to efficiently track down performance bottlenecks in their Flutter web apps, offering a granular view of rendering times and app frames.

2. DevTools extensions

The new DevTools extensions framework is a significant addition, enabling package authors to develop bespoke tooling that integrates seamlessly into the DevTools environment. This means developers can now utilize specialized tools that correspond directly to the packages used in their projects, such as those provided by Provider, Drift, and Patrol.

3. Improved DevTools features

The latest DevTools update introduces a new home screen, giving developers a quick overview of their connected applications. Enhancements have also been made to the overall performance and hot restart robustness, improving developer workflow and efficiency. For finer details, developers can review the DevTools release notes.

4. VS Code extension advancements

The Flutter extension for VS Code now boasts a dedicated Flutter Sidebar. This new feature streamlines the development process by offering quick access to various DevTools options, active debug sessions, device management tools, and more, directly within the VS Code interface.

In this release, Flutter has deprecated several APIs that were marked for expiration post the 3.13 version. Examples include changes in the ScaffoldMessenger API and updates to the ThemeData class. Developers can find a comprehensive list and guidance on migration in the deprecation guide.

To facilitate the migration process, developers can use the flutter fix command for automated code correction. This tool helps apply bulk fixes across the codebase directly within the IDE.

Looking ahead, the deprecation policy will expand to include the flutter_driver package, enhancing testing capabilities by aligning it with the flutter and flutter_test packages. This change is geared towards streamlining the testing framework, ensuring consistency and improved maintenance across Flutter's development environment.

For more on utilizing flutter fix for seamless migration, visit the flutter fix documentation.

1. Streamlined null checks

In Dart 3.2, the language's flow analysis has been enhanced to allow non-null promotion of private final fields. This means that if a private final field is checked for nullity, it can thereafter be used as if it were non-nullable, streamlining code and reducing the need for repetitive null checks.

This improvement is particularly useful for developers as it ensures that once a private final field is initialized, it's treated as reliably non-nullable, enhancing code safety and maintainability. This feature is activated for projects targeting Dart SDK version 3.2 and above.

2. Enhanced lint rules

The lints library, housing Dart's default set of static analysis rules, has been upgraded to version 3.0, bringing new lints to both its core and recommended sets. This update includes checks for pubspec URLs and ensures collection methods are called with appropriate arguments, among other enhancements.

The updated lints will automatically apply to new projects started with dart create or flutter create. For existing projects wishing to adopt these improvements, you can upgrade to version 3.0 now. For a detailed look at all the new rules, view the changelog.

3. Enhancements in interoperability

Dart 3.2 enhances its cross-platform capabilities by improving how Dart code interacts with other programming languages and system APIs. This includes new features for working with C, Java, Kotlin, Objective C, and Swift, and streamlining the integration of Dart functions with native code, making it easier for developers to build apps that leverage existing libraries and handle complex functionalities.

4. DevTools extensions for Dart packages

Dart 3.2 and Flutter 3.16 introduce a new extensions framework within Dart DevTools, designed for package authors to create tailored debugging tools for their packages.

This innovation enables authors to provide specialized tools that integrate with DevTools, offering more targeted and relevant functionality for developers using their packages. An example of this is the upcoming Serverpod 1.2 release, which will feature its own DevTools extension, demonstrating the framework's capability to enhance package-specific debugging experiences.

5. Dart Web and Wasm update

The Dart team is nearing completion of the Dart-to-Wasm compiler, with Chrome 119 and Firefox 120 set to support Wasm-GC by default.

This update aims to leverage Wasm's high-performance capabilities for Dart and Flutter web apps. The new "Skwasm" rendering engine for Flutter web represents a significant step towards multi-threaded rendering support, aiming to improve performance and compatibility across various browsers and use cases. For the latest information, visit the support for WebAssembly page.

Summary

Flutter 3.16 builds on previous updates, introducing Material 3 as the default UI, enhancing animations, and expanding iOS editing options. It brings the Impeller engine preview to Android, promising better graphics performance, and improves text rendering and engine performance across platforms.

The release also advances game development with new templates and features, while Android and iOS benefit from more intuitive interactions and extended capabilities. The package ecosystem is bolstered with new Flutter Favorites and the DevTools suite now includes extensions for package-specific debugging. Dart 3.2 complements these changes with improvements in null safety, lint rules, and interoperability, particularly through the nearing completion of the Dart-to-Wasm compiler and updates to the "Skwasm" rendering engine for web apps.

Flutter 3.16 and Dart 3.2 bring meaningful advancements, thanks to the dedicated efforts of the Flutter team and the vibrant contributions of the global community. To update Flutter, execute the command flutter upgrade in the terminal to obtain the latest version for the local development environment.