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

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

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

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

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

NavigationBar Flutter 3.10 NavigationDrawer

SearchBar Flutter 3.10 SearchAnchor

Secondary Tab Bar Flutter 3.10 BottomSheet

DatePicker Flutter 3.10 TimePicker

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

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

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

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

Wonderous Flutter 3.10

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

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

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

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

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

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

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

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

複数の値を返せるようになり ました。 以前は単一の値のみだったた め、クラスにまとめるなどが必 要でした。 (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

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

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

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