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

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. Introduction
5. 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
6. 2018 2020 2022 2024 Version evolution Flutter 1.0 Flutter 3.0 Dart 2.17.0 Flutter 2.0 Dart 2.12.0 Introduction
7. 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
8. 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.
9. Announcements
10. flutter.dev/impeller Impeller Announcement
11. 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
12. Vulkan backend feature complete on Android Impeller
13. default --enable-impeller iOS macOS --enable-impeller Android (Vulkan) Supported platforms Impeller --enable-impeller Still in development Android (OpenGL)
14. flutter.dev/wasm WebAssembly Announcement
15. Web Sites VS Web Apps WebAssembly Sites Instant Load Indexability Reach HTML CSS JS / TS Apps Flexibility Richness Portability Accelerated Graphics (WebGL / WebGPU) WebAssembly
16. Web Site Examples WebAssembly flutter.dev pub.dev dart.dev
17. Web App Examples WebAssembly earth.google.com editor.rive.app dartpad.dev
18. Google Earth earth.google.com Rive editor.rive.app DartPad dartpad.dev Web App Examples WebAssembly
19. WebAssembly Stable WebAssembly
20. Native WebAssembly JavaScript Performance WebAssembly x4 x1 x2
21. Compatibility WebAssembly Desktop 119 120⚠ ❌ Mobile 119 ❌ ❌ Chrome Firefox Safari Browser
22. $ flutter build web --wasm
23. Macros Announcement dart.dev/go/macros
24. Dart Macros (Experimental) Macros
25. 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
26. Macros
27. # 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
28. Cross Platform Technology Announcement developers.googleblog.com/en/ making-development-across-platforms-easier-for-developers/
29. 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
30. Summary
31. flutter.dev/impeller dart.dev/go/macros flutter.dev/wasm flutter.dev/ai Making development across platforms easier for developers Summary
32. Thank you.
33. 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
34. Flutter with AI Announcement flutter.dev/ai
35. 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
36. 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
37. pubspec.yaml # dart pub add google_generative_ai # flutter pub add google_generative_ai dependencies: … google_generative_ai: ^0.4.3 …
38. 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);
39. 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
40. Community
41. 2024 Google I/O Speaker Presentation Template Proprietary & Confidential
42. 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
43. 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
44. 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
45. Logos
46. Google I/O Extended - Logos
47. Google I/O Extended - Editable Logos {Change Location} {Change Location}
48. Google I/O Extended - Google Logos
49. Title slides
50. Optional tag here Here is a short title for a talk.
51. Optional tag here Here is a longer title. A title length should not exceed three lines.
52. Section title slides
53. Supporting text if needed A section title should not exceed two lines Section 1
54. Supporting text if needed A section title should not exceed two lines Section 2
55. Supporting text if needed A section title should not exceed two lines Section 3
56. Content slides
57. 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
58. 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’
59. 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
60. 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 #
61. 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 #
62. 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 #
63. 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 #
64. 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 #
65. 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
66. “Good design is as little design as possible.” Dieter Rams
67. 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 #
68. 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 #
69. 1.5B Statistic caption this is body copy and it goes a little like this
70. 1.5B Statistic caption this is body copy and it goes a little like this
71. Right-click and select ‘Replace image’
72. 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
73. 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 #
74. 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 #
75. 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 #
76. 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 #
77. 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 #
78. 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 #
79. Image in tablet caption Right-click and select ‘Replace image’ Section #
80. 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 #
81. 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 #
82. 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
83. Displaying code
84. 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
85. 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
86. 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); }
87. Image with code snippet * Use Google Sans Mono * Set line spacing to 1.2 * Don’t use font sizes below 25
88. Image with code snippet * Use Google Sans Mono * Set line spacing to 1.2 * Don’t use font sizes below 25
89. Thank you slides
90. Thank You Speaker Name pronouns Job Title
91. Thank You Speaker Name pronouns Job Title Speaker Name pronouns Job Title
92. Speaker Name pronouns Job Title Speaker Name pronouns Job Title Speaker Name pronouns Job Title Speaker Name pronouns Job Title Thank You
93. Resources Charts, tables, graphs
94. 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
95. 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
96. 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
97. 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
98. 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
99. Short Label Short Label Short Label Short Label Short Label Short Label Short Label Short Label CHART ELEMENTS
100. Step B Short Label Step D Step E Step A Step C CHART ELEMENTS
101. 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
102. Short Label Short Label Short Label Short Label Short Label Short Label Short Label CHART ELEMENTS
103. 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
104. 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
105. US MAP
106. Devices
107. Right-click and select ‘Replace image’ Mobile
108. Right-click and select ‘Replace image’ Mobile - Horizontal
109. Right-click and select ‘Replace image’ Wireframe - Tablet
110. Right-click and select ‘Replace image’ Wireframe - Tablet
111. Right-click and select ‘Replace image’ Wireframe - Wear OS
112. Right-click and select ‘Replace image’ Pixel 6
113. Right-click and select ‘Replace image’ Pixel 6 - Horizontal
114. Right-click and select ‘Replace image’ iphone 14
115. Right-click and select ‘Replace image’ iphone 14 - Horizontal
116. Right-click and select ‘Replace image’ Device - Tablet
117. Right-click and select ‘Replace image’ Device - Tablet
118. Right-click and select ‘Replace image’ Device - Wear OS
119. Right-click and select ‘Replace image’ Device - Pixelbook Go
120. Right-click and select ‘Replace image’ Device - Pixelbook
121. Graphics and icons
122. PRODUCTS & PLATFORMS
123. PRODUCTS & PLATFORMS
124. SOCIAL MEDIA
125. ICONS
126. c ICONS