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

はじめに

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

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

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

目次

• web 版が stable に
• デスクトップ版が betaに
• iOS 関連
• Android 関連
• 新しい widget の追加
• Dart 2.12
• DevTools 関連
• IntelliJ 関連
• VSCode 関連
• DartPad 関連
• パッケージ関連
• Flutter Fix
• Add-to-App
• その他

web 版が stableに

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

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

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

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

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

URL Strategy

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

Link ウィジェット

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

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

また、Link ウィジェットを使用した箇所は <a>タグでレンダリングされるようで、右クリックでのメニュー表示や、Ctrl+クリックで新規タブで開くといった、Web アプリとして自然な体験が得られます。

デスクトップ版が beta に

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

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

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

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

Scrollbar 等がマウス操作に対応

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

例えば、ReorderableListView は元々、要素を移動させるのに一旦長押しが必要でしたが、今回新たに grab handles が追加され、より自然にマウス操作が行えるようになリました。

Scrollbar についても同様に、マウスでの操作が可能になった他、ScrollbarTheme が追加されて、より細かなカスタマイズができるようになりました。

IME サポート

iOS 関連

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

• CupertinoSearchTextField を使うことで、iOS風の検索バーが表現できます。
  
  また、以下の3つの Widget を使うことで、セクション分けされたフォームを作ることができるようになります。

• CupertinoFormSection

• CupertinoFormRow

• CupertinoTextFormFieldRow
  

flutter build ipa コマンド

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

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

• State Restoration to iOS (#23495)
  • Android のみ対応していた機能が iOS でも使えるようになった
• CocoaPods の推奨バージョンが 1.9 に変更 (#69809)

Android 関連

折りたたみスマホ対応

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

新しい Widget の追加

Autocomplete

Autocomplete ウィジェットが追加されました。事前に補完候補を用意しておいて、文字入力に合わせてそれらを表示するといったことができるようです。

ScaffoldMessenger

これまでは、Scaffold が SnackBar の管理を行なっていたため、表示中に画面遷移すると、前の画面に SnackBar が残ったままになるなど、様々な問題が発生していました。Flutter 2 からは、ScaffoldMessenger に SnackBar の管理を任せることで、これらの問題を解決することができるようになっています。これまでの、

Scaffold.of(context).showSnackBar(...)

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

ScaffoldMessenger.of(context).showSnackBar(...)

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

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 に移行することができます。詳しくは以下のマイグレーションガイドを参照してください。

FFI が stable に

Dart から C などの他言語を呼び出す機能である FFI が stable になりました。詳しくは Announcing Dart 2.12 を参照してください。

DevTools 関連

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

エラー発生時に該当箇所を DevTools で開くためのポップアップが表示されるようになりました。今のところ表示されるのはレイアウトのオーバーフローエラーのみで、今後他のエラーについても対応予定です。

Layout Explorer

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

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

実際に表示されているサイズに対して、使っている画像サイズが大きすぎる場合に、上下反転するなどして教えてくれる機能が追加されました。

DevTools を開いて、Invert Oversized Images という項目を ON にすることで有効化できます。

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

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

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

• DevTools 0.9.4
• DevTools 0.9.5
• DevTools 0.9.6
• DevTools 0.9.7
• DevTools 2.0

IntelliJ 関連

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

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

IntelliJ Plugin M51
IntelliJ Plugin M52
IntelliJ Plugin M53
IntelliJ Plugin M54

VSCode 関連

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

LSP (Language Server Protocol)

デフォルトで Dart の LSP (Language Server Protocol) が使用されるようになりました。

↓pubspec.yaml や analysis_options.yaml での補完にも対応しています

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

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

• Visual Studio Code Plugin v3.16
• Visual Studio Code Plugin v3.17
• Visual Studio Code Plugin v3.18
• Visual Studio Code Plugin v3.19
• Visual Studio Code Plugin v3.20

DartPad 関連

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

外部パッケージ関連

Google Mobile Ads

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

Sentry

エラー監視ツールである Sentry の Flutter 用 SDK が公開されています。

pub.green

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

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

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

Flutter Favorites にパッケージ追加

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

• animated_text_kit
• bottom_navy_bar
• chopper
• font_awesome_flutter
• flutter_local_notifications
• just_audio

Flutter Fix

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

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

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

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

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

Add-to-App

ネイティブアプリに Flutter を組み込む機能である Add-to-App で、複数の Flutter インスタンスを起動する場合のコストが大幅に削減されました。詳しくは以下を参照してください。

その他

Folio

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

Ubuntu が Flutter を採用

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

Toyota が Flutter を採用

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