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

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

JaiChangPark
September 02, 2023

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

링크: https://festa.io/events/3820
컨퍼런스명: I/O Extended 2023 Cloud Busan & Busan
주제: Flutter Google I/O 2023 Recap Busan Edition 박제창

JaiChangPark

September 02, 2023
Tweet

More Decks by JaiChangPark

Other Decks in Programming

Transcript

  1. Flutter
    Flutter
    Google I/O 23
    Recap
    1
    Busan Edition

    View Slide

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

    View Slide

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

    View Slide

  4. Dreamus Company
    4

    View Slide

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

    View Slide

  6. GDG Golang Korea
    6

    View Slide

  7. Flutter Seoul
    7
    Flutter Seoul
    Flutter Songdo
    Flutter Daegu

    View Slide

  8. Flutter Seoul
    Flutter Seoul
    Discord
    Open
    Kakaotalk

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 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

    View Slide

  13. Flutter
    Architecture
    Layers
    Intro
    13

    View Slide

  14. 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

    View Slide

  15. 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

    View Slide

  16. Intro
    16

    View Slide

  17. Intro
    17

    View Slide

  18. 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

    View Slide

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

    View Slide

  20. 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

    View Slide

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

    View Slide

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

    View Slide

  23. 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

    View Slide

  24. 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

    View Slide

  25. 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.

    View Slide

  26. 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

    View Slide

  27. 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 수행 필요

    View Slide

  28. 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

    View Slide

  29. 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

    View Slide

  30. 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

    View Slide

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

    View Slide

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

    View Slide

  33. 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

    View Slide

  34. (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

    View Slide

  35. // 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. // 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

    View Slide

  40. // 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

    View Slide

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

    View Slide

  42. 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

    View Slide

  43. 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

    View Slide

  44. 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

    View Slide

  45. 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

    View Slide

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

    View Slide

  47. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. 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

    View Slide

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

    View Slide

  54. Section 02
    54
    Flutter and Material 3
    Material 3 Color Scheme

    View Slide

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

    View Slide

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

    View Slide

  57. Section 02
    57
    Flutter and Material 3
    Typography

    View Slide

  58. @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

    View Slide

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

    View Slide

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

    View Slide

  61. 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

    View Slide

  62. ● 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

    View Slide

  63. 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

    View Slide

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

    View Slide

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

    View Slide

  66. 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

    View Slide

  67. 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

    View Slide

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

    View Slide

  69. Section 04
    69
    Flutter's new rendering engine

    View Slide

  70. Section 04
    70
    Flutter's new rendering engine

    View Slide

  71. 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, 프레임
    드롭

    View Slide

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

    View Slide

  73. 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.

    View Slide

  74. 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

    View Slide

  75. 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

    View Slide

  76. Impeller
    Section 04
    76
    Flutter's new rendering engine

    View Slide

  77. 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

    View Slide

  78. 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

    View Slide

  79. // info.plist
    FLTEnableImpeller

    79

    View Slide

  80. // AndroidManifest.xml
    // under tag
    android:name="io.flutter.embedding.android.EnableImpeller"
    android:value="true" />
    80

    View Slide

  81. Impeller
    Scene
    Section 04
    81
    Flutter's new rendering engine

    View Slide

  82. 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

    View Slide

  83. 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).

    View Slide

  84. 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

    View Slide

  85. Section 05
    85
    Evolving Flutter's support for the web

    View Slide

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

    View Slide

  87. 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

    View Slide

  88. Section 05
    88
    Evolving Flutter's support for the web

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  92. // 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

    View Slide

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

    View Slide

  94. Section 05
    94
    Evolving Flutter's support for the web

    View Slide

  95. 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

    View Slide

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

    View Slide

  97. 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

    View Slide

  98. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  110. // 3.13.2
    Release SDK 3.13
    Section 07
    110
    Stable

    View Slide

  111. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  115. Section 07
    115
    Release SDK 3.13
    Release 3.13 Stable
    AppLifeCycleListener
    Stable

    View Slide

  116. 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

    View Slide

  117. 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

    View Slide

  118. Section 07
    118
    Release 3.13 Stable
    Release SDK 3.13 Stable

    View Slide

  119. 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

    View Slide

  120. Section 08
    120
    Multi-Window

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  125. 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.

    View Slide

  126. Summary
    Section 09
    126

    View Slide

  127. 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

    View Slide

  128. 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

    View Slide

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

    View Slide