Flutter Google I/O 2023 Recap Busan Edition 박제창 @I/O Extended 2023 Cloud Busan & Busan

Slide 1

Slide 1 text

Flutter Flutter Google I/O 23 Recap 1 Busan Edition

Slide 2

Slide 2 text

Slide 2 https://speakerdeck.com/itsmedreamwalker/o-extended-2023-cloud-busan-and-busan

Slide 3

Slide 3 text

박제창 (@Dreamwalker) Dreamus Company Flutter Seoul GDG Golang Korea Intro @Dreamwalker

Slide 4

Slide 4 text

Dreamus Company 4

Slide 5

Slide 5 text

GDG Golang Korea https://festa.io/events/3890 5

Slide 6

Slide 6 text

GDG Golang Korea 6

Slide 7

Slide 7 text

Flutter Seoul 7 Flutter Seoul Flutter Songdo Flutter Daegu

Slide 8

Slide 8 text

Flutter Seoul Flutter Seoul Discord Open Kakaotalk

Slide 9

Slide 9 text

Flutter Community https://festa.io/events/3887 9 CustomPainter 관련 발표 예정

Slide 10

Slide 10 text

“Do You Know… Flutter?” ~2020 JaiChang Park 10

Slide 11

Slide 11 text

“Are you using Flutter?” 2020~ JaiChang Park 11

Slide 12

Slide 12 text

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. https://flutter.dev/ What’s Flutter Intro 12

Slide 13

Slide 13 text

Flutter Architecture Layers Intro 13

Slide 14

Slide 14 text

2023-04-01 Flutter Forward Extended Korea Intro 14 ● https://speakerdeck.com/itsmedreamwalker/flutter-forward-extended-korea-flutter-2023-roadmap ● https://youtu.be/x7wB89Wmu_A

Slide 15

Slide 15 text

