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

Transcript

1. What’s new in
   Flutter & Dart
   GDG Montreal
   

   View Slide

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
   

   View Slide

3. 3
   Flutter
   Montreal
   Subchapter of GDG Montreal
   for Flutter community.
   

   View Slide

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.
   

   View Slide

5. So, what’s new?
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. ● Faster loading time
   ○ Reduced icon font size
   ○ Reduced CanvasKit size
   ● Element embedding
   ○ Demo
   ● Shader support
   ○ Demo
   ● WebAssembly is coming!
   Web
   Section 01
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Records
    Example
    

    View Slide

13. // With Record
    final (firstName, lastName) = getUser();
    print('Name: $firstName $lastName');
    // Without Record
    final user = getUser();
    print('Name: ${user.firstName} ${user.lastName}');
    

    View Slide

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');
    

    View Slide

15. Object Destructuring
    Example
    

    View Slide

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.');
    }
    

    View Slide

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
    

    View Slide

18. Sealed Class, Patterns
    Example
    

    View Slide

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);
    }
    

    View Slide

20. sealed class Block {
    Block();
    factory Block.fromJson(Map 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'),
    };
    }
    }
    

    View Slide

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),
    ],
    ),
    },
    }
    

    View Slide

22. Want to learn more?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. Thank You
    Jhin Lee He/Him
    Fullstack Dev @Unity
    

    View Slide