Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google I/O extended 2024 - What's new in Flutter?

GDG Montreal
June 28, 2024
150

Google I/O extended 2024 - What's new in Flutter?

GDG Montreal

June 28, 2024
Tweet

More Decks by GDG Montreal

Transcript

  1. What’s new in Flutter Jhin Lee he/him Ali Yazdi he/him

    Billy Taing he/him Lenz Paul he/him
  2. 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
  3. Table of Contents 01 02 03 04 05 06 Introduction

    Announcement 1 Announcement 2 Announcement 3 Announcement 4 Summary
  4. 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
  5. 2018 2020 2022 2024 Version evolution Flutter 1.0 Flutter 3.0

    Dart 2.17.0 Flutter 2.0 Dart 2.12.0 Introduction
  6. 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
  7. 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.
  8. 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
  9. Web Sites VS Web Apps WebAssembly Sites Instant Load Indexability

    Reach HTML CSS JS / TS Apps Flexibility Richness Portability Accelerated Graphics (WebGL / WebGPU) WebAssembly
  10. 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
  11. # 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. pubspec.yaml # dart pub add google_generative_ai # flutter pub add

    google_generative_ai dependencies: … google_generative_ai: ^0.4.3 …
  17. 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);
  18. 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
  19. 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
  20. 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
  21. 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
  22. Optional tag here Here is a longer title. A title

    length should not exceed three lines.
  23. 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
  24. 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’
  25. 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
  26. 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 #
  27. 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 #
  28. 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 #
  29. 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 #
  30. 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 #
  31. 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
  32. 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 #
  33. 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 #
  34. 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
  35. 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 #
  36. 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 #
  37. 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 #
  38. 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 #
  39. 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 #
  40. 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 #
  41. 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 #
  42. 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 #
  43. 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
  44. 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
  45. 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
  46. 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); }
  47. Image with code snippet * Use Google Sans Mono *

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

    Set line spacing to 1.2 * Don’t use font sizes below 25
  49. Speaker Name pronouns Job Title Speaker Name pronouns Job Title

    Speaker Name pronouns Job Title Speaker Name pronouns Job Title Thank You
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. Short Label Short Label Short Label Short Label Short Label

    Short Label Short Label Short Label CHART ELEMENTS
  56. 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
  57. Short Label Short Label Short Label Short Label Short Label

    Short Label Short Label CHART ELEMENTS
  58. 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
  59. 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