Flutter 3 での変化点の要約

Flutter 3 での変化点を知りたい！

本記事ではそんな要望にお答えします。

2022年5月12日に行われたFlutter 3のアップデート内容について、
リリースノートのブログを適宜情報を加えながら要約して紹介します。

本記事を読めば、日本語でFlutter 3についての理解を深められるはずです。

ぜひ読んでみてください！

参考記事
導入
全てのデスクトッププラットフォームへの対応
モバイルのアップデート
Web のアップデート
1. 画像デコーディング
2. Web アプリのライフサイクル
ツールのアップデート
その他エキサイティングなアップデート
破壊的変更
まとめ
編集後記（2022/5/12）

参考記事

本記事の大元となる記事はこちらです。

What’s new in Flutter 3

Deep dive into our latest release, including macOS and Linux stable, performance improvements, and more!

細かいニュアンス等はこちらの記事で読んだほうが理解しやすいので、
気になる方はぜひこちらを読んでみてください。

以下、要約となります。

導入

Flutter のstable リリースの時が来ました。
Flutter 3について発表できることを非常に誇りに思います！
たった3ヶ月前に、WindowsへのFlutterのサポートを発表したばかりでした。
本日、Windowsに追加して、macOSとLinuxに対するFlutter の Stable サポートを発表します！

Flutter コントリビューターの懸命な働きに感謝します。
5248ものプルリクエストがマージされました。

このリリースで、いくつかのエキサイティングな発表があります。
この発表には、macOSとLinuxのFlutterサポート、
重要なパフォーマンスの向上、
モバイルとウェブのアップデート、
等々が含まれます。
付け加えて、古いバージョンのWindowsに対するサポートの削減や、
いくつかの破壊的変更をお知らせします。
それでは早速紹介していきましょう！

全てのデスクトッププラットフォームへの対応

Linux と macOSの対応がStable となり、以下の機能が含まれます。

カスケードメニューとmacOSのシステムメニューバーへのサポート

PlatformMenuBar Widgetにて、
macOSでプラットフォームで描画されたメニューバーを作れるようになります。
これは、プラットフォーム独自のメニューの挿入と、
macOSのアプリケーションメニューでの表示の管理をサポートします。

カスケードメニューとは、メニューの中で更に詳細のメニューを出すメニューのことです。
元記事でデモのGifが掲載されているので、併せてご確認ください。

すべてのデスクトッププラットフォームでの国際的なテキスト入力に対する、完全サポート

中国語や日本語、韓国語のような、テキスト入力システム(IMEs)を利用する言語を含む、
国際的なテキスト入力が全てのデスクトッププラットフォームで完全対応されます。
これにはSogou やGoogle 日本語入力のようなサードパーティの入力システムも含みます。

すべてのデスクトッププラットフォームでのアクセシビリティ

Flutter for Windows , macOS, Linux にて、
画面読み上げやアクセス可能なナビゲーション、色の変更など、
アクセシビリティサービスがサポートされます。

macOSでのユニバーサルなバイナリがデフォルトに

Flutter 3 似て、 FlutterのmacOS デスクトップアプリは、
現存のIntelベースのMacと、Apple最新のApple Silliconのデバイス、
両者に対するネイティブなサポートと共に、ユニバーサルなバイナリにてビルドされます。

開発に対しWindows 7/8 が非推奨に

Flutter 3のリリースによって、開発に推奨されるWindowsのバージョンを
Windows 10 に引き上げます。
Windows 7 , 8 , 8.1 のような古いバージョンでの開発を廃止しない一方で、
これらのバージョンはMicrosoftによってもはやサポートされていなく、
これらのリリースに対し限定的なテストを提供します。
古いバージョンに対しては、引き続き”best effort “のサポートを提供し続け、
ユーザーにはアップグレードを進めます。

注：Windows 7, 8 上で実行されるFlutter アプリに対するサポートは提供し続けます。
今回の変更は言及された開発環境のみ影響します。

モバイルのアップデート

モバイルプラットフォームに対するアップデートは以下です。

折りたたみスマホに対するサポート

Flutter 3のリリースにより、折りたたみのモバイルデバイスがサポートされます。
Microsoftが先頭に立ったコラボレーションにより、
新たな機能やWidgetにより、折りたたみデバイスに対して
ダイナミックで楽しい経験をすることができます。

今回のアップデートの一部として、
MediaQueryにDisplayFeaturesのリストが含まれるようになりました。
DisplayFeaturesはヒンジやカットアウトのようなデバイスの要素の境界や状態を表します。
追加して、DisplayFeatureSubScreen WidgetはDisplayFeaturesの境界にかぶらないようにWidgetを配置します。このWidgetはフレームワークのデフォルトのダイアログやポップアップに統合されていて、意識せずともFlutterに反映されるようになっています。
Demo アプリのリンクはこちら。

iOS の可変リフレッシュレートへの対応

