What’s new in Flutter Jhin Lee he/him Ali Yazdi he/him Billy Taing he/him Lenz Paul he/him

Flutter Montreal ● Flutter Meetup Network (supported by Google) ● Sub-Chapter of GDG Montréal for Flutter community ● Monthly Meetups Join our Discord server ➡ discord.fluttermtl.dev More informations ➡ fluttermtl.dev

Table of Contents 01 02 03 04 05 06 Introduction Announcement 1 Announcement 2 Announcement 3 Announcement 4 Summary

Introduction

Android, iOS, Desktop, Web Control each pixel UI theming (Material, Cupertino, Fluent) Portable Beautiful Native code (ARM, x86, RISC-V, JS, ?) Fast Stateful hot reload Devtools Code analysis Open source ⭐163k 1380 contributors Driven by the community Productive Open Introduction

2018 2020 2022 2024 Version evolution Flutter 1.0 Flutter 3.0 Dart 2.17.0 Flutter 2.0 Dart 2.12.0 Introduction

2018 2020 2022 2024 Version evolution Flutter 1.0 Flutter 3.0 Dart 2.17.0 Flutter 2.0 Dart 2.12.0 Flutter 3.22 Dart 3.4 Introduction

Introduction Showcase (https://flutter.dev/showcase) Virgin Money GEICO Universal Studios Canonical LG is using Flutter across their suite of mobile banking and credit card apps to unify app development processes, speed up change, and enable an industry-leading user experience.a recently shared that Flutter helped them improve branded user experiences across iOS, Android, and the web, reduce the size of their codebase, and increase development efficiency, all at scale. has chosen Flutter to enhance their smart TV operating system, webOS. Flutter’s performance, productivity, and strong ecosystem allow LG to rapidly develop and deploy webOS system apps that run smoothly. By 2025, Flutter will power system apps on tens of millions of LG TVs worldwide. has been working with Flutter since 2021 to enable support for the Flutter ecosystem in Ubuntu. Over the past year the Canonical team has rebuilt the Ubuntu Installer from the ground up with Flutter. released new Flutter mobile apps for their Hollywood, Osaka, and Orlando parks. Watch the video below to learn why they chose Flutter and to see how it’s performing so far. https://www.youtube.com/watch?v=JTk2E xr7FO4 SUPERCELL picked up Flutter quickly, and were especially impressed by its single codebase and portability. Developing the UI was simple and quick, and after just about a year of development, their new SDK was ready to relaunch.

Announcements

flutter.dev/impeller Impeller Announcement

A replacement for the previous Skia engine, aiming for smoother and faster performance. Reduces stuttering and jitters during animations in your Flutter app. New rendering engine Improved animations Precompiles shaders during engine build time, eliminating runtime compilation delays. Focus on efficiency What is Impeller? Impeller Leverages modern graphics APIs like Metal (iOS) and Vulkan (Android) for optimal performance. Opens the door for future development of 3D features within Flutter apps. Hardware acceleration Potential for 3D

Vulkan backend feature complete on Android Impeller

default --enable-impeller iOS macOS --enable-impeller Android (Vulkan) Supported platforms Impeller --enable-impeller Still in development Android (OpenGL)

flutter.dev/wasm WebAssembly Announcement

Web Sites VS Web Apps WebAssembly Sites Instant Load Indexability Reach HTML CSS JS / TS Apps Flexibility Richness Portability Accelerated Graphics (WebGL / WebGPU) WebAssembly

Web Site Examples WebAssembly flutter.dev pub.dev dart.dev

Web App Examples WebAssembly earth.google.com editor.rive.app dartpad.dev

Google Earth earth.google.com Rive editor.rive.app DartPad dartpad.dev Web App Examples WebAssembly

WebAssembly Stable WebAssembly

Native WebAssembly JavaScript Performance WebAssembly x4 x1 x2

Compatibility WebAssembly Desktop 119 120⚠ ❌ Mobile 119 ❌ ❌ Chrome Firefox Safari Browser

$ flutter build web --wasm

Macros Announcement dart.dev/go/macros

Dart Macros (Experimental) Macros

Package that allow other packages to read and generate code. Take some time if the project has a huge amount of code to generate like classes, routing, assets, everything at the same time. A separate execution has to be done to access the generated code. Build runner Dart integrated feature that augment an existing class. Code is generated on compile time. Use Dart Analyzer to perform generation during development in real-time. Update generated code automatically. Macros Code generation Macros

Macros

# switch to master channel (terminal) $ flutter channel master $ flutter upgrade # upgrade dart sdk version (pubspec.yaml) environment: sdk: '>=3.5.0-152 <4.0.0' # add macros to analyzer (analysis_options.yaml) analyzer: enable-experiment: - macros

Cross Platform Technology Announcement developers.googleblog.com/en/ making-development-across-platforms-easier-for-developers/

Google’s Recommendation Cross Platform Leveraging the latest and unique capabilities of Android ✅ Sharing business logic across Mobile and WebApp ✅ Sharing business logic and UI code across platforms ✅ Flutter Kotlin Use case KMP

Summary

flutter.dev/impeller dart.dev/go/macros flutter.dev/wasm flutter.dev/ai Making development across platforms easier for developers Summary

Thank you.

It highly solves iOS janking issues Janking Changing rendering algorithm process reduces resource consumption Rendering algorithm Performance Impeller Improves blurring and complex clipping UI Apply MSAA for better visual effect Complex UI

Flutter with AI Announcement flutter.dev/ai

The Google AI Dart SDK enables developers to use Google's state-of-the-art generative AI models (like Gemini) to build AI-powered features and applications. AI Cloud infrastructure in GCP Generative AI SDK Vertex AI Differences Flutter with AI

Tool that makes the integration of generative AI features easier. Get the benefits of all the Google Gemini models available. Easy-to-use Google’s model Build AI-powered apps available to any type of device. AI powered apps Google Generative AI package Google AI Dart SDK

pubspec.yaml # dart pub add google_generative_ai # flutter pub add google_generative_ai dependencies: … google_generative_ai: ^0.4.3 …

final model = GenerativeModel( model: 'gemini-1.5-flash', apiKey: apiKey, ); final prompt = 'Write a happy song about Flutter & Dart'; final content = [ Content.text(prompt) ]; final response = await model.generateContent(content); print(response.text);

gemini-1.0-pro Gemini 1.0 Pro Gemini 1.5 Pro Gemini 1.0 Pro Vision Best performing model for wide range of text-only tasks gemini-1.5-pro Multimodal model Supports images, audio, videos, and PDFs to text or chat prompts Context up to 1 million tokens gemini-1.0-pro-vision The best performing image/video content Supports text, image, and video Google AI Dart SDK Gemini 1.5 Flash gemini-1.5-flash Multimodal model Designed for high volume Cost-effective applications Delivers speed and efficiency Gemini models

Community

2024 Google I/O Speaker Presentation Template Proprietary & Confidential

Table of Contents MAKE A COPY 01 02 03 04 05 06 07 08 09 10 Logos Title slides Section title slides Content slides Displaying code Thank you slides Resources Charts, tables, graphs Devices Graphics & icons Google I/O Extended - Speaker slides

Short Title Google Sans Medium, 120px Long Title Google Sans Medium, 90px Section Title Google Sans Medium, 75px Headline Google Sans Medium, 60px Subhead Google Sans Medium, 36px Body Copy Google Sans Normal, 20px Typography General guidelines for Font styling and size. Code Google Sans Mono Normal, 29px Google I/O Extended - Typography

Our palette uses the Google primaries mixed as a gradient. A Background Grey should be used as to not overwhelm an audience with pure RGB white. Outlines for UI elements are set in 2.5pt in Black (Grey 900). All type should be Black (Grey 900) and highlights/color pops should be gradients. Primaries Blue 500 Hex #4285F4 RGB 66, 133, 244 CMYK 88. 40, 0, 0 PMS 2173 Coated PMS 2193 Uncoated Blend Only Colors Orange Hex #F46831 Purple Hex #9F6CD4 Yellow Hex #FFCB32 Neutrals Background Grey Hex #EEEEEE RGB 238, 238, 238 CMYK 5,4,5,0 PMS Cool Grey 1 Coated PMS Cool Grey 1 Uncoated Grey 900 Hex #202124 RGB 32, 33, 36 CMYK 5,0,0,90 PMS 426 Coated PMS 426 Uncoated White Hex #FFFFFF RGB 255, 255, 255 Green 500 Hex #34A853 RGB 52, 168, 83 CMYK 85, 0, 92, 0 PMS 2257 Coated PMS 2271 Uncoated Yellow 500 Hex #FBBC04 RGB 251, 188, 4 CMYK 0. 37, 100, 0 PMS 7549 Coated PMS 7549 Uncoated Red 500 Hex #EA4335 RGB 234, 67, 53 CMYK 0, 87, 89, 0 PMS 179 Coated PMS 2347 Uncoated Google I/O Extended - Colors

Logos

Google I/O Extended - Logos

Google I/O Extended - Editable Logos {Change Location} {Change Location}

Google I/O Extended - Google Logos

Title slides

Optional tag here Here is a short title for a talk.

Optional tag here Here is a longer title. A title length should not exceed three lines.

Section title slides

Supporting text if needed A section title should not exceed two lines Section 1

Supporting text if needed A section title should not exceed two lines Section 2

Supporting text if needed A section title should not exceed two lines Section 3

Content slides

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Headline goes here Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Headline goes here Section 2 Right-click and select ‘Replace image’

Headline goes here Right-click and select ‘Replace image’ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in sunt reprehenderit in voluptate ea commodo consequat deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Right-click and select ‘Replace image’ Headline goes here Section #

Headline goes here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Right-click and select ‘Replace image’ Section #

This is body copy. Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones. This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events. This is a subhead This is a subhead Headline goes here Section #

Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Headline goes here Section #

Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones. Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects. This is a subhead This is a subhead Bringing developers together in-person and online. Stay in the know about upcoming events. This is a subhead Headline goes here Section #

Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones. Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects. Tile Goes Here Tile Goes Here Bringing developers together in-person and online. Stay in the know about upcoming events. Tile Goes Here Section # 01 02 03

“Good design is as little design as possible.” Dieter Rams

This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. This is body copy. Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects for others to learn from. Recommendation Learnings Section #

This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. Learnings 200 Statistic Caption Section #

1.5B Statistic caption this is body copy and it goes a little like this

1.5B Statistic caption this is body copy and it goes a little like this

Right-click and select ‘Replace image’

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur velit massa, eget dapibus justo lobortis tempus. Nullam sit amet pulvinar quam, et auctor libero. Proin id sem aliquet, scelerisque purus nec, vehicula odio. Aliquam orci nisi, placerat blandit massa vitae, laoreet lobortis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur velit massa, eget dapibus justo lobortis tempus. Nullam sit amet pulvinar quam, et auctor libero. Proin id sem aliquet, scelerisque purus nec, vehicula odio. Aliquam orci nisi, placerat blandit massa vitae, laoreet lobortis ipsum. Right-click and select ‘Replace image’ Lorem Ipsum

Right-click and select ‘Replace image’ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur velit massa, eget dapibus justo lobortis tempus. Nullam sit amet pulvinar quam, et auctor libero. Proin id sem aliquet, scelerisque purus nec, vehicula odio. Aliquam orci nisi, placerat blandit massa vitae, laoreet lobortis ipsum. Section #

This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. Learnings 97% Statistic Caption Section #

86% Statistic Caption 14% Statistic Caption This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. Learnings Section #

Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones. Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects. 1 billion 2 billion Bringing developers together in-person and online. Stay in the know about upcoming events. 100,000 Section #

Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones. Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects. 1 billion 2 billion Bringing developers together in-person and online. Stay in the know about upcoming events. 100,000 Bringing developers together in-person and online. Stay in the know about upcoming events. Connect with fellow developers and startups in your area, hear from industry experts, share your skills, and learn new ones. 20 million 2,000 Get inspired to use Google technologies. Search for open source projects, learn from other developers, and submit your latest projects. 10 Section #

This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. Tablet Slide Right-click and select ‘Replace image’ Section #

Image in tablet caption Right-click and select ‘Replace image’ Section #

This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. Headline Right-click and select ‘Replace image’ Section #

Right-click and select ‘Replace image’ This is body copy. Bringing developers together in-person and online. Stay in the know about upcoming events, catch up on content you missed, and connect with Google experts. Headline Section #

Embed a video 1. Select video under the insert dropdown. 2. Paste in a video URL. You will have to resize the thumbnail once it is on this slide. 3. Or Select a video that has been uploaded to Google Drive. Make sure video is shared in the settings. 4. Ensure captions are active when playing 5. Add a copy of the original video file in the Google Drive folder for this session

Displaying code

code_slides.txt // A couple more notes on code slides: // *Use the Google Sans Mono font // *Set line spacing to 1.2 // *Don’t use font sizes below 25 Code is set in Google Sans Mono

code_slides.txt protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); } Use this template for code snippets longer than 6 lines Copy / paste your code using this tool for formatting using the ‘Dark Alternate’ theme

