【Flutter】2.10.0がリリースされたので分かりやすくまとめてみたよ

Dart

概要

どうも、@daiki1003です!

とうとうこの日がやって来ましたね!
Flutterメジャーアップデート、毎回楽しみな時間です笑

それでは早速行きましょー!

Windowsの安定版

Announcing Flutter for Windows
Build high-quality Windows apps that also run on mobile and web

なんと言ってもこれが目玉でしたね!
今まではWindowsアプリの開発にはフラグ制御が必要でしたがそれも必要なくなりました。

さらに、テキストやショートカットなどのキーボード操作、アクセシビリティに関する
実装も盛り沢山だとか!

僕は主にMacユーザなので恩恵を受けることは少ないかもしれないですが
Windowsファンの方にはかなり大きいアプデになってること間違いなしですね!

パフォーマンス向上

最近、Flutterのアップデートで必ずと言っていいほどパフォーマンス改善がされていて
嬉しいですね!
それだけでアプデのモチベーションになります。

dirty region management

Enable partial repaint for iOS/Metal by knopp · Pull Request #28801 · flutter/engine
This enables partial redraw for Metal on iOS. The PR itself is quite big, but it's organized in smaller commits. List which issues are fixed by this PR: flu...

要するに描画パフォーマンスの向上ですね。

今までは、 StatefulWidgetなどがsetStateすると
dirtyフラグが立って、次回の描画時に全てを再描画することで画面を更新していました。

これが一部分だけ再描画することが出来るようになったという事だと思います。

これによってGPUの使用率が90%以上が10%以下になったのだとか。

picture recording format

Consider adding a custom recording format · Issue #53501 · flutter/flutter
The custom recording format could be based on . We can use it to replace the SkPicture format to allow us to h...

Flutter2.8で独自の描画フォーマット(で合ってるかな)を採用。
不透明レイヤの描画が改善されたようです。

出典:https://medium.com/flutter/whats-new-in-flutter-2-10-5aafb0314b12

ビルド時間の短縮

e698500693603374ecc409e158f36c25bff45b12 - sdk.git - Git at Google

コンパイラがコンパイル時の最適化を行う処理を改善し、
大体10%弱改善されているとのこと。
AOTコンパイラがRTA(Rapid Type Analysis)というのを使えるようになり早くなったようですね。
RTAはReal Time Attackじゃないですよ?

iOS

よりスムーズなキーボードアニメーション

[iOS] Support keyboard animation on iOS by luckysmg · Pull Request #29281 · flutter/engine
This PR supports FlutterViewController switch keyboard with smooth animation Before: What I hav...

特段何か設定が必要ということはなく、アップデートのみで良いようです。

64bit端末のメモリ使用率削減機能

Enable compressed pointers on iOS for 64 bit architectures. by a-siva · Pull Request #30077 · flutter/engine
Enable compressed pointers on iOS for 64 bit architectures.

圧縮ポインタ、とそのまま訳して良いのかな。

64bitの端末では大量の割り当て可能なメモリ領域があるけど
iOSのほとんどのアプリで64bit分どころか32bit分すらも使わないから
圧縮しようね、という話みたいです。

Android

アプリ作成時に、最新バージョン12(APIレベル31)をデフォルトでサポート。
さらに、multidexもサポートされるのだとか。

さらに、新しいパッケージ追加時に最低バージョンを上げないといけない場合は、
Flutter Fixと言う表示がコンソールに表示され修正を手助けしてくれるみたいです。

Web

TextFieldのスクロール

Desktop edge scrolling by justinmc · Pull Request #93170 · flutter/flutter
When selection moves on desktop, the field will now scroll to view the scroll extent, like it already does on mobile. TODO: Make sure horizontal edge scrolli...

複数行のTextFieldのスクロールが正しく動作


出典:https://medium.com/flutter/whats-new-in-flutter-2-10-5aafb0314b12

non-painting platform view