Flutterは今、iPhone 13 Pro , iPad Proに含まれているProMotion ディスプレイでの、
iOSデバイスの可変リフレッシュレートに対応します。
これらのデバイスでは、今までは60hzが限界でしたが、
120hzに達するリフレッシュレートでFlutterアプリを描画することが可能となります。
この結果、スクロールのような速いアニメーション中でもよりスムーズな体験を提供します。
詳細はこちら。

iOS のリリースの単純化

iOSアプリのリリースをより単純化するため、
flutter build ipa コマンドに新たなオプションが追加されました。
AppStore や TestFlight にアップロードしようとする際、
Xcodeのアーカイブ(.xarchiveファイル)とapp bundle(.ipaファイル)を作成するため、
flutter build ipa を実行します。
オプションとして、--export-method ad-hoc, --export- method development ,
--export-method enterpriseを追加できるようになります。
一度app bundle が作成されたら、Apple Transport macOS appや
コマンドラインでのxcrun altool（App Store Connect API キーの認証手順に対しては man altool を実行）を通してAppleへアップロードします。
アップロード後、Test Flightや、AppStoreであなたのアプリがリリースされ、
利用可能となります。
表示名やアプリアイコンなど、Xcode プロジェクトの初期設定の後、
アプリをリリースするのにもはやXcodeを開く必要はありません。

--export-method ad-hoc, --export- method development ,
--export-method enterpriseにより、
AppStoreやTest Flight以外の配布先を選択できるようになったようです。

Gradle バージョンのアップデート

Flutter ツールを利用して新たなプロジェクトを作るのなら、
生成ファイルがGradle と Android Gradle プラグインの
最新バージョンを使用していることを注意する必要があります。
現行のプロジェクトに対しては、Gradleのバージョンを7.4に、
Android Gradle プラグインのバージョンを7.1.2に手動で上げる必要があります。

32-bit iOS/ iOS 9 / iOS 10のサポートの終了間近

2022年2月の2.10 のstable リリースの際に、告知したように、32-bit のiOSデバイスや、
iOS バージョン9, 10のFlutterのサポートが終了予定です。
この変更は、iPhone 4S, iPhone 5, iPhone 5G, 第2、第3、第4世代のiPadに影響します。
Flutter 3はこれらのiOSバージョンとデバイスをサポートする最後のstable リリースとなります。
詳細はこちら。

Web のアップデート

Web アプリへのアップデートは以下となります。

画像デコーディング

Flutter web は現在、ブラウザでサポートされているImageDecorder APIを
自動的に検知し、利用しています。
現在、最もChromimum – basedなブラウザ(Chrome, Edge, Opera, Samsung Browser など)にこのAPIを追加しています。

新たなAPIはブラウザのビルトインの画像コーデックを利用し、
非同期的にメインスレッドから切り離して画像をデコードします。
この画像デコーディングのスピードアップは2倍にもなり、
決してメインスレッドをブロックせず、
画像に寄って以前発生していた全てのジャンクを排除します。

Web アプリのライフサイクル

新たなFlutter Web アプリに対するライフサイクルAPI は、
Flutterアプリの自動実行プロセスを、ホスティングしているHTML ページから
管理するための柔軟性を提供します。
また、Lighthouseがアプリのパフォーマンスを解析するのを助けます。
以下のような頻度高く要求されるシナリオを含む、多くのユースケースに適用されます。

スプラッシュスクリーン
ローディングインディケーター
Flutterアプリの前に表示されるプレーンHTMLのインタラクティブなランディングページ

詳細はこちら。

ツールのアップデート

FlutterとDartのツールのアップデートは以下となります。

lint パッケージの更新

lint パッケージのVersion 2.0 がリリースされました。

flutter_lints 2.0.0 | Dart Package

lints 2.0.0 | Dart Package

Official Dart lint rules. Defines the 'core' and 'recommended' set of lints suggested by the Dart team.

Flutter 3 でflutter create によって生成されるアプリは自動的にv2.0のlintが設定されます。
現行のアプリやパッケージ、プラグインでも、
Flutterの世界で最も最新で偉大なベストプラクティスに追従した
v2.0 へのマイグレーションが推奨されます。
このアップグレードは、flutter pub upgrade --major-versions flutter_lintsにて実行されます。

v2.0 で新しく追加されたlint のワーニングの殆どは、自動で修正されます。
pubspec.yamlでパッケージのバージョンをアップグレードした後、
dart fix --apply 実行することで、ほとんどのlint のワーニングが自動的に修正されます。
（いくつかのワーニングは手動で修正が必要です。）
package: flutter_lintsを使用していない場合は、
マイグレーションガイドに沿ってマイグレーションが可能です。

パフォーマンスの向上

部分再描画をサポートするAndroid デバイスにて、部分再描画できるようになりました。
この変更をローカルでテストした結果、
Pixel 4 XL デバイスのbackdrop_fileter_perfベンチマーク上で、
90番目のパーセンタイルと99番目のパーセンタイルでフレームのラスタライゼーション時間が
平均で5倍短縮されました。
一つの長方形のdirtyな領域があった際の部分再描画は、
iOS, 最新のAndroid デバイスで利用可能です。