Use this style to highlight code code_slides.txt protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); }

Image with code snippet * Use Google Sans Mono * Set line spacing to 1.2 * Don’t use font sizes below 25

Image with code snippet * Use Google Sans Mono * Set line spacing to 1.2 * Don’t use font sizes below 25

Thank you slides

Thank You Speaker Name pronouns Job Title

Thank You Speaker Name pronouns Job Title Speaker Name pronouns Job Title

Speaker Name pronouns Job Title Speaker Name pronouns Job Title Speaker Name pronouns Job Title Speaker Name pronouns Job Title Thank You

Resources Charts, tables, graphs

Lorem Ipsum May 24, 2023 2,000 Lorem Ipsum June 21, 2023 1,000 Lorem Ipsum June 28, 2023 1,200 Lorem Ipsum Sept 6-7, 2023 2,000 TOTAL 6,200 Lorem Lorem Lorem TABLE ELEMENTS 2px Border No border on outside of table

Lorem ipsum dolor sit amet consectetur Mar 14 Mar 14 Mar 14 July 15 Lorem ipsum dolor sit amet consectetur Mar 31 Apr 14 Apr 14 May 31 Lorem ipsum dolor sit amet consectetur Mar 31 Mar 31 Mar 31 May 31 Lorem ipsum dolor sit amet consectetur Mar 31 Apr 7 Apr 7 May 31 Lorem ipsum dolor sit amet consectetur May 24 June 21 June 28 Sept 6-7 US EMEA IN CN Key Milestones TABLE ELEMENTS

