Flutter: Google IO 2024, the bullet list recap

I love Flutter, you love Flutter, last week was the Google IO 2024 and you want a quick recap. You are in the right place.

Last week I wrote a quick LinkedIn post about where to find information on Flutter news at the Google IO 2024.

📲 Quentin Klein on LinkedIn: Flutter at Google I/O 2024 - YouTube

In this post, I mention a Youtube Playlist with all the Flutter videos in the Google IO.

Catch all of the latest announcements from Flutter and Dart at Google I/O 2024. Learn what’s new with Flutter, Gemini, CameraX, gaming, and more that you don’t want to miss.

Let’s recap all of this

TL;DR

10 videos, ~6h30 of content.
Time is precious, here is a bullet list a recap for each one of them (almost).

Developer Keynote (cross platform)

Register for Google I/O and watch the Developer Keynote live on May 14th

• Project IDX is open for everyone in beta (cloud base IDE).
• Checks is open in beta (a tool to review code and legals of your app).
• Flutter 3.22 is live.
• Dart 3.4 is live.
• WASM in Flutter Web is in ~production.

Also but not Flutter linked

• Firebase does SQL (or connects with).
• Firebase does AI.

Google Keynote

It’s time to I/O! Tune in to learn the latest news, announcements, and AI updates from Google.

• Nothing interesting about Flutter here.

How to build Adaptive UI with Flutter

Enhance your Flutter app with an adaptive UI that works and looks great on phones, tablets, foldables, and desktops. Discover how to handle different input modes, such as mouse and keyboard, to create a seamless experience on all devices. Explore powerful adaptive widgets, new display APIs, and quick rules to help you build a highly adaptable and user-friendly Flutter app.

• SafeArea is god mode, add it in first child of Scaffold.
• GridView for list display change the crossAxisCount based on width of content, consider using SliverGridDelegateWithMaxCrossAxisExtent.
• Handle screen orientation please, use MediaQuery, but is it right (not MediaQuery.of().x but MediaQuery.xOf() for example).
• LayoutBuilder is a good way to get container constraints.
• Follow the Material guidelines.
• Abstract > Mesure > Branch principle.
• Break down your widgets to the smaller atomic possible ones.
• Flutter adaptive doc is available.

What is new in Flutter

Enhance your Flutter app with an adaptive UI that works and looks great on phones, tablets, foldables, and desktops. Discover how to handle different input modes, such as mouse and keyboard, to create a seamless experience on all devices. Explore powerful adaptive widgets, new display APIs, and quick rules to help you build a highly adaptable and user-friendly Flutter app.

• Google Earth (android, ios, web) is written in Flutter.
• LG webOS is written in Flutter.
• Universal Destinations is written in Flutter.
• Flutter is the most popular cross platform framework in the world.
• Gemini API in your app with Google AI Dart SDK.
• Flutter is a good choice for making games with Flame.
• Impeller is on road to the moon (compared to Skia).
• Macros are available (~you know) for json and data class.
• Web Assembly is stable for Flutter web (and ~twice perf as JS).

Building picture perfect camera experiences in Flutter with CameraX

Enhance your Flutter app with an adaptive UI that works and looks great on phones, tablets, foldables, and desktops. Discover how to handle different input modes, such as mouse and keyboard, to create a seamless experience on all devices. Explore powerful adaptive widgets, new display APIs, and quick rules to help you build a highly adaptable and user-friendly Flutter app.

• Add camera to your flutter app using CameraX on Android.
• Use https://pub.dev/packages/camera_android_camerax.
• Simpler, Faster, Better (but only works on Android and no fallback for other platforms) → Use camera with it.

The endorsed camera_android_camerax implementation of the camera plugin built with CameraX has better support for more devices than camera_android, but has some limitations; please see this list for more details. If you wish to use the camera_android implementation of the camera plugin built with Camera2 that lacks these limitations, please follow these instructions.

No more broken links: Deep linking success in Flutter

Deep linking can be a major pain point for developers, leading to frustrating user experiences. This session dives into the fundamentals of deep linking on iOS and Android within Flutter apps. More importantly, you’ll discover powerful new deep linking validation tools that expose common configuration errors and provide clear steps for fixing them. Leave this session confident in your app’s navigation.

• Deep Link doc available.
• Please use Universal Links and App Links (for safety reasons).
• Go router is a good choice for routing.
• Use Deep Linking Validator in tools, it will do almost all the work for you.

Gemini API and Flutter: Practical, AI-driven apps with Google AI tools

AI is changing fast, and knowing how to get started with AI can be overwhelming. We’ll show you how to easily build AI-powered features into your apps across platforms from a single code base with the Gemini API and Flutter.

• Google AI Studio is a good way to start.
• Use google_generative_ai.
• A quick start is available.

How to build a physics based game with Flutter and Flame’s Forge2D

Take control of Forge2D to craft environments for users to play in so you can build games that are both challenging and rewarding. Flutter and Flame will make this journey to gaming excellence fun for players and for you.

• The codelab is availabe online and there is nothing much to say, the video is a run of the codelab.

Build generative AI agents with Vertex AI Agent Builder and Flutter

Supercharge your generative AI development workflow with Vertex AI and Flutter. Seamlessly integrate with your existing tools and leverage our pre-built components and architectures to accelerate prototyping and deploy production-grade gen AI agents in your apps.

It is more a talk about AI than a talk about Flutter

• Ask the model to answer in a json like format.
• Firebase vertexai.
• Outdated data ? Connect external datasources with AI Agents
• There is a package for chat ui.
• Flutter is great choice for responsiveness and adaptive ui (see the section How to build Adaptive UI with Flutter).

Conclusion

Here we are, this was a very quick, bullet list recap, of all the videos on the playlist.

If you find them interesting then do watch the videos.

Try Flutter, use it, run it, love it.

Making development across platforms easier for developers

Need to share both UI code and business logic across platforms? Try Flutter!

(And if you liked this post, share it ?)

EDIT 24 May 2024, Google published this video on Youtube, which is a good take away too