Flutter 1.22 リリース情報

はじめに

この投稿は Announcing Flutter 1.22 の内容を簡単にまとめたものです。
本稿内の画像もすべて元記事からの引用です。

iOS14 対応

主な変更点

• Deployment Target のデフォルト値が 8.0 -> 9.0 に変更。

• iOS14 のみで発生していたフォントや描画周りのバグを修正

• 実機インストールができない問題を修正

• 誤ってクリップボードへのアクセスを通知する表示が出てしまう問題を修正。

• 開発時のみ、１度だけローカルネットワークへのアクセス許可を求めるダイアログが表示されるように。

• iOS14 をターゲットにする場合は、Flutter 1.22 へアップグレードすることを強く推奨

こちらのドキュメントにも詳しく書かれています。
https://flutter.dev/docs/development/ios-14

cupertino_icons 1.0.0

cupertino_icons パッケージが新しくなりました。
使えるアイコンはこちらで確認できます -> https://flutter.github.io/cupertino_icons/

App Clips に対応

App Clips は、アプリをインストールすること無く、その機能の一部を使えるようになるという iOS14 の新機能です。

Flutter 1.22では、この機能に対応できるようになります。

具体的な実装方法については、公式ドキュメントに書かれています。
https://flutter.dev/docs/development/platform-integration/ios-app-clip

また、こちらでサンプルプロジェクトが公開されています。
https://github.com/flutter/samples/tree/master/ios_app_clip

Android11 対応

特殊なノッチへの対応

MediaQueryやSafeAreaで特殊な形状の画面に対応できるようになりました。
今まではノッチに被ったりしてしまっていたんでしょうか。

キーボード出現時のアニメーション

アニメーションが改善されました。

Android embedding API V1 の廃止

詳しくは、元記事、及び以下を参照して下さい。

• https://flutter.dev/docs/release/breaking-changes/android-v1-embedding-create-deprecation
• https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration

新しいマテリアルボタン

最新のマテリアルガイドラインに準拠し、
TextButton、ElevatedButton、OutlinedButtonが追加されました。

前からあるボタンとの対応表は以下の通りです。

こちらで詳しいマイグレーションガイドが公開されています。
https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit

また、すぐに試すことができるように DartPad も公開されています。
https://dartpad.dev/e560e1c2e4455ad53aac245079ccdcf2

国際化・多言語化サポート

.arbファイルの Hot Reload が利くようになるなど、ツール周りのアップデートが行われました。

より詳しい情報は、こちらの Google ドキュメントで公開されています。
https://docs.google.com/document/d/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc/edit

Qiitaでも、既に記事を書いてくださっている方がいます。
【Flutter】l10n ローカライゼーション（多言語対応）に対応する

characters パッケージ

Flutter が内部的に characters パッケージを使うようになり、
👨‍👩‍👦のような絵文字も、ちゃんと１文字としてカウントされるようになりました。

より詳しい情報は、こちらの別記事で紹介されています。
https://medium.com/dartlang/dart-string-manipulation-done-right-5abd0668ba3e

開発ツール周り

Dart developer tool が１つにまとめられた

今まで、dartfmtやdartanalyzerのように細かく分かれていたものが、dartコマンドに集約されました。

詳しくは、Announcing Dart 2.10の方の記事に書かれています。

アプリサイズ計測ツール

flutter buildコマンドに、--analyze-sizeをつけることで、アプリサイズの内約を表示できるようになりました。

DevTools を使うと、以下のように視覚的に確認することもできるようです。

詳しい使い方は、以下の公式ドキュメントに書かれています。
https://flutter.dev/docs/development/tools/devtools/app-size#analysis-tab

DevTools の ネットワーク タブ

DevTools のネットワークタブで、API のレスポンスなどが見れるようになりました。

↓フィルタリングや、検索機能も充実しています。

DevTools の Inspector タブを IntelliJ 上にホストして表示

以下の手順で有効化できます。

• Preferences > Languages & Frameworks > Flutter > Enable embedded DevTools inspectorにチェック

現状、IntelliJ の Inspector ペインと、DevTools の Inspector タブで同じものが提供されており、メンテナンスが大変なので、どちらかに絞りたいということのようです。

VsCode のログ出力のリンクを改善

エラーメッセージなどに含まれるリンクが適切にパースされるようになりました。
ソースコード内の該当箇所にクリックで直接飛べるようになったということでしょうか。

その他

Navigator 2.0

Navigator 2.0 が使えるようになりました。
これについては長くなるので、元記事の方を参照して下さい。

また、以下の記事でもかなり詳細に解説されています。
https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

Google Map と WebView プラグインの安定化

google_maps_flutter と webview_flutter パッケージのdeveloper previewが取れ、v1.0.0 が公開されました。

また、ネイティブの UI を表示する機能である、Platform Views に、

• 既知のバグ修正
• サポート対象が Android20以上 -> Android19以上 に変更
• iOS でのパフォーマンス向上
• Info.plistにio.flutter.embedded_views_previewの記述が不要に。

などの変更が加えられ、安定化が行われました。

アプリ状態の復元機能 ( preview版 )

スマホの OS には、フォアグランドで動作しているアプリのリソースを確保するために、バックグラウンドにいるアプリを自動で kill する仕組みがあります。

RestorationMixinを使うことで、その時にアプリの状態を保存しておき、再起動時に復元することができるようになります。

以下のような、カウンターの値を復元するサンプルが公開されています。

class CounterState extends State<RestorableCounter> with RestorationMixin {
  @override
  String get restorationId => widget.restorationId;

  RestorableInt _counter = RestorableInt(0);

  @override
  void restoreState(RestorationBucket oldBucket) => registerForRestoration(_counter, 'count');

  void _incrementCounter() => setState(() => _counter.value++);

  @override
  Widget build(BuildContext context) => Scaffold(
      body: Center(child: Text('${_counter.value}')),
      floatingActionButton: FloatingActionButton(onPressed: _incrementCounter),
    );
}

また、この挙動の自動テストを行うために、WidgetTesterにrestartAndRestore というメソッドが追加されました。

手動でテストを行う場合は、デバイス設定の Don’t keep activitiesを ON にして、アプリをバックグラウンド -> フォアグラウンドとすることで行えます。

スムーズなスクロール ( preview版 )

入力とディスプレイの周波数が同じでないデバイスでは、スクロールのパフォーマンスが落ちるという問題があるそうです。

※ 例えば、Pixel 4 は入力は 120Hz 、ディスプレイは 90Hz で動作しています。

Flutter 1.22 ではresamplingEnabledをtrueに設定することで、この問題を改善することができるようになりました。

void main() {
  GestureBinding.instance.resamplingEnabled = true;
  run(MyApp());
}