Slide 1

Slide 1 text

What’s new in Flutter & Dart GDG Montreal

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 Flutter Montreal Subchapter of GDG Montreal for Flutter community.

Slide 4

Slide 4 text

4 What is Flutter? Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Slide 5

Slide 5 text

So, what’s new?

Slide 6

Slide 6 text

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/

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

● 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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Records Example

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Object Destructuring Example

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Sealed Class, Patterns Example

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Want to learn more?

Slide 23

Slide 23 text

● 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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Thank You Jhin Lee He/Him Fullstack Dev @Unity