Flutter 1.20 リリース情報

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

## パフォーマンス周りの改善

### 初回のみ遅いアニメーションの改善
初回実行時のみ、シェーダーのコンパイルが行われるため、アニメーションが遅くなるという現象があるようです。
今回、`SkSL` (Skia Shader Language )を使うことで、これを改善することができるようになりました。
[ドキュメント](https://flutter.dev/docs/perf/rendering/shader#how-to-use-sksl-warmup)にしたがって設定を行うことで有効化できます。

※この機能は OpenGL のプリコンパイルを行うというものであり、Metal を利用している最新のiPhoneには効果がありません。
![sksl-warmup.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/d1696126-ff03-08c1-5680-59e97c16e068.gif)

### アイコンとフォントのtree-shaking
使っていないアイコンやフォントデータがリリースビルドに含まれないようになりました。
これにより、アプリサイズが少し小さくなります。

なお、フォントに関しては TrueTypeFont (.ttfファイル)のみに対応してるようです。

## UI 周り
### [最新のマテリアルガイドライン](https://material.io/components/sliders)に準拠
一部のウィジェットの見た目が変わりました。

* [`Slider`](https://api.flutter.dev/flutter/material/Slider-class.html)
![new-slider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/4a5d98ab-4bb3-d047-cb09-65a94c258291.png)


* [`DatePicker`](https://api.flutter.dev/flutter/material/showDatePicker.html)
![new-datetime-picker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/b3ff1274-f15d-a8aa-3301-5eacd3fbdf86.gif)

* [`TimePicker`](https://api.flutter.dev/flutter/material/showTimePicker.html)
![new-time-picker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/eaa811ef-baf5-1ff0-d931-f5d9dc746498.png)


### テキストの AutoFill
モバイル版のみ対応しています。
web版は現在実装中のようです。
![text-auto-fill.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/b40a44d2-27bd-ee04-1efc-172650a760ab.gif)


### マウスカーソル
一部のウィジェットで、ホバー時にカーソルのアイコンが変わるようになりました。
![mouse-cursor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/10e49994-f270-48de-ba12-35760c08b70b.gif)
ちなみに表示されるアイコンは`mouseCursor`プロパティで変更できます。

```dart
return FlatButton(
  mouseCursor: SystemMouseCursors.forbidden,
  child: Text(""),
  onPressed: () {},
);
```

### ドラッグ&ドロップ
[`DragTarget`](https://api.flutter.dev/flutter/widgets/DragTarget-class.html)ウィジェットの`onAcceptWithDetails`コールバックを使用することで、ドロップ位置の詳細情報を受け取ることができるようになります。

この機能を利用した[サンプルプロジェクト](https://github.com/monkeyswarm/DragTargetDetailsExample)が公開されています。
![drag-n-drop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/28ced828-836b-6149-13ce-199259bd8d2e.gif)

### 新しいウィジェット [InteractiveViewer](https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html)

ウィジェットの拡大、縮小などが簡単に行えるようになります。
![interactive-viewer.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/c80d7b64-c40e-6c85-4e34-a2dfe83fc7ef.gif)
使い方は既存のウィジェットを`InteractiveViewer`でラップするだけです。

```dart
return InteractiveViewer(
  child: Container(height: 200, width: 200, color: Colors.red),
);
```

### 新しいライセンスページ
レスポンシブで見やすくなりました。
![new-license-page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/40c639c6-dbf3-fd6a-a16c-63fddfc12553.png)

## 開発ツール周り
### ファイル移動時に自動でimport文のパスを修正 (VSCode)
自分で修正する手間が省けます。
今のところ単一ファイルの移動のみに対応しているようです。

### ネットワーク通信のトラッキング (DevTools)
DevTools の Network ページから、ステータスコードやContent-Typeなどに加え、Timingなどの詳細情報を見ることができます。
将来的には、レスポンスボディなども見れるようになるようです。
![network-tracking.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/1d2e15f8-e5a0-5013-01ff-985186310f6b.png)

### VSCode への DevTools の埋め込み (プレビュー版)

VScode 内に DevTools を埋め込んで表示できるようになりました。 
設定で`dart.previewEmbeddedDevTools`を`true` にすることで有効化できます。

```settings.json
{
  "dart.previewEmbeddedDevTools": true
}
```

有効化したら、アプリ起動中に VSCode の画面下の DevTools ボタンを押します。
![dev-tools-button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/1ff6fc32-b9fb-ac42-f2c0-97e6e10973f2.png)
メニューが出てくるので、表示したいものを選択します。
![dev-tools-selector.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/d079a90e-b81b-7765-7a6b-61fc8f667418.png)
DevTools が表示されます。
![dev-tools-in-vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/7ec7828c-c5e9-969e-bd6b-ecc52abc6470.png)


## その他

### Dart 2.9
utf-8 のデコードのパフォーマンスが向上しました。
その他の細かい変更点は[こちら](https://github.com/dart-lang/sdk/blob/master/CHANGELOG.md#290---2020-08-05)を参照してください。

### タイプセーフな Platform Channel
[Pigeon](https://pub.dev/packages/pigeon) という、Flutterとネイティブの連携を簡単にしてくれるツールが公開されています。
これを使うと、今まで`MethodChannel`を使って書いていた、ネイティブ側とメッセージのやりとりを行う部分を自動生成してくれるようです。

便利そうですが、今のところ `Objective-C` / `Java`にしか対応していません。

__追記__ : [Pigeon についての詳細記事を書きました。](https://qiita.com/sankentou/items/642fbe06f3664c1bf73d) 

### ツール開発用のメタデータを提供
[マテリアルカラーのRGBA値](https://github.com/flutter/tools_metadata/blob/master/resources/colors/material.json)や、[Widgetのカタログ](https://github.com/flutter/tools_metadata/blob/master/resources/catalog/widgets.json)など、Flutter関連のツール開発に役立ちそうなデータセットが Json 形式で公開されています。

### プラグイン公開に必要な pubspec.yaml の新しいフォーマット
[pub.dev](https://pub.dev) にプラグインを公開している人向けの情報です。

プラグインを公開するために必要な pubspec.yaml のフォーマットが変わりました。
古い書き方の場合は `pub publish`コマンドでエラーになるので、[こちら](https://flutter.dev/docs/development/packages-and-plugins/developing-packages#plugin-platforms)を参考に書き換える必要があります。