Google I/O 2024: Key Flutter Updates You Need to Know

Flutter Google I/O 2024

Hello Flutter enthusiasts! Members of the Flutter team had a lot to share at Google I/O 2024, and here we are with a quick look at the most exciting updates. From performance improvements to new tools and features, we have a lot to be excited about. Let's dive in and talk about the top five highlights.

WebAssembly Support for Flutter Web Apps

One of the most awaited announcements is WebAssembly (Wasm) support for Flutter web apps. Flutter is working with the Wasm working group and the Chrome team to ensure seamless integration. This update brings nice performance improvements for every Flutter web app, reducing the performance difference in frame rates between web and mobile apps to a factor of about two.

For people worried about compatibility, Flutter has a seamless fallback to JavaScript for your web apps, ensuring all apps you build will perform and look the same across different web browsers. Dual support like this means developers can maximize the capability of Wasm where possible, yet remain widely compatible with the broader web.

You can try out the demo here!

Impeller Rendering Engine for Android

Impeller is the powerful new rendering engine for Flutter, launched last year to deliver complex shapes by utilizing hardware and software for iOS. Impeller gives a 2 times improvement in performance, especially with complex shapes, such as SVGs, and Lottie animations, in your app. Its new blur effect rendering is 2x faster on iOS.

The first results after testing on Android devices with Vulkan support show impressive performance due to frame rasterization rates being 30% better compared to the previous methods of rendering complex shapes. This is another early-release opt-in feature for all your applications, with no changes needed in your code, available in the stable channel. Impeller handles shader compilation at build time to eliminate runtime jank and provide better performance for your app.

Check out the Impeller rendering engine here.

Dart Macros: Simplify Code with Metaprogramming

Flutter goes experimental with Dart Macros, the new static metaprogramming feature, which does the coding for you. It will make jobs like JSON serialization repetitive, and code can now be written with the help of it. If you add a macro annotation like @JsonSerializable on your data classes, it will automatically create fromJson and toJson methods during compile time.

@JsonCodable()
class Vehicle {
  final String description;
  final int wheels;
  Vehicle(this.description, this.wheels);
}
void main() {
  final jsonString = Vehicle('bicycle', 2).toJson();
  print('Vehicle serialized: $jsonString');
}

As the feature is being developed in an experimental phase, it is set to reduce the time taken to write the boilerplate code and hence improve the development process. Flutter is keen on your feedback — go ahead, try it, and share Flutter is moving fast in its gaming world, with popular games like Trivia Crack, Boom Beach, Squad Busters, and even some parts of Clash Royale being built with Flutter. Some games are wholly made with Flutter, while in some other games, only certain parts of the UI are developed by Flutter.

To help the developers of gaming applications, Flutter announced new packages and resources like the SoLoud audio engine, Codelab on the forge2d physics simulation, and a guide to optimizing the loading speeds of game builds of Flutter web. And the open gaming ecosystem continues to grow, with the Global Gamers Challenge and other community-contributed pieces.

Conclusion

The updates coming from the Flutter team at Google I /O 2024 show how much the team is bent on developing both better developer productivity and app performance. The addition of support for WebAssembly, Impeller on Android, Dart macros, growth in the gaming ecosystem, and integration of AI tells that Flutter is now stepping ahead to empower developers to build high-quality, efficient, and highly integrated cross-platform applications.

Watch out for more updates on Flutter and happy coding! Check the technical blog post on the Flutter Medium blog for more details here.