Lorem ipsum dolor sit amet consectetur hfujii@ Lorem ipsum dolor sit amet consectetur sodhia@ Lorem ipsum dolor sit amet consectetur mariareis@ Lorem ipsum dolor sit amet consectetur mariareis@ Lorem ipsum dolor sit amet consectetur lhflores@ Lorem ipsum dolor sit amet consectetur lhflores@ Label Owner TABLE ELEMENTS

Label 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. ● Lorem ipsum dolor sit amet ● Consectetur adipiscing elit ● Sed do eiusmod tempor incididunt ut labore. Label 2 Label 3 Label 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. ● Lorem ipsum dolor sit amet ● Consectetur adipiscing elit ● Sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. ● Lorem ipsum dolor sit amet ● Consectetur adipiscing elit ● Sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Veniam et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. ● Lorem ipsum dolor sit amet ● Consectetur adipiscing elit ● Sed do eiusmod tempor incididunt ut labore. TABLE ELEMENTS

Caption Large Box Caption 30px Caption 4px Object Border when stroke only Medium Box Caption Caption Caption Small Box Caption Use for nested items only 23px Caption Labels Label Label Arrows Simple Charts: 4px 19px Caption 23px Caption CHART ELEMENTS Caption Caption Caption Caption Caption

Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label CHART ELEMENTS