1. Custom asset transformers, because they enable some performance improvements. 2. Efficient 2D scrolling widgets (e.g. tables and trees), to improve the performance of applications with this kind of interface. 3. Multiple windows, especially for desktop platforms, because this is a very highly requested feature. 4. Platform Views on macOS and Windows, by popular demand. 5. Drag and drop, also by popular demand. 6. Wireless debugging on iOS, our second-most-requested feature. 7. Custom "flutter create" templates, which makes it much easier for third-parties (e.g. the Flame engine) to bootstrap developers. 8. Supporting element embedding (see also #32329), which allows Flutter content to be added to any standard web

, by popular demand. Engineering Roadmap Features Intro 15

Slide 16

Slide 16 text

Intro 16

Slide 17

Slide 17 text

Intro 17

Slide 18

Slide 18 text

I/O FLIP 18 An AI-designed card game powered by Google, built for Google I/O 2023 ● https://flip.withgoogle.com/#/ ● https://github.com/flutter/io_flip

Slide 19

Slide 19 text

“Included everywhere! Android, Chrome, AI!” @timsneath 19

Slide 20

Slide 20 text

Learn the latest from Dart and Flutter, including how they enable you to build beautiful native apps for any platform. This session covers breakthrough graphics performance, seamless integration, emerging architectures and platforms, and developer experience. What's new in Dart and Flutter Section 01 20

Slide 21

Slide 21 text

Flutter 3.10 ! Section 01 21 What's new in Dart and Flutter .6

Slide 22

Slide 22 text

Flutter 3.13 !! Section 01 22 What's new in Dart and Flutter

Slide 23

Slide 23 text

Material 3 지원 확대 연관 세션 1. What’s New in Material Design 2. Design for every device with Flutter and Material 3 100% Sound null safety New : Patterns New: Class modifiers Material 3 Dart 3 UI Upgraded to use Material 3 Trace Viewer based on Perfetto DevTools 01 02 03 Section 01 23 What's new in Dart and Flutter 📌 Section Pick 📌 Section Pick

Slide 24

Slide 24 text

OrbShader Custom Shader GLSL 연관 세션 Building next-gen UIs in Flutter Breakthrough graphics performance. New Rendering Engine Production ready for iOS 연관 세션 Tour of Impeller - Flutter's new rendering engine Fragment Shaders for Web Impeller Flutter Web Wasm (WebAssembly) 연관 세션 Evolving Flutter's support for the web Wasm 04 05 06 Section 01 24 What's new in Dart and Flutter

Slide 25

Slide 25 text

Dart 3 - The road to Dart3 Section 01 25 What's new in Dart and Flutter ● ✅ Around January/February 2023: Dart 3 alpha released. ● ✅ Around March/April 2023: Dart 3 beta released. ○ This release previews the new features in Dart 3. ● ✅ Around mid 2023: Dart 3 stable released. ○ Sound null safety becomes the only supported mode.

Slide 26

Slide 26 text

Dart 3 Section 01 26 What's new in Dart and Flutter ● 100% Sound Null Safety ○ Reduce run-time errors from nulls ○ Smaller compiled output ○ Improved performance ● New Patterns → Modern programming ○ Structured data with records ○ Pattern matching ● New Class Modifiers

Slide 27

Slide 27 text

Dart 3 Section 01 27 What's new in Dart and Flutter ● 100% Sound Null Safety ○ Null Safety는 Dart 2.12 버전때 소개되어 약 2년정도 시간 경과 ○ dart migrate tool 제거 → SDK 2.19 사용하여 migrate 수행 필요

Slide 28

Slide 28 text

Dart 3 Section 01 28 What's new in Dart and Flutter ● New: Records & Patterns ○ Records는 Dart SDK 3.0 버전에 새로 적용된 Type ○ Pattern은 Dart 언어의 a syntactic category ■ statements and expressions ■ match a value, destructure a value New Feature

Slide 29

Slide 29 text

Dart 3 Section 01 29 What's new in Dart and Flutter ● What are Records ○ First-class : Store in variables, return from functions ■ 변수를 저장하고, 함수로부터 값을 반환, 제네릭 타입 사용 ○ Objects: Subtype of Record which extends Object ○ Value semantics: Automatic == and hashCode ○ Optimizable: No persistent identity → Compiler can optimize away

Slide 30

Slide 30 text

var io23BusanSpeaker = { 'name': "Dreamwalker", "part": "Flutter", "track": 2, }; List speakerInfo(Map json) { return [ json['name'] as String, json["part"] as String, json['track'] as int, ]; } 30

Slide 31

Slide 31 text

var info = speakerInfo(io23BusanSpeaker); var name = info[0] as String; var part = info[1] as String; var track = info[2] as int; 31

Slide 32

Slide 32 text

class IO23Busan { final String name; final String part; final int track; IO23Busan(this.name, this.part, this.track); } 32

Slide 33

Slide 33 text

var io23BusanSpeaker = {'name': "Dreamwalker", "part": "Flutter", "track": 2}; IO23Busan speakerInfo(Map json) { return IO23Busan( json['name'] as String, json["part"] as String, json['track'] as int, ); } var info = speakerInfo(io23BusanSpeaker); var name = info.name; var part = info.part; var track = info.track; 33

Slide 34

Slide 34 text

(String, String, int) speakerInfo(Map json) { return ( json['name'] as String, json["part"] as String, json['track'] as int, ); } var info = speakerInfo(io23BusanSpeaker); var name = info.$1; var part = info.$2; var track = info.$3; 34

Slide 35

Slide 35 text

// method 1 var record = ('first', a: 2, b: true, 'last'); // method 2 (int x, int y, int z) point = (1, 2, 3); // method 3 ({int x, int y, int z}) point = (x: 1, y: 2, z: 3); 35

Slide 36

Slide 36 text

// pattern // Before var info = speakerInfo(io23BusanSpeaker); // Pattern var (name, part, track) = speakerInfo(io23BusanSpeaker); // Pattern var (name, _, track) = speakerInfo(io23BusanSpeaker); 36

Slide 37

Slide 37 text

// Pattern - Destructuring // Before var json = { 'user': ['Dreamwalker', "Flutter", 2] }; var name = json['user']?[0]; var track = json['track']?[1]; 37

Slide 38

Slide 38 text

// Pattern - Destructuring // After var json = { 'speaker': ['Dreamwalker', 2] }; var {"speaker": [name, track]} = json; 38

Slide 39

Slide 39 text

// Pattern - Switch body: Center( child: isVisible ? Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), _counter > 10 ? Text("10 초과") : Container(), ], ) : ListView.builder( itemBuilder: (context, index) => ListTile(), ), ), 39

Slide 40

Slide 40 text

// Pattern - Switch body: Center( child: switch (isVisible) { true => Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), switch (_counter) { var a when a > 10 => Text("10 초과"), _ => Container(), }, ], ), false => ListView.builder(itemBuilder: (_, __) => ListTile()) }), 40

Slide 41

Slide 41 text

Dart 3 Section 01 41 What's new in Dart and Flutter ● New: Class Modifiers ○ abstract ○ base ○ final ○ interface ○ sealed ○ mixin

Slide 42

Slide 42 text

sealed class Burger {} class CheeseBurger extends Burger { final int count; CheeseBurger(this.count); } class DoubleCheeseBurger extends Burger { final int count; DoubleCheeseBurger(this.count); } int calculateCheese(Burger burger) => switch (burger) { CheeseBurger(count: int c) => 1 * c, DoubleCheeseBurger(count: int c) => 1 * c, }; 42

Slide 43

Slide 43 text

sealed class AuthException implements Exception {} class EmailException extends AuthException { EmailException(this.email); final String email; } class WeakPasswordException extends AuthException {} class WrongPasswordException extends AuthException {} class UserNotFoundException extends AuthException {} 43

Slide 44

Slide 44 text

String describe(AuthException exception) { return switch (exception) { EmailException(email: final email) => 'Email already in use: $email', WeakPasswordException() => 'Password is too weak', WrongPasswordException() => 'Wrong password', UserNotFoundException() => 'User not found', }; } print(“${describe(e)}”); 44

Slide 45

Slide 45 text

Dart 3 Section 01 45 What's new in Dart and Flutter 다양한 조합.. ○ abstract ○ base ○ final ○ interface ○ sealed ○ mixin Declaration Construct? Extend? Implement? Mix in? Exhaustive? class Yes Yes Yes No No base class Yes Yes No No No interface class Yes No Yes No No final class Yes No No No No sealed class No No No No Yes abstract class No Yes Yes No No abstract base class No Yes No No No abstract interface class No No Yes No No abstract final class No No No No No mixin class Yes Yes Yes Yes No base mixin class Yes Yes No Yes No abstract mixin class No Yes Yes Yes No abstract base mixin class No Yes No Yes No mixin No No Yes Yes No base mixin No No No Yes No

Slide 46

Slide 46 text

DevTools Section 01 46 What's new in Dart and Flutter ● Perfetto ● Memory Diff

Slide 47

Slide 47 text

Material 3 brings new widgets to help create beautiful designs for every device that Flutter supports. Layouts can be quite different depending on the platform they are running on and what input devices are currently active. Deep dive into the various ways you can create with adaptive layouts, expressive color and typography, and theming the many widgets available for Material 3. Theming does not have to be hard when a design can be broken down into reusable widgets. Design for every device with Flutter and Material 3 Section 02 47

Slide 48

Slide 48 text

Section 02 48 Flutter and Material 3 https://github.com//flutter/flutter/issues/91605 Access: 2023-03-28

Slide 49

Slide 49 text

Section 02 49 Flutter and Material 3 https://github.com//flutter/flutter/issues/91605 Access: 2023-07-22

Slide 50

Slide 50 text

Section 02 50 Flutter and Material 3 https://flutter.github.io/samples/web/material_3_demo/#/ Access: 2023-07-22

Slide 51

Slide 51 text

Section 02 51 Flutter and Material 3 https://rydmike.com/flexcolorscheme/themesplayground-v7-2/#/

Slide 52

Slide 52 text

Section 02 52 Flutter and Material 3 Making Material 3 the default 2023-07-13 기준 Master channel: 현재 적용 완료 Beta 채널: 8월 중 적용 (현재 적용된것으로 보임) Stable 채널: beta 채널 적용 이후 https://github.com/flutter/flutter/issues/127064 Access: 2023-07-22

Slide 53

Slide 53 text

return MaterialApp( title: 'Flutter Demo', theme: ThemeData( useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); 53

Slide 54

Slide 54 text

Section 02 54 Flutter and Material 3 Material 3 Color Scheme

Slide 55

Slide 55 text

return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: Colors.deepPurple, ), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); 55

