IO Extended 23 - What's new in Flutter & Dart

Transcript

1. What’s new in Flutter & Dart GDG Montreal
2. 2 GDG and Flutter Montreal Organizer Full-Stack Developer @Unity and @ConsiderBeyond Scrum master Android and embedded system engineer for 10+ years. Handyman(Full-Stack Dev) for 5+ years <- I’m here! https://www.linkedin.com/in/leehack/ Jhin Lee
3. 3 Flutter Montreal Subchapter of GDG Montreal for Flutter community.
4. 4 What is Flutter? Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
5. So, what’s new?
6. 6 I/O FLIP Flutter and Dart for User Interface, Hologram effects, and backend. Dreambooth on Muse and PaLM API for AI-generated images and description. Firebase for game hosting, sharing, and real-time game play. Dart Frog for sharing code between the backend and frontend. https://flip.withgoogle.com/
7. 7 Material 3 The Material library now matches the latest Material Design spec. Changes include new components and component themes, updated component visuals and more. Web Improved load times, Element embedding and shader support Impeller By default, all apps built for iOS with Flutter 3.10 use Impeller. These iOS apps will have less jank and better consistent performance. Flutter 3.10 Section 01
8. The Material library now matches the latest Material Design spec. Changes include new components and component themes, updated component visuals and more. Material 3 Section 01 Demo
9. • Faster loading time ◦ Reduced icon font size ◦ Reduced CanvasKit size • Element embedding ◦ Demo • Shader support ◦ Demo • WebAssembly is coming! Web Section 01
10. • A new rendering runtime for Flutter ◦ Side-By-Side Demo • Pre-compiles a smaller, simpler set of shaders at Engine build time. • It’s enabled default on iOS with Flutter 3.10 Impeller Section 01
11. 100% null-safety. Record, patterns, and class modifiers. Java and Kotlin interop on Android with JNIgen. Objective C and Swift interop on iOS/macOS with FFIgen. Language Improvement Native Interop Dart team has collaborated with several teams across the Wasm ecosystem to add a new WasmGC feature. It’s now near-stable in Chromium and Firefox. WebAssembly Dart 3 Section 02
12. Records Example
13. // With Record final (firstName, lastName) = getUser(); print('Name: $firstName $lastName'); // Without Record final user = getUser(); print('Name: ${user.firstName} ${user.lastName}');
14. // Swap with Record (a, b) = (b, a); print('$a $b'); int a = 1; int b = 2; int temp = 0; // Swap Without Record temp = a; a = b; b = temp; print('$a $b');
15. Object Destructuring Example
16. final users = [ User(firstName: 'user1', lastName: '1'), User(firstName: 'user2', lastName: '2'), User(firstName: 'user3', lastName: '3'), ]; for(final User(firstName: first, lastName: last) in users) { print('$first is a $last.'); }
17. Class modifiers control how a class or mixin can be used, both from within its own library, and from outside of the library where it’s defined. • abstract • base • final • interface • sealed • mixin Class Modifiers Section 02 Link
18. Sealed Class, Patterns Example
19. class HeaderBlock extends Block { final String text; HeaderBlock(this.text); } class ParagraphBlock extends Block { final String text; ParagraphBlock(this.text); } class CheckboxBlock extends Block { final String text; final bool isChecked; CheckboxBlock(this.text, this.isChecked); }
20. sealed class Block { Block(); factory Block.fromJson(Map<String, Object?> json) { return switch (json) { {'type': 'h1', 'text': String text} => HeaderBlock(text), {'type': 'p', 'text': String text} => ParagraphBlock(text), {'type': 'checkbox', 'text': String text, 'checked': bool checked} => CheckboxBlock(text, checked), _ => throw const FormatException('Unexpected JSON format'), }; } }
21. @override Widget build(BuildContext context) { return switch (block) { HeaderBlock(:final text) => Text( text, style: Theme.of(context).textTheme.displayMedium, ), ParagraphBlock(:final text) => Text(text), CheckboxBlock(:final text, :final isChecked) => Row( children: [ Checkbox(value: isChecked, onChanged: (_) {}), Text(text), ], ), }, }
22. Want to learn more?
23. • Building next generation UI - https://codelabs.developers.google.com/codelabs/ flutter-next-gen-uis • Dive into Dart’s patterns and records - https://codelabs.developers.google.com/codelabs/ dart-patterns-records Codelabs Bonus 1
24. New in Flutter and Dart → https://goo.gle/44QuPgh I/O Flip Link → https://goo.gle/44UjVWE More on Impeller → https://goo.gle/3LVobg3 JNIgen talk → https://goo.gle/3VXuLav Material 3 talk → https://goo.gle/44U5mmc Evolving Web Support talk → https://goo.gle/3pDyayU What’s cooking with Dart → https://goo.gle/41ozTFz What’s new in Flutter 3.10 Blog post → https://goo.gle/42tIUP1 WASM → https://goo.gle/3nXYwLB Watch all Flutter Sessions → https://goo.gle/IO23_flutter Bonus 2 I/O 23 for Flutter
25. Thank You Jhin Lee He/Him Fullstack Dev @Unity