Linkウィジェットなど、今まで目には見えないビューを描画することにより実現していたが
大量のリンクがあると無視できないほどのオーバーヘッドがありました。
が、今回のアップデートで”描画しないビュー”という新しいビューを使用することにより、これらのオーバーヘッドを無くす事ができたそうです。

Material 3

シードカラーによるカラースキームの生成

API to generate a ColorScheme from a single seed color. by darrenaustin · Pull Request #93463 · flutter/flutter
As part of the migration to Material 3, this PR adds a new APIs to make it easy to generate new Material 3 ColorSchemes from just a single color. The design doc...

ColorScheme.fromSeed(seedColor:)によって、シードカラーを渡せばColorScheme
が生成できるようになりました。

useMaterial3フラグ

ThemeData.useMaterial3をオンにすると、コンポーネントがMaterial3の見た目になるようです。

マテリアルアイコンの追加

1028個のマテリアルアイコンを追加!

Integration Test

今まではflutter_driverパッケージが主流だったが、それをintegration_testパッケージにリプレース。
Firebase Test Labの使用が可能になったり、ウェブやデスクトップも可能になるなど新機能も追加されました。

さらに、integration_testパッケージをFlutterに内包されたとか。

Migrating from flutter_driver
Learn how to migrate existing flutter_driver tests to integration_test

Flutter DevTools

dart devtoolsコマンド

pub global activateコマンドを叩く代わりにdart devtoolsとするだけで、
使用しているFlutterのバージョンに合わせた最新のdevtoolsを利用できるようになりました。

inspectionツールの改善

Improve inspecting large `Map` and `List` types by elliette · Pull Request #3497 · flutter/devtools
Work towards #2950 Creates "groupings" of items/entries for Map/List types if the number of children is greater than 100. Makes calls to getObject wit...

変数を大量にデバッグできるようになりました!

VSCode

カラープレビュー

[Feature Request] Color Picker for Flutter's Color(s) similar to CSS · Issue #3240 · Dart-Code/Dart-Code
For CSS files in VS Code, a color picker is provided next to the color's definition for easy selection as shown in the screenshot below: example.css #p1 {ba...


出典:https://medium.com/flutter/whats-new-in-flutter-2-10-5aafb0314b12

色コードの指定箇所から直接その色のプレビューが参照可能になり、さらに変更まで可能になりました!

prereleaseテスター


出典:https://medium.com/flutter/whats-new-in-flutter-2-10-5aafb0314b12

extensionの設定からprerelease版のテスターになることができるようになりました。

devチャンネルの削除

devチャンネルが削除されたようです。
(とは言え、flutter channelを叩くとまだ出て来ますね)
これはDartPadにも適用されました。

また、Flutter toolを使うことで削除のためのマイグレーションを手助けしてくれるそうです。

iOSのサポートバージョンの切り上げ

iOS9.3.6及び32ビット端末ではコンパイルは通るが正しく動くかわからない状態になりそうです。
そして、最終的に2022年中にはiOS9と10のサポートが終了するそうです。

Breaking Changes

Required Kotlin version
Flutter apps built for the Android platform require Kotlin 1.5.31 or greater.
Deprecated API removed after v2.5
After reaching end of life, the following deprecated APIs were removed from Flutter.
Raw images on Web uses correct origin and colors
Raw images directly decoded by calling the Web engine functions now uses the correct pixel format and starts from the top left corner.
Scribble Text Input Client
Add new methods to the TextInputClient interface to allow Scribble to insert or remove text placeholders and show the toolbar.

最後に

実際に、アップデートした際にどのような変更が起こるかは下記記事で公開していますのでよろしければ
ご覧ください。

【Flutter】2.10.0に対応するためにしたこと
Flutter2.10が正式リリースされました! 🎉 今回の記事では、Flutter2.8.1からFlutter2.10への アップデート時に対応したことを書いておいたので何かの参考になれば幸いです。 Flutter2...
誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!
@daiki1003

コメント

タイトルとURLをコピーしました