Flutter 1.22 リリース情報


## はじめに
この投稿は [Announcing Flutter 1.22](https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f) の内容を簡単にまとめたものです。
本稿内の画像もすべて元記事からの引用です。

## iOS14 対応

### 主な変更点
* Deployment Target のデフォルト値が 8.0 -> 9.0 に変更。

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

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

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

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

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

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

### cupertino_icons 1.0.0

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

![cupertino_icons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/842d60ca-c419-01a7-10b5-ea8f0092e3a5.png)

### App Clips に対応
[App Clips](https://developer.apple.com/app-clips/) は、アプリをインストールすること無く、その機能の一部を使えるようになるという iOS14 の新機能です。

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

![app_clip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/b008ed71-40de-864a-05cd-8de31e3fb687.png)

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

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

## Android11 対応

### 特殊なノッチへの対応

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

![notch_hole_waterfalledges.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/d326f31c-4879-5958-4c6a-62fc8cbbd5e6.png)

### キーボード出現時のアニメーション
アニメーションが改善されました。

![keyboard_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/ceeafcee-376b-d5cb-c463-acea71d1f580.gif)


### Android embedding API V1 の廃止

詳しくは、[元記事](https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f)、及び以下を参照して下さい。

* [https://flutter.dev/docs/release/breaking-changes/android-v1-embedding-create-deprecation](https://flutter.dev/docs/release/breaking-changes/android-v1-embedding-create-deprecation)
* [https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration](https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration)

## 新しいマテリアルボタン
最新のマテリアルガイドラインに準拠し、
[`TextButton`](https://api.flutter.dev/flutter/material/TextButton-class.html)、[`ElevatedButton`](https://api.flutter.dev/flutter/material/ElevatedButton-class.html)、[`OutlinedButton`](https://api.flutter.dev/flutter/material/OutlinedButton-class.html)が追加されました。

![new_buttons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/ab6a6abd-92ff-0a75-fca4-31a26e83df13.png)

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

![new_buttons_table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/960705dd-ec9f-365f-bf31-3bb40b562e78.png)

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

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

## 国際化・多言語化サポート
`.arb`ファイルの Hot Reload が利くようになるなど、ツール周りのアップデートが行われました。

![arb_hot_reload.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/337f9bfd-bbc1-ce15-7353-7f932221a11e.gif)

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

Qiitaでも、既に記事を書いてくださっている方がいます。
[【Flutter】l10n ローカライゼーション（多言語対応）に対応する](https://qiita.com/tetsukick/items/962505028d14006af370)

### characters パッケージ

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

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

## 開発ツール周り

### Dart developer tool が１つにまとめられた
今まで、`dartfmt`や`dartanalyzer`のように細かく分かれていたものが、`dart`コマンドに集約されました。

詳しくは、[Announcing Dart 2.10](https://medium.com/dartlang/announcing-dart-2-10-350823952bd5)の方の記事に書かれています。

![dart_commands.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/ced21744-f58a-6a9c-f1ab-7a951eab1e92.png)


### アプリサイズ計測ツール

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

![app_size_analysis.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/aca5597e-47aa-fce2-e49d-afd9581b0e97.png)

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

![app_size_tree_map_view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/68a4379f-c936-c6c8-e696-b6cf3703e758.png)

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

### DevTools の ネットワーク タブ
DevTools のネットワークタブで、API のレスポンスなどが見れるようになりました。
![network_tab_api_response.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/990e6b0f-cc0f-2a8c-f7fe-4b312a1c4cbc.png)

↓フィルタリングや、検索機能も充実しています。
![dev_tools_filter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/c8f6b411-8080-bb9b-4f14-91a5c61dc925.png)


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

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

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

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

![dev_tools_in_intellij.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/067053c6-d71b-4e8f-642a-3abe396d6666.png)

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

![output_linking_vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/a927464d-36d6-471d-2c5e-f56b7dca761e.png)


## その他
### Navigator 2.0

Navigator 2.0 が使えるようになりました。
これについては長くなるので、[元記事](https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f)の方を参照して下さい。

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

### Google Map と WebView プラグインの安定化
[google_maps_flutter](https://pub.dev/packages/google_maps_flutter) と [webview_flutter](https://pub.dev/packages/webview_flutter) パッケージの`developer preview`が取れ、v1.0.0 が公開されました。

また、ネイティブの UI を表示する機能である、[Platform Views](https://flutter.dev/docs/development/platform-integration/platform-views) に、

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

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

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

[`RestorationMixin`](https://api.flutter.dev/flutter/widgets/RestorationMixin-mixin.html)を使うことで、その時にアプリの状態を保存しておき、再起動時に復元することができるようになります。

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

```dart
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`](https://api.flutter.dev/flutter/flutter_test/WidgetTester-class.html)に[`restartAndRestore`](https://api.flutter.dev/flutter/flutter_test/WidgetTester/restartAndRestore.html) というメソッドが追加されました。

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

![state_restoration_manual_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/13568c9b-aa59-298e-9963-2887168bd100.png)

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

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

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

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

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