Slide 56

Slide 56 text

Section 02 56 Flutter and Material 3 dynamic_color https://pub.dev/packages/dynamic_color Access: 2023-07-22

Slide 57

Slide 57 text

Section 02 57 Flutter and Material 3 Typography

Slide 58

Slide 58 text

@Deprecated( 'Use displayLarge instead. ' 'This feature was deprecated after v3.1.0-0.0.pre.', ) TextStyle? headline1, @Deprecated( 'Use displayMedium instead. ' 'This feature was deprecated after v3.1.0-0.0.pre.', ) TextStyle? headline2, 58

Slide 59

Slide 59 text

Section 02 59 Flutter and Material 3 Typography https://pub.dev/packages/google_fonts Access: 2023-07-22

Slide 60

Slide 60 text

Section 02 60 Flutter and Material 3 Adaptive scaffold https://pub.dev/packages/flutter_adaptive_scaffold Access: 2023-07-22

Slide 61

Slide 61 text

Firebase provides you with APIs and tools to build, release, and operate full-stack apps for many platforms, including Flutter. In this session you will learn about the latest improvements that we made and what we’re working on for the future. What's new in Firebase's Flutter Section 03 61

Slide 62

Slide 62 text

● For Cloud and Firebase, that means offering packages like FlutterFire that make it easy to complement Flutter apps with our cloud backend, as well as documentation and guidance for hosting Dart in the cloud. It includes supporting Cloud account teams who are selling full-stack solutions to their customers. ● For Android, we help customers “shift left”: giving iOS developers a path to build on a supported Google stack that also targets Android. This also includes the sizable revenue stream we are building for in-app purchases with Play. In 2023, we will continue to enthusiastically build pathways to help developers light up on Android, in collaboration with the Android team. ● For Ads, we continue to partner on breadth opportunities, with first-party support for a broad set of mobile ads formats, targeted campaigns around casual gaming, and product investments around deep-linking. In 2023, we will broadly roll out our work with news publishers to offer a custom toolkit that incorporates ads and Firebase. ● For Geo, we will partner with them to grow our maps plugin, including adding support for client-side directions, and integration into the Google Maps developer docs. Flutter as an on-ramp for Google Section 03 62 Source: Flutter 2023 Strategy What's new in Firebase's Flutter Strategy

Slide 63

Slide 63 text

Document Update Section 03 63 https://firebase.flutter.dev/ https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios What's new in Firebase's Flutter

Slide 64

Slide 64 text

Package Support Section 03 64 What's new in Firebase's Flutter ● Firebase Crashlytic 개선 Access: 2023-07-22

Slide 65

Slide 65 text

Platform Support Section 03 65 What's new in Firebase's Flutter ● FlutterFire CLI 업데이트 ● Firbase support for windows development workflows ● C++ ● Desktop Support

Slide 66

Slide 66 text

Platform Support Section 03 66 https://github.com/FirebaseExtended/flutterfire_desktop Access: 2023-07-22 What's new in Firebase's Flutter dependencies: firebase_auth: ^3.1.5 firebase_auth_desktop: ^0.1.1-dev.0 firebase_core: ^1.9.0 firebase_core_desktop: ^0.1.1-dev.0

Slide 67

Slide 67 text

Flutter’s new rendering engine was developed with the goal of eliminating shader compilation jank and providing predictable performance. This talk will discuss the design of Impeller and how it fits into the broader architecture for Flutter. This includes a tour of Impeller’s sub frameworks, and a demonstration of how lower level APIs are used in Flutter applications. The session will also discuss how Impeller enables new experiences, like 3D support. Flutter's new rendering engine Section 04 67

Slide 68

Slide 68 text

Section 04 68 Flutter's new rendering engine Flutter Framework Flutter Engine Dart Runtime Platform Channel Renderer Embedder System Events

Slide 69

Slide 69 text

Section 04 69 Flutter's new rendering engine

Slide 70

Slide 70 text

Section 04 70 Flutter's new rendering engine

Slide 71

Slide 71 text

Section 04 71 Flutter's new rendering engine What’s Jank? ● Slow Frame ● FPS (Frame per second ) = 초당 프레임 수 ● 60 FPS 는 1초에 60 개의 프레임을 출력 ● 1개의 프레임을 렌더링하는데 걸리는 속도는? ○ 16ms 내외로 처리가 가능해야함 60fps의 경우 16ms 내로 처리하는지 못하는 경우 중간 중간 프레임 처리를 놓치는 경우 UI Jank, 프레임 드롭

Slide 72

Slide 72 text

Section 04 72 Flutter's new rendering engine ● Engine 개발의 Jank관련 내역은 ● 2015년도에도 도출되었던 내역. ● Google Nust Hub ○ Flutter ● GPay ○ Flutter

Slide 73

Slide 73 text

Section 04 73 Flutter's new rendering engine My app sits on the splash screen for about 6 seconds on first launch, which is a really poor first impression for my users.

Slide 74

Slide 74 text

Skia’s shader generation and compilation happens in sequence with the frame workload. Impeller generates and compiles all necessary shaders when we build the Flutter Engine. Therefore apps running on Impeller already have all the shaders they need, and the shaders can be used without introducing jank into animations. Skia Impeller What’s Shader Compilation Jank? Section # 74 Flutter's new rendering engine

Slide 75

Slide 75 text

Impeller Section 04 75 Flutter's new rendering engine ● A rendering engine for Flutter. ● Replaces Skia in Flutter Engine. Impeller available by default on iOS

Slide 76

Slide 76 text

Impeller Section 04 76 Flutter's new rendering engine

Slide 77

Slide 77 text

Impeller Section 04 77 Flutter's new rendering engine Per Vertex Shader Per pixel Shader o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o

Slide 78

Slide 78 text

o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o Impeller Section 04 78 Flutter's new rendering engine o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o

Slide 79

Slide 79 text

// info.plist FLTEnableImpeller 79

Slide 80

Slide 80 text

// AndroidManifest.xml // under tag 80

Slide 81

Slide 81 text

Impeller Scene Section 04 81 Flutter's new rendering engine

Slide 82

Slide 82 text

Flutter apps on the web are loading faster and have better integration with HTML in the latest release. We will also be sharing our progress on compiling Flutter web apps to WebAssembly. Evolving Flutter's support for the web Section 05 82

Slide 83

Slide 83 text

1. Enable "hot reload" (not just "hot restart") for Flutter Web #53041 2. Improve the indexability (SEO) of Flutter apps on the web (#46789) 3. Server-side rendering for Flutter web (#47600) 4. main.dart.js is too large #46589 Flutter for the Web Section 05 83 ● Flutter as the first of a new breed of frameworks that target WebGL and Wasm and leave HTML behind. ● Flutter for web, as currently designed, is fundamentally a client-side technology. ● Dart is compiled to JS (or maybe one day Wasm, we're looking into that in the coming year).

Slide 84

Slide 84 text

1. Compress canvasKit size 2. Compress font size 3. Element Embedding 4. WASM(WebAssembly) 5. Fragment Shaders for Web Flutter for the Web Section 05 84

Slide 85

Slide 85 text

Section 05 85 Evolving Flutter's support for the web

Slide 86

Slide 86 text

Section 05 86 로컬에서 기본 카운터 앱 로딩 0.3~0.4초 정도 서버, 인터넷 환경에 따라 다를 수 있음. Evolving Flutter's support for the web

Slide 87

Slide 87 text

jaichang@PARKui-MacBookPro untitled1 % flutter build web --release Font asset "CupertinoIcons.ttf" was tree-shaken, reducing it from 283452 to 1272 bytes (99.6% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app. Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 7652 bytes (99.5% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app. 87

Slide 88

Slide 88 text

Section 05 88 Evolving Flutter's support for the web

Slide 89

Slide 89 text

Section 05 89 Evolving Flutter's support for the web Source: FLUTTER, DART, AND WASM-GC: A NEW MODEL FOR WEB APPLICATIONS

Slide 90

Slide 90 text

Section 05 90 Evolving Flutter's support for the web Source: FLUTTER, DART, AND WASM-GC: A NEW MODEL FOR WEB APPLICATIONS

Slide 91

Slide 91 text

Section 05 91 Evolving Flutter's support for the web Source: FLUTTER, DART, AND WASM-GC: A NEW MODEL FOR WEB APPLICATIONS

Slide 92

Slide 92 text

// preview Wasm and WebAssembly garbage collection (WasmGC) in the master channel. jaichang@PARK-MacBookPro % flutter channel master % flutter create web_wasm % cd web_wasm 92

Slide 93

Slide 93 text

// build a web application with Wasm jaichang@PARK-MacBookPro web_wasm % flutter build web --wasm 93

Slide 94

Slide 94 text

Section 05 94 Evolving Flutter's support for the web

Slide 95

Slide 95 text

Fragment Shaders for the Web Section 05 95 https://codelabs.developers.google.com/codelabs/flutter-nex t-gen-uis?hl=ko#0 Shader Support Evolving Flutter's support for the web

Slide 96

Slide 96 text

Fragment Shaders for the Web Section 05 96 Shader Support Evolving Flutter's support for the web

Slide 97

Slide 97 text

Learn how Flutter on the Raspberry Pi enables makers to build exciting new embedded user interfaces. The Raspberry Pi was introduced as a tool to teach computer science, but since its introduction has been a staple in every maker’s toolbox. It’s been used as the basis for maker projects such as IoT devices, game emulators, and kiosks. So this is the answer to "What would a Flutter & Raspberry Pi game console look like?" Flutter, Dart, and Raspberry Pi Section 06 97

Slide 98

Slide 98 text

Section 06 98 Flutter, Dart, and Raspberry Pi Raspberry Pi BCM2835 Broadcom BCM2711, Quad core Cortex-A72 (ARM v8) 64-bit SoC @ 1.8GHz BCM54213PE Samsung LPDDR4 RAM, Cypress CYW43455

Slide 99

Slide 99 text

Section 06 99 Flutter, Dart, and Raspberry Pi Raspberry Pi ● OS(운영체제)를 올릴 수 있는 하드웨어 ● 충분한 메모리 ● 모니터 & 디스플레이 연결이 가능 ● 소형 데스크톱 컴퓨터

Slide 100

Slide 100 text

Section 06 100 Flutter, Dart, and Raspberry Pi Google Nest Hub Fuchsia OS Flutter Embedded System

Slide 101

Slide 101 text

Section 06 101 Flutter, Dart, and Raspberry Pi 5-6만원대

Slide 102

Slide 102 text

Section 06 102 Flutter, Dart, and Raspberry Pi ● Flutter ● Flame ● Doodle Dash

Slide 103

Slide 103 text

Section 06 103 Flutter, Dart, and Raspberry Pi 디스플레이 각종 버튼 사용자 입력 OS Flutter App 버튼 동작 인식

Slide 104

Slide 104 text

Section 06 104 Flutter, Dart, and Raspberry Pi Access 2023-07-22

Slide 105

Slide 105 text

// Get the current button state final button = gpio.input(11, Pull.up); print('Button state: ${await button.value}'); 105

Slide 106

Slide 106 text

final subscription = button.values .transform(Debouncer(lastValue, debounce)) .listen((bool newValue) { print('New button state: $newValue'); }); 106

Slide 107

Slide 107 text

Section 06 107 Flutter, Dart, and Raspberry Pi Flutter Embedded https://youtu.be/jW3pqIpQtQE 2022-03-05

Slide 108

Slide 108 text

Section 06 108 Flutter, Dart, and Raspberry Pi Flutter Embedded https://youtu.be/jW3pqIpQtQE 2022-03-05

Slide 109

Slide 109 text

Section 06 109 Flutter, Dart, and Raspberry Pi Flutter 💙 Embedded https://speakerdeck.com/itsmedreamwalker/o-extended-2023-incheon-bagjecang

Slide 110

Slide 110 text

// 3.13.2 Release SDK 3.13 Section 07 110 Stable

Slide 111

Slide 111 text

Section 07 111 Release 3.13 Stable Framework ● Update ListTile text defaults to use ColorScheme ○ #128581 ● Add onSubmitted property to SearchBar ○ #129365 ● [framework] Add textField OCR support for framework side ○ #96637 Release SDK 3.13 Stable

Slide 112

Slide 112 text

Section 07 112 Release 3.13 Stable [framework] Add textField OCR support for framework side ○ #96637 Release SDK 3.13 Stable

Slide 113

Slide 113 text

Section 07 113 Release SDK 3.13 Release 3.13 Stable Improved foldable support Stable

Slide 114

Slide 114 text

Section 07 114 Release SDK 3.13 Release 3.13 Stable Platform adaptive dialog 1. AlertDialog.adaptive() 2. RadioListTile.adaptive() Stable

Slide 115

Slide 115 text

Section 07 115 Release SDK 3.13 Release 3.13 Stable AppLifeCycleListener Stable

Slide 116

Slide 116 text

Section 07 116 Release SDK 3.13 Release 3.13 Stable New support targets Flutter now supports targeting Android 14/ API 34. While we are still working on a few new features in Android 14 (i.e. predictive back navigation), Preparing for iOS 17 and Xcode 15 With the impending release of iOS 17 and Xcode 15, users who desire to develop using this toolchain will need to be on Flutter 3.13. In addition, when downloading Xcode 15, make sure you also download the iOS 17 simulator. Stable

Slide 117

Slide 117 text

Section 07 117 Release 3.13 Stable Desktop ● [Impeller] allowing enabling Impeller on macOS. ○ in flutter/engine#42639 ● [macOS] Add platformview creation parameter support ○ in flutter/engine#42607 Release SDK 3.13 Stable

Slide 118

Slide 118 text

Section 07 118 Release 3.13 Stable Release SDK 3.13 Stable

Slide 119

Slide 119 text

Section 07 119 Release SDK 3.13 Release 3.13 Stable Web ● Remove /#/ from home page URL ○ flutter/engine#42598 ● Move webOnlyAssetManager to dart:ui_web ○ flutter/engine#42642 ● Move web-only initialization APIs to dart:ui_web ○ flutter/engine#43111 Stable

Slide 120

Slide 120 text

Section 08 120 Multi-Window

Slide 121

Slide 121 text

Section 08 121 Multi-Window https://docs.google.com/document/d/1Z7Qrb08dOnfB8IxPgsyujVn4MsDcYPUUku9CeF70_S0/edit#heading=h.xza97bbt7w4f Access 2023-07-22

Slide 122

Slide 122 text

Section 08 122 Multi-Window Access 2023-07-22

Slide 123

Slide 123 text

Section 08 123 Two Dimensional https://dartpad.dev/?id=4424936c57ed13093eb389123383e894

Slide 124

Slide 124 text

Section 08 124 New slivers https://dartpad.dev/?id=6e2b7245063001576a3a83adb23f1121

Slide 125

Slide 125 text

Section 08 125 Flutter 3.13 hotfix 3.13.1 ● flutter/132711 - Fix IconTreeShakerException: Font subsetting failed with exit code 255 ● flutter/132803 - Fix Xcode 15 build failure due to DT_TOOLCHAIN_DIR 3.13.2 ● flutter/132764 - Fixes lower bound of children from TwoDimensionalChildBuilderDelegate.

Slide 126

Slide 126 text

Summary Section 09 126

Slide 127

Slide 127 text

1. 🤔 Custom asset transformers, because they enable some performance improvements. 2. ✅ Efficient 2D scrolling widgets (e.g. tables and trees), to improve the performance of applications with this kind of interface. 3. ✅ Multiple windows, especially for desktop platforms, because this is a very highly requested feature. 4. 🤔 Platform Views on macOS and Windows, by popular demand. 5. 🤔 Drag and drop, also by popular demand. 6. ✅ Wireless debugging on iOS, our second-most-requested feature. 7. 🤔 Custom "flutter create" templates, which makes it much easier for third-parties (e.g. the Flame engine) to bootstrap developers. 8. ✅ Supporting element embedding (see also #32329), which allows Flutter content to be added to any standard web

, by popular demand. Engineering Roadmap Features Summary 127

Slide 128

Slide 128 text

Section 09 128 ● Dart 3 ○ Record & Patterns ○ Class Modifiers ● Flutter 3.10 ○ Material 3 ○ Shader support web ○ Impeller available by default on iOS ● FlutterFire (Firebase) ○ New Documents ○ Update Firebase Crashlytics ● Flutter Web 💜 Wasm ○ Master Channel ○ Wasm GC ○ Fragment Shaders ● Flutter 3.13 Summary

Slide 129

Slide 129 text

Thank You JaiChang Park he/him GDG Golang Korea / Flutter Seoul 129