Flutter 2 リリース情報 ~web stable, null-safety stable など~

## はじめに

2021年3月3日、Flutter 2 がリリースされました。

この投稿では、以下の4つのリリース記事の内容を簡単にまとめていきます。
掲載している画像も全てこれらの記事からの引用です。

https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65

https://developers.googleblog.com/2021/03/announcing-flutter-2.html

https://medium.com/dartlang/announcing-dart-2-12-499a6e689c87

https://medium.com/flutter/web-post-d6b84e83b425

※ 今回は分量が多すぎるため、目立った情報のみ取り上げていきます。

## 目次

- [web 版が stable に](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#web-版が-stableに)
- [デスクトップ版が betaに](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#デスクトップ版が-beta-に)
- [iOS 関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#ios-関連)
- [Android 関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#android-関連)
- [新しい widget の追加](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#新しい-widget-の追加)
- [Dart 2.12](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#dart-212)
- [DevTools 関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#devtools-関連)
- [IntelliJ 関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#intellij-関連)
- [VSCode 関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#vscode-関連)
- [DartPad 関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#dartpad-関連)
- [パッケージ関連](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#外部パッケージ関連)
- [Flutter Fix](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#flutter-fix)
- [Add-to-App](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#add-to-app)
- [その他](https://qiita.com/sankentou/items/d37ae52c31c2fc40f25d#その他)

## web 版が stableに

stable チャンネルで web 開発が行えるようになりました。

### 2つのレンダリングモード

web 版を stable に持っていくにあたり、最も開発に力が注がれていたのが、パフォーマンスの改善です。従来の DOM ベースのレンダリング方式に加え、WebAssembly を使った [CanvasKit](https://skia.org/user/modules/canvaskit) と呼ばれるレンダリング方式がサポートされるようになりました。

- __HTML renderer__
  - HTML, CSS, Canvas, SVGなどでレンダリング
  - ダウンロードサイズが小さい
- __CanvasKit renderer__
  - WebAssembly + WebGL (Skiaエンジン)
  - 高パフォーマンス
  - ダウンロードサイズは大きい (HTML rendererのサイズ より +2MB くらい)

デフォルトでは、レンダリングモードが `auto` に設定されており、モバイル版のブラウザでは HTML renderer が、PC 版のブラウザでは [CanvasKit](https://skia.org/user/modules/canvaskit) が使われるようになっています。この設定は、 `--web-renderer html` または `--web-renderer canvaskit` を付けて実行することで変更することが可能です。詳しくは以下のドキュメントを参照してください。

https://flutter.dev/docs/development/tools/web-renderers

### URL Strategy

Flutter では URL にハッシュ(`#`)を使用する方式と、ハッシュを使用しない方式の2種類をサポートしています。デフォルトでは、ハッシュを使う方式になっていますが、以下のドキュメントに従うことで、ハッシュ無しの方式に変更することが可能になっています。

https://flutter.dev/docs/development/ui/navigation/url-strategies

### Link ウィジェット

Flutter から外部の URL を開くには、[url_launcher](https://pub.dev/packages/url_launcher) パッケージを使用するのが一般的です。今回、このパッケージに 新しく [Link](https://pub.dev/documentation/url_launcher/latest/link/Link-class.html) ウィジェットが追加されました。これを使うことで、従来の [`launch()`](https://pub.dev/documentation/url_launcher/latest/url_launcher/launch.html) メソッドを使った命令的な記述に替えて、以下のような__宣言的__な記述でリンクを記述することができるようになります。

```dart
Link(
  uri: Uri.parse('https://flutter.dev'),
  builder: (BuildContext context, FollowLink followLink) => ElevatedButton(
    onPressed: followLink,
    // ... other properties here ...
  )},
);
```

また、[Link](https://pub.dev/documentation/url_launcher/latest/link/Link-class.html) ウィジェットを使用した箇所は `<a>`タグでレンダリングされるようで、右クリックでのメニュー表示や、Ctrl+クリックで新規タブで開くといった、Web アプリとして自然な体験が得られます。

## デスクトップ版が beta に

これに関しては stable になったと紹介されている記事も多いですが、扱いとしてはまだ beta というのが正しいのではと思います。

### stable チャンネルでも実行可能に

`early release` フラグ付きという形で stable チャンネルでもデスクトップ版が実行できるようになりました。チャンネルを beta に切り替えなくてもお試しで実行できるぐらいの感覚で、Production Ready になったという意味ではないと思います。

なお、stable チャンネルでは最新の Bug Fix などがすぐに降ってこないため、デスクトップ版をがっつり開発する場合は、beta チャンネルへの切り替えが推奨されています。

### Scrollbar 等がマウス操作に対応

マウス操作やキーボードショートカットといった、__PC 特有の操作__への対応が進められています。

例えば、[ReorderableListView](https://api.flutter.dev/flutter/material/ReorderableListView-class.html) は元々、要素を移動させるのに一旦長押しが必要でしたが、今回新たに [`grab handles`](https://github.com/flutter/flutter/pull/74299) が追加され、より自然にマウス操作が行えるようになリました。

![reorderable_list_view.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/452e6da5-5468-4f84-acec-aba47369f5d8.gif)

[Scrollbar](https://api.flutter.dev/flutter/material/Scrollbar-class.html) についても同様に、マウスでの操作が可能になった他、[ScrollbarTheme](https://api.flutter.dev/flutter/material/ScrollbarTheme-class.html) が追加されて、より細かなカスタマイズができるようになりました。

![scrollbar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/02e1cacb-5708-31b3-7b12-43f53440d1d9.gif)

### IME サポート

![ime_support.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/f3797ef1-56ca-8de5-0f2e-0cec5506804d.gif)

## iOS 関連

### 新しい Cupertino ウィジェットの追加

- [CupertinoSearchTextField](https://api.flutter.dev/flutter/cupertino/CupertinoSearchTextField-class.html) を使うことで、iOS風の検索バーが表現できます。
![cupertino_search_text_field.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/fa796c70-6205-5063-2f78-8526e6869559.png)
また、以下の3つの Widget を使うことで、セクション分けされたフォームを作ることができるようになります。

- [CupertinoFormSection](https://api.flutter.dev/flutter/cupertino/CupertinoFormSection-class.html)
- [CupertinoFormRow](https://api.flutter.dev/flutter/cupertino/CupertinoFormRow-class.html)
- [CupertinoTextFormFieldRow](https://api.flutter.dev/flutter/cupertino/CupertinoTextFormFieldRow-class.html)
![cupertino_form_widgets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/e16256a1-176c-55a6-344f-1d7015bbf558.png)

### flutter build ipa コマンド

`flutter build ipa` コマンドを使うことで、Xcode を開かずに `ipa` ファイルを生成することができるようになりました。詳しい使い方は以下を参照してください。

https://flutter.dev/docs/deployment/ios#create-a-build-archive

### その他の iOS 関連のアップデート

- State Restoration to iOS ([#23495](https://github.com/flutter/engine/pull/23495))
    - Android のみ対応していた機能が iOS でも使えるようになった
- CocoaPods の推奨バージョンが 1.9 に変更 ([#69809](https://github.com/flutter/flutter/pull/69809)) 

## Android 関連

### 折りたたみスマホ対応

Microsoft によって、折りたたみスマホへの対応が進められています。詳しくは以下を参照してください。

https://devblogs.microsoft.com/surface-duo/flutter-dual-screen-foldable/

## 新しい Widget の追加

### Autocomplete

[Autocomplete](https://api.flutter.dev/flutter/material/Autocomplete-class.html) ウィジェットが追加されました。事前に補完候補を用意しておいて、文字入力に合わせてそれらを表示するといったことができるようです。

![auto_complete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/9b55c659-e874-d629-c78f-75717288ac00.gif)

### ScaffoldMessenger

これまでは、`Scaffold` が `SnackBar` の管理を行なっていたため、表示中に画面遷移すると、前の画面に `SnackBar` が残ったままになるなど、様々な問題が発生していました。Flutter 2 からは、[ScaffoldMessenger](https://api.flutter.dev/flutter/material/ScaffoldMessenger-class.html) に `SnackBar` の管理を任せることで、これらの問題を解決することができるようになっています。これまでの、

```dart
Scaffold.of(context).showSnackBar(...)
```

という書き方は非推奨になり、今後は以下の方法で `SnackBar` を呼び出すことが推奨されます。

```dart
ScaffoldMessenger.of(context).showSnackBar(...)
```

詳しくは以下のドキュメントを参照してください。

https://flutter.dev/docs/release/breaking-changes/scaffold-messenger

![scaffold_messenger.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/d210b5d6-3b44-88d1-22b7-2704e04f9a1a.gif)

## Dart 2.12

###  Null safety が stable に

Flutter 2 に同梱されている Dart 2.12 から、 Null safety が stable になりました。

ただし、__デフォルトでは有効化されておらず__、以下のように `pubspec.yaml` で SDK のバージョンを `2.12.0` 以上に指定することで有効化できます。

```pubspec.yaml
environment:
  sdk: ">=2.12.0 <3.0.0"
```

### dart migrate コマンド

`dart migrate` コマンドを使うことで、プロジェクトを自動で Null safety に移行することができます。詳しくは以下のマイグレーションガイドを参照してください。

https://dart.dev/null-safety/migration-guide#step2-migrate

### FFI が stable に

Dart から C などの他言語を呼び出す機能である FFI が stable になりました。詳しくは [Announcing Dart 2.12](https://medium.com/dartlang/announcing-dart-2-12-499a6e689c87) を参照してください。

## DevTools 関連

### エラー発生時に DevTools を開く機能

エラー発生時に該当箇所を DevTools で開くためのポップアップが表示されるようになりました。今のところ表示されるのはレイアウトのオーバーフローエラーのみで、今後他のエラーについても対応予定です。
![open_dev_tools_on_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/e8c71001-c53e-f509-caab-09bee6ac053e.png)

### Layout Explorer

Layout Explorer で `flex` 系以外のウィジェット (`Text` など)も表示できるようになりました。

![dev_tools_fixed_layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/6ff37f31-c882-2ba4-00a8-49ecf79725a5.png)

### 画像サイズが大きすぎる時に教えてくれる機能

実際に表示されているサイズに対して、使っている画像サイズが大きすぎる場合に、上下反転するなどして教えてくれる機能が追加されました。
![invert_oversized_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/78eb1ce1-fced-1778-1da7-68032bce1a0d.png)
DevTools を開いて、`Invert Oversized Images` という項目を ON にすることで有効化できます。
![dev_tools_invert_oversized_images.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/85078ae6-5fd7-4bbb-9e40-0253ea30f57f.png)


### その他の DevTools 関連のアップデート

- 赤色のエラーラベル、エラーバッジの表示
- `Flutter frames chart` で平均 fps の表示
- 新しい `memory view` のチャート
- `Logging` タブでの検索機能
- DevTools を開く前のログも表示できるように
- `Performance` ビューが `CPU Profiler` に名称変更
- `Timeline` ビュー を `Performance` に名称変更
- `CPU Profiler` に `timing grid` を追加
- など

詳しくは以下のリリースノートを参照してください。

- [DevTools 0.9.4](https://groups.google.com/g/flutter-announce/c/mx_hBxuXM9Q/m/Kjy9dqS3AAAJ)
- [DevTools 0.9.5](https://groups.google.com/g/flutter-announce/c/mNqTNPUwBKw/m/_1qyXwTBAQAJ)
- [DevTools 0.9.6](https://groups.google.com/g/flutter-announce/c/Ta5HR39P3go/m/2a43w7iSCwAJ)
- [DevTools 0.9.7](https://groups.google.com/g/flutter-announce/c/IJ97oJ2HpxM/m/909J9Kl8AQAJ)
- [DevTools 2.0](https://groups.google.com/g/flutter-announce/c/0xQhJR4nQbI)

## IntelliJ 関連

- UI の刷新
- Linux 版で SDK のパスの指定が簡単になる(?)

などが紹介されていました。詳しくは以下のリリースノートを参照してください。

[IntelliJ Plugin M51](https://groups.google.com/g/flutter-announce/c/w65rD73R83Q/m/gV5p0qf2AAAJ)
[IntelliJ Plugin M52](https://groups.google.com/g/flutter-announce/c/tQqqMOIg6V0/m/wj7Kbv4-AgAJ)
[IntelliJ Plugin M53](https://groups.google.com/g/flutter-announce/c/V335xbsPWUs/m/14LSp05kAQAJ)
[IntelliJ Plugin M54](https://groups.google.com/g/flutter-announce/c/-jYDrwG7PmA)

## VSCode 関連

### テスト失敗時に再度実行する機能

![re-run_on_test_fail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/426f9a54-5377-3b13-c587-3cd6ca22d153.png)

### LSP (Language Server Protocol)

デフォルトで Dart の LSP (Language Server Protocol) が使用されるようになりました。
![dart_lsp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/7cabbab5-8d68-7aee-607f-a60cb2b5fb6b.gif)
↓`pubspec.yaml` や `analysis_options.yaml` での補完にも対応しています
![dart_lsp_yaml.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/053f3441-9422-8dce-8ba8-30163b089415.gif)

### その他の VSCode 関連のアップデート

以下のリリースノートを参照してください。

- [Visual Studio Code Plugin v3.16](https://dartcode.org/releases/v3-16/)
- [Visual Studio Code Plugin v3.17](https://dartcode.org/releases/v3-17/)
- [Visual Studio Code Plugin v3.18](https://dartcode.org/releases/v3-18/)
- [Visual Studio Code Plugin v3.19](https://dartcode.org/releases/v3-19/)
- [Visual Studio Code Plugin v3.20](https://dartcode.org/releases/v3-20/)

## DartPad 関連

- Flutter 2 に対応済み
- Null safety の On / Off 機能

## 外部パッケージ関連

### Google Mobile Ads

[google_mobile_ads](https://pub.dev/packages/google_mobile_ads) という、広告表示のための新しいパッケージが公開されました。従来の [firebase_admob](https://pub.dev/packages/firebase_admob) パッケージには無かった、ネイティブ広告などがサポートされており、広告を Widget として画面に組み込んで、スクロールに追従させるなどが可能になっています。

https://flutter.dev/ads

https://www.youtube.com/watch?v=m0d_pbgeeG8

https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter#0

### Sentry

エラー監視ツールである [Sentry](https://sentry.io/welcome/) の Flutter 用 SDK が公開されています。

https://blog.sentry.io/2021/03/03/with-flutter-and-sentry-you-can-put-all-your-eggs-in-one-repo

### pub.green

[pub.green](https://pub.green/) というサイトでは、Flutter のバージョンと外部パッケージのバージョンの互換性を調べることができます。なお、開発元は Flutter 用の CI/CD サービスで有名な [Codemagic](https://codemagic.io/start/) です。

https://pub.green/

### 1000個以上のパッケージが Null safety に対応

[pub.dev](https://pub.dev) で人気トップ100 パッケージの内 98% が、トップ250 の内では 78% が Null safety に対応済みとのことです。また、[Firebase 系](https://firebase.flutter.dev) パッケージや、[Flutter Community Plus](https://plus.fluttercommunity.dev)  パッケージも Null safety に対応している他、今回の Flutter 2 の発表に合わせて stable 化されているものも多いです。

### Flutter Favorites にパッケージ追加

新しく6つのパッケージが追加されました。

- [animated_text_kit](https://pub.dev/packages/animated_text_kit)
- [bottom_navy_bar](https://pub.dev/packages/bottom_navy_bar)
- [chopper](https://pub.dev/packages/chopper)
- [font_awesome_flutter](https://pub.dev/packages/font_awesome_flutter)
- [flutter_local_notifications](https://pub.dev/packages/flutter_local_notifications)
- [just_audio](https://pub.dev/packages/just_audio)

https://pub.dev/flutter/favorites

## Flutter Fix

最近の Flutter では、Null safety や Web 版、デスクトップ版への対応のため、Breaking Changes が増えてきています。これを受けて、開発者の負担をなるべく軽減するため、 [Flutter Fix](https://flutter.dev/docs/development/tools/flutter-fix) という仕組みが導入されました。

IntelliJ や VSCode などの IDE では、お馴染みの電球マークから、deprecated になった API を簡単に修正することができるようになっています。

![flutter_fix_ide.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/ad4af4ca-b0c7-5d2f-0012-1a9190002e0c.png)

また、 `dart fix` コマンドを使うことでプロジェクト内の deprecated になった API を一括で修正することも可能です。

```bash
# 修正可能なリストを表示
$ dart fix --dry-run

# 修正を適用
$ dart fix --apply
```

## Add-to-App

ネイティブアプリに Flutter を組み込む機能である [Add-to-App](https://flutter.dev/docs/development/add-to-app#add-to-app) で、複数の Flutter インスタンスを起動する場合のコストが大幅に削減されました。詳しくは以下を参照してください。

https://flutter.dev/docs/development/add-to-app/multiple-flutters

https://github.com/flutter/samples/tree/master/add_to_app/multiple_flutters

## その他

### Folio

[Folio](https://flutter.gskinner.com) という、スクラップブックアプリの[ソースコード](https://github.com/gskinnerTeam/flutter-folio)が公開されています。モバイル、デスクトップ、Web 全てに対応しており、画面サイズの違いや、__タッチやマウスといった操作方法の違い__にどう対応するかの参考にしてほしいという意図のようです。

https://flutter.gskinner.com

https://github.com/gskinnerTeam/flutter-folio

### Ubuntu が Flutter を採用

Ubuntu の開発元である Canonical が、今後アプリケーションを開発する上で Flutter がデフォルトの選択肢となることを発表しました。既に Ubuntu インストーラーが Flutter で開発中とのことです。

![ubuntu_flutter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/928eb563-b960-6614-a016-1cc1ddbab770.png)

### Toyota が Flutter を採用

モバイルやデスクトップだけでなく、組み込み機器への採用も広がっています。今後はトヨタと協力して、この分野での開発が進められていく模様です。

![toyota_flutter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266232/1668e7d0-3600-4c4c-5da1-bacb068009ee.png)