単純な場合の不透明度のアニメーションのパフォーマンスがさらに向上されました。
特に、Opacity Widget が単一の描画プリミティブを含む場合、
Opacityによって通常呼び出される saveLayerメソッドが省略されます。
この最適化の効果を測定するために構築されたベンチマークでは、
ラスタライゼーションの時間は一桁も向上しました。
未来のリリースでは、この最適化を他のより多くのシナリオに適用することを
計画しています。

エンジンのラスターとUIスレッドは今、
Android とiOSで、他のスレッド
（例えば、Dart VM のバックグラウンドでのガーベッジコレクションスレッド）
より高い優先度で実行しています。
ベンチマークでは〜20%ビルド時間が短縮されています。

Flutter 3のリリース前、ラスターキャッシュに対するアドミッションポリシーは、
一つのピクチャーに対する描画オペレーションの回数を見るだけで、
オペレーション数が数回以上のものはキャッシュの良い候補になると仮定していました。
残念なことにこの結果実際にとても早く描画するために、
ピクチャーをキャッシュするのにエンジンがメモリを消費することとなりました。
今回のリリースで、ピクチャーの描画の複雑さを、
それが含む描画オペレーションのコストをベースに推定するメカニズムを導入しました。
これを使うことによりラスターキャッシュのアドミッションポリシーは
ベンチマーク上でのパフォーマンスの減衰はなしでメモリ使用量を減少させました。

iOSでの小さな数のアニメーションフレーム落ちを引き起こす、
フレームスケジューリングのバグの修正が行われました。

インペラー

iOSや他のプラットフォームでの初期設定でのジャンクに対処することの解決策のために、
チームは懸命に働いています。
Flutter 3のリリースで、iOSでインペラーと呼ばれる実験的な描画バックエンドを
見ることができます。
インペラーはより小さな、単純なシェーダーのセットを、
アプリが実行時にコンパイルしないように、
（これがFlutterのジャンクの大きな原因となっています。）
エンジンがビルドする時間でプレコンパイルします。
インペラーはまだ製品化されておらず、完成にはほど遠い状態です。
Flutterの機能すべてにインペラーは実装されていませんが、
進捗を共有しているflutter/galleryのでの忠実度とパフォーマンスについては、
十分に満足しています。
特に、Gallery アプリの画面遷移アニメーションで一番悪いフレームが20倍早くなりました。

インペラーはiOSの元で利用可能です。
--enavle-impeller オプションを flutter runにつけて実行するか、
Info.plistにFLTEnableImpellerフラグをtrueにセットすることで、
インペラーを試すことができます。
インペラーの開発はFlutter のmaster チャンネルで続け、
未来のリリースでさらなるアップデートを提供できることを望みます。

Android でのインライン広告

あなたがgoogle_mobile_adsパッケージを利用する時、
スクロールや画面遷移によって、ユーザーとって重要なインタラクションで、
よりよいパフォーマンスとなるべきです。
これは特に新興市場で人気のあるデバイスにて気づくことができます。
一番いい方法は、コードの変更を要求されないことです！

Flutter は Android View、一般的にプラットフォームビューと
呼ばれるViewを非同期で構成するようになりました。
これは、FlutterのラスタースレッドがAndroid Viewが、
描画されるのを待つ必要が無くなったことを意味します。
その代わりに、Flutterエンジンが画面上でそれを管理するOpenGL テクスチャを使って、
Viewを配置します。

その他エキサイティングなアップデート

Flutter エコシステムでのその他のアップデートは以下です。

Material 3

Flutter 3 では、次世代のMaterial DesignであるMaterial Design 3をサポートします。
Flutter 3 は Material 3に対しオプトインのサポートを行います。
（ダイナミックカラーや更新されたカラーシステム、
タイポグラフィーのようなMaterial Youの機能を含み、
多くのコンポーネントや、
新しいタッチリプルデザインや伸縮のオーバースクロールの効果のような、
Android 12で導入された新たなビジュアルの効果をアップデートをします。）
Material 3の機能について、
新しい”Take your Flutter app from Boring to Beautiful” CodeLabにて試すことができます。
これらの新しい機能のオプトインの仕方や、
どのコンポーネントがMaterial 3をサポートしたかについての詳細は
API ドキュメントを見てください。
現在の進行状況は、Material 3 Umbrella issueにあります。

Theme extensions

Flutter で ThemeExtensionというコンセプトのもと、
どんなものでも Material ライブラリーのThermData を追加できるようになりました。
Dart的な意味で ThemeDataをextend し、
copywith と lerp、他のメソッドを再実装することにより、
ThemeData.extensions を指定することができます。
また、パッケージ開発者によっては、ThemeExtensionsを提供することも可能です。
詳細はこちら。
サンプルはこちら。

この内容については週刊Flutter大学で記事化しています。
以下の記事を併せてご確認ください。

これらに要求をサポートするため、Googleは、
以前あったオープンソースのConsent SDK の代替として、
User Messaging Platform(UMF) SDK を提供します。
Flutterに対するGMA SDK の次期リリースでは、
パブリッシャーがユーザーの同意を獲得できるよう、
UMP SDK に対するサポートを追加します。
詳細はこちら。