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

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

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

GDG Montreal

June 22, 2023

More Decks by GDG Montreal

Other Decks in Programming


  1. 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
  2. 4 What is Flutter? Flutter is an open source framework

    by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
  3. 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/
  4. 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
  5. 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
  6. • Faster loading time ◦ Reduced icon font size ◦

    Reduced CanvasKit size • Element embedding ◦ Demo • Shader support ◦ Demo • WebAssembly is coming! Web Section 01
  7. • 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
  8. 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
  9. // With Record final (firstName, lastName) = getUser(); print('Name: $firstName

    $lastName'); // Without Record final user = getUser(); print('Name: ${user.firstName} ${user.lastName}');
  10. // 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');
  11. 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.'); }
  12. 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
  13. 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); }
  14. 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'), }; } }
  15. @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), ], ), }, }
  16. • 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
  17. 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