Step B Short Label Step D Step E Step A Step C CHART ELEMENTS

Column Label Caption 10 Two lines Caption 9 Two lines Caption 8 Two lines Caption 7 Two lines Caption 6 Two lines Caption 5 Two lines Caption 4 Two lines Caption 3 Two lines Caption 2 Two lines Caption 1 Two lines Group Label Column Label Column Label Column Label CHART ELEMENTS

Short Label Short Label Short Label Short Label Short Label Short Label Short Label CHART ELEMENTS

Label One Short Label Short Label Short Label Label Two Label Three Label Four Label Five Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label CHART ELEMENTS

2012 2014 2016 2018 2020 Category Label One Caption 1 Two lines Caption 3 Two lines Caption 2 Two lines Caption 5 Two lines Caption 4 Two lines Caption 6 Two lines Caption 7 Two lines Caption 9 Two lines Caption 8 Two lines Category Label Two CHART ELEMENTS

US MAP

Devices

Right-click and select ‘Replace image’ Mobile

Right-click and select ‘Replace image’ Mobile - Horizontal

Right-click and select ‘Replace image’ Wireframe - Tablet

Right-click and select ‘Replace image’ Wireframe - Tablet

Right-click and select ‘Replace image’ Wireframe - Wear OS

Right-click and select ‘Replace image’ Pixel 6

Right-click and select ‘Replace image’ Pixel 6 - Horizontal

Right-click and select ‘Replace image’ iphone 14

Right-click and select ‘Replace image’ iphone 14 - Horizontal

Right-click and select ‘Replace image’ Device - Tablet

Right-click and select ‘Replace image’ Device - Tablet

Right-click and select ‘Replace image’ Device - Wear OS

Right-click and select ‘Replace image’ Device - Pixelbook Go

Right-click and select ‘Replace image’ Device - Pixelbook

Graphics and icons

PRODUCTS & PLATFORMS

PRODUCTS & PLATFORMS

SOCIAL MEDIA

ICONS

c ICONS