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

I/O Extended 2023 - Dart と Flutter の新機能

I/O Extended 2023 - Dart と Flutter の新機能

Daichi Furiya (Wasabeef)

August 24, 2023
Tweet

More Decks by Daichi Furiya (Wasabeef)

Other Decks in Programming

Transcript

  1. Dart と Flutter の新機能
    (What's new in Dart and Flutter)
    Flutter

    View full-size slide

  2. https://www.youtube.com/watch?v=yRlwOdCK7Ho

    View full-size slide

  3. ● Material 3
    ● Impeller
    ● Web
    ● iOS
    ● Android
    Flutter 3.10
    https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73
    Flutter 3.10

    View full-size slide

  4. 最新のマテリアル デザイン仕様と
    一致するようになりました。新しいコ
    ンポーネントとテーマや変更された
    コンポーネントなどが含まれていま
    す。
    Material 3
    https://flutter.github.io/samples/web/material_3_demo/
    Flutter 3.10

    View full-size slide

  5. 画像などからカスタムスキームな
    どを作成することができるように
    なりました。
    ColorScheme
    Flutter 3.10

    View full-size slide

  6. NavigationBar
    Flutter 3.10
    NavigationDrawer

    View full-size slide

  7. SearchBar
    Flutter 3.10
    SearchAnchor

    View full-size slide

  8. Secondary Tab Bar
    Flutter 3.10
    BottomSheet

    View full-size slide

  9. DatePicker
    Flutter 3.10
    TimePicker

    View full-size slide

  10. 新しいグラフィックエンジン
    Flutter 3.10 以降では iOS のデフォルトのレンダラーとして設定されまし
    た。 iOS 用にビルドされたすべてのアプリは Impeller を使用します。こ
    れによってパフォーマンスが安定し向上しました。
    Impeller
    Flutter 3.10
    https://docs.flutter.dev/perf/impeller

    View full-size slide

  11. Impeller
    Flutter 3.10
    新しいグラフィックエンジン
    これまでの Skia ではアプリ初回起動時にシェーダーコンパイルが行われ
    初回起動時は数十フレームの欠落することがあり、それ以降はキャッ
    シュされ滑らかなアニメーションになります。
    しかし、Android はそれが可能だが iOS の場合はアプリを最初から開く
    たびに行われてしまいます。(キャッシュファイルを埋め込むこともできる
    が)
    https://docs.flutter.dev/perf/impeller

    View full-size slide

  12. 新しいグラフィックエンジン
    Skia のパフォーマンス問題を以下のように解決するために Impeller が
    作られました。
    → シェーダーコンパイルをアプリビルド時にオフラインで実行
    → アニメーションをキャプチャし、ディスクに永続化
    → Metal や Vulkan などのモダン API に対応
    → 並行処理を効果的に利用
    Impeller
    https://docs.flutter.dev/perf/impeller
    Flutter 3.10

    View full-size slide

  13. https://www.youtube.com/watch?v=_5CIATSDSPI

    View full-size slide

  14. Wonderous
    Flutter 3.10

    View full-size slide

  15. ページ内の特定の要素に Flutter Web を埋
    め込めるようになりました。
    これまではページ全体に埋め込むか
    iframe で埋め込んでました。
    レンダリングで利用している CanvasKit の
    サイズを 1/3 まで削減されました。
    未使用のフォントなどのファイルサイズ削減
    を行い、読み込み時間が改善されました。
    パフォーマンス向上 Flutter Web の埋め込み
    フラグメントシェーダーのサポートがされまし
    た。
    シェーダーのサポート
    Web
    Flutter 3.10

    View full-size slide

  16. https://flutter-web-embed.web.app
    Flutter Web でも Flutter のフラ
    グメントシェーダーをサポートを
    利用できるようになりました。
    Fragment Shaders for Web
    Flutter 3.10

    View full-size slide

  17. ケーブルなしで Flutter iOS アプリを実行及
    びホットリロードできるようになりました。
    Xcode で iOS デバイスのワイヤレス ペアリ
    ングが成功したら、flutter run を使用して実
    行できます。
    iOS 上の Flutter アプリは、広色域画像の
    正確なレンダリングをサポートできるように
    なりました。
    ワイヤレスデバッグ 広色域のサポート
    Flutter 3.10 では、SwiftUI に合わせていく
    つかのアニメーション、トランジション、カラー
    が改善されました。
    アニメーションの改善
    iOS
    Flutter 3.10

    View full-size slide

  18. CameraX のサポート
    Jetpack の CameraX を利用するこ
    とが可能になり、豊富なカメラ機能を
    簡単に追加することができるようにな
    りました。
    Android
    Flutter 3.10

    View full-size slide

  19. ● 100% sound null safety
    ● Record
    ● Patterns
    ● Class modifiers
    Dart 3
    https://medium.com/dartlang/announcing-dart-3-53f065a10635

    View full-size slide

  20. 2021 年 3 月に Flutter 2 及び Dart 2.12 がリ
    リースされ、Null Safety に対応されました。現
    在では pub.dev の上位 1000 パッケージのう
    ち 99% が Dart 3 に対応済み
    100% sound null safety
    99%
    pub.dev TOP 1000
    Dart 3

    View full-size slide

  21. Dart 3
    当時はNull safety に対応したパッケージに対して
    pub.dev で見ると Null Safety のタグがありました。

    View full-size slide

  22. Dart 3
    現在では Dart 3 に対応したパッケージに対して
    pub.dev で見ると Dart 3 compatible のタグがあります。

    View full-size slide

  23. 複数の値を返せるようになり
    ました。
    以前は単一の値のみだったた
    め、クラスにまとめるなどが必
    要でした。
    (double x, double y) geoLocation(String name) {
    if (name /= 'Mt.Fuji') {
    return (35.360, 138.717);
    } else {
    //.
    }
    }
    void main() {
    final (lat, long) = geoLocation('Mt.Fuji');
    print('Location: $lat, $long');
    }
    Dart 3
    Record
    https://medium.com/dartlang/announcing-dart-3-53f065a10635

    View full-size slide

  24. void main() {
    print(descriptionDate(DateTime.now()));
    }
    String descriptionDate(DateTime dt) {
    return switch (dt.weekday) {
    1 /> '月曜日ですね/.',
    4 /> '金曜ですね/!',
    6 /| 7 /> '土日ですね/!',
    _ /> 'ああ//.',
    };
    }
    パターンマッチングを Switch
    で利用するときに本領を発揮
    します。
    Dart 3
    Patterns
    https://medium.com/dartlang/announcing-dart-3-53f065a10635

    View full-size slide

  25. abstract class Vehicle {}
    class Car extends Vehicle {} // ⭕ 継承できる
    final class Animal {}
    class Dog extends Animal {} // ❌ 継承できない
    sealed class Editor {}
    class Vim extends Editor {}
    Editor editor = Editor(); // ❌ インスタンス化できない
    Editor vim = Vim(); // ⭕ インスタンス化できる
    Dart 3
    Class modifiers
    https://medium.com/dartlang/announcing-dart-3-53f065a10635
    クラス修飾子が増えました。
    ● base
    ● final
    ● Interface
    ● sealed

    View full-size slide

  26. Thank You
    Daichi Furiya / wasabeef
    Google Developers Expert/CyberAgent, Inc

    View full-size slide