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

Flutter Google I/O 2023 Recap 박제창 @I/O Extended...

Flutter Google I/O 2023 Recap 박제창 @I/O Extended 2023 Seoul

Flutter Google I/O 2023 Recap 박제창 @I/O Extended 2023 Seoul

https://festa.io/events/3683

JaiChangPark

July 29, 2023
Tweet

More Decks by JaiChangPark

Other Decks in Programming

Transcript

  1. 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 9
  2. 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 <div>, by popular demand. Engineering Roadmap Features Intro 12
  3. I/O FLIP 15 An AI-designed card game powered by Google,

    built for Google I/O 2023 • https://flip.withgoogle.com/#/ • https://github.com/flutter/io_flip
  4. 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 17
  5. 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 19 What's new in Dart and Flutter 📌 Section Pick 📌 Section Pick
  6. 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 20 What's new in Dart and Flutter
  7. Dart 3 Section 01 21 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
  8. Dart 3 Section 01 22 What's new in Dart and

    Flutter • 100% Sound Null Safety ◦ Null Safety는 Dart 2.12 버전때 소개되어 약 2년정도 시간 경과 ◦ dart migrate tool 제거 → SDK 2.19 사용하여 migrate 수행 필요
  9. Dart 3 Section 01 23 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
  10. Dart 3 Section 01 24 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
  11. var io23SeoulSpeaker = { 'name': "Dreamwalker", "part": "Flutter", "track": 2,

    }; List<Object> speakerInfo(Map<String, dynamic> json) { return [ json['name'] as String, json["part"] as String, json['track'] as int, ]; } 25
  12. var info = speakerInfo(io23SeoulSpeaker); var name = info[0] as String;

    var part = info[1] as String; var track = info[2] as int; 26
  13. class IO23Seoul { final String name; final String part; final

    int track; IO23Seoul(this.name, this.part, this.track); } 27
  14. var io23SeoulSpeaker = {'name': "Dreamwalker", "part": "Flutter", "track": 2}; IO23Seoul

    speakerInfo(Map<String, dynamic> json) { return IO23Seoul( json['name'] as String, json["part"] as String, json['track'] as int, ); } var info = speakerInfo(io23SeoulSpeaker); var name = info.name; var part = info.part; var track = info.track; 28
  15. (String, String, int) speakerInfo(Map<String, dynamic> json) { return ( json['name']

    as String, json["part"] as String, json['track'] as int, ); } var info = speakerInfo(io23SeoulSpeaker); var name = info.$1; var part = info.$2; var track = info.$3; 29
  16. // 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); 30
  17. // pattern // Before var info = speakerInfo(io23SeoulSpeaker); // Pattern

    var (name, part, track) = speakerInfo(io23SeoulSpeaker); // Pattern var (name, _, track) = speakerInfo(io23SeoulSpeaker); 31
  18. // Pattern - Destructuring // Before var json = {

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

    'speaker': ['Dreamwalker', 2] }; var {"speaker": [name, track]} = json; 33
  20. // Pattern - Switch body: Center( child: isVisible ? Column(

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

    true => Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), switch (_counter) { var a when a > 10 => Text("10 초과"), _ => Container(), }, ], ), false => ListView.builder(itemBuilder: (_, __) => ListTile()) }), 35
  22. Dart 3 Section 01 36 What's new in Dart and

    Flutter • New: Class Modifiers ◦ abstract ◦ base ◦ final ◦ interface ◦ sealed ◦ mixin
  23. 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, }; 37
  24. 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 {} 38
  25. 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)}”); 39
  26. Dart 3 Section 01 40 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
  27. 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 42
  28. Section 02 47 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
  29. return MaterialApp( title: 'Flutter Demo', theme: ThemeData( useMaterial3: true, ),

    home: const MyHomePage(title: 'Flutter Demo Home Page'), ); 48
  30. return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed( seedColor:

    Colors.deepPurple, ), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); 50
  31. @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, 53
  32. 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 56
  33. • 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 57 Source: Flutter 2023 Strategy What's new in Firebase's Flutter Strategy
  34. Package Support Section 03 59 What's new in Firebase's Flutter

    • Firebase Crashlytic 개선 Access: 2023-07-22
  35. Platform Support Section 03 60 What's new in Firebase's Flutter

    • FlutterFire CLI 업데이트 • Firbase support for windows development workflows • C++ • Desktop Support
  36. Platform Support Section 03 61 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
  37. 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 62
  38. Section 04 63 Flutter's new rendering engine Flutter Framework Flutter

    Engine Dart Runtime Platform Channel Renderer Embedder System Events
  39. Section 04 66 Flutter's new rendering engine What’s Jank? •

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

    Jank관련 내역은 • 2015년도에도 도출되었던 내역. • Google Nust Hub ◦ Flutter • GPay ◦ Flutter
  41. Section 04 68 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.
  42. 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 # 69 Flutter's new rendering engine
  43. Impeller Section 04 70 Flutter's new rendering engine • A

    rendering engine for Flutter. • Replaces Skia in Flutter Engine. Impeller available by default on iOS
  44. Impeller Section 04 72 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
  45. 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 73 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
  46. 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 76
  47. 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 77 • 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).
  48. 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 78
  49. Section 05 80 로컬에서 기본 카운터 앱 로딩 0.3~0.4초 정도

    서버, 인터넷 환경에 따라 다를 수 있음. Evolving Flutter's support for the web
  50. 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. 81
  51. Section 05 83 Evolving Flutter's support for the web Source:

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

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

    FLUTTER, DART, AND WASM-GC: A NEW MODEL FOR WEB APPLICATIONS
  54. // preview Wasm and WebAssembly garbage collection (WasmGC) in the

    master channel. jaichang@PARK-MacBookPro % flutter channel master % flutter create web_wasm % cd web_wasm 86
  55. Fragment Shaders for the Web Section 05 90 Shader Support

    Evolving Flutter's support for the web
  56. 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 91
  57. Section 06 92 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
  58. Section 06 93 Flutter, Dart, and Raspberry Pi Raspberry Pi

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

    Hub Fuchsia OS Flutter Embedded System
  60. Section 06 97 Flutter, Dart, and Raspberry Pi 디스플레이 각종

    버튼 사용자 입력 OS Flutter App 버튼 동작 인식
  61. // Get the current button state final button = gpio.input(11,

    Pull.up); print('Button state: ${await button.value}'); 99
  62. Section 06 101 Flutter, Dart, and Raspberry Pi Flutter Embedded

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

    https://youtu.be/jW3pqIpQtQE 2022-03-05
  64. Section 06 103 Flutter, Dart, and Raspberry Pi Flutter 💙

    Embedded https://festa.io/events/3780 Upcoming
  65. Section 07 105 Release 3.13 beta 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 Beta
  66. Section 07 106 Release 3.13 beta 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 Beta
  67. Section 07 107 Release SDK 3.13 Release 3.13 beta 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 Beta
  68. Section 09 112 • 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 Summary