🚀

Flutter 3.0のリリース解説!

2022/05/14に公開約6,600字

はじめに

ついに、FLutter3.0がリリースされました🎉

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

みなさんは、今回のリリースをどのように感じましたか?
著者としては、歴史に残るリリースだと感じました。なぜなら、Flutterが本当の意味でのマルチプラットフォームを達成したからです。

著者の主観ですが、React NativeやIonicやCordovaなどの他のマルチプラットフォームはいずれもネイティブ機能を組み込む時にエラーが出やすかったり、痒いところに手が届かなかったりすることがあります。Flutterはこのような困りごとは圧倒的に少ない印象がありました。そのため、今回のリリースによってFlutterのマルチプラットフォームが完全なものになったことは非常にインパクトが大きいと感じました。

それでは、ここから今回のリリース機能を紹介していきます!

【Build & Deploy】

まず最も注目すべリリースとして、マルチプラットフォームへ完全対応したことがあります。今回のリリースにより、以下のプラットフォームへのビルドとデプロイが可能になりました。

  • iOS
  • Android
  • Web
  • Windows
  • macOS
  • Linux
  • Embedded

1. macOS appsのstable化

ついに、Intelチップだけでなく、Apple Silicon(ARM64)チップのデスクトップアプリケーションへのビルドも正式対応となりました。

また、システムメニューバーにおけるカスケーディングメニューも対応しました。実装したい場合は、PlatformMenuBarWidgetから設定できます。

2. Linux appsのstable化

Linux appsのビルドとデプロイにも正式対応しました。

意外とLinuxアプリも需要がありそうですね。エンジニア界隈におけるLinuxユーザーは一定存在するため、エンジニア的にはありがたいですね。

3. Foldable phoneへの対応

折りたたみ式のモバイルへの対応がされるようになりました。

どうやら、この機能は、Microsoftが先導してくれたようで、オープンソースコミュニティにおいて、企業間で連携してくれると開発者としては非常にありがたいですね。

ちなみに、Surface Duoのサンプルが公開されており、興味のある方はこちらのサイトもご覧ください。

https://docs.microsoft.com/en-us/dual-screen/flutter/samples

https://docs.flutter.dev/development/ui/layout/adaptive-responsive

【Web appsのパフォーマンス】

ウェブアプリの対応は、Flutter 2.5のタイミングでベータ版から正式版になり、安定化しました(参考)。一方で、パフォーマンスに関しては、まだまだ改善の要望が多かったため、今回のアップデートは非常にありがたいアップデートです。

4. ウェブ画像表示の高速化

ウェブアプリケーションにおける画像デコーディングが高速化しました。

これは、ブラウザにおけるImageDecoder APIを自動的に検出して利用することによって実現されています。このAPIは、一般的なChromiumベースのブラウザ(Chrome, Edge, Operaなど)では搭載されており、メインのスレッドとは別のスレッドで非同期的に処理をすることにより、約2倍高速化されます。

この恩恵は、ウェブ画像のスクロール時の動きの滑らかさから実感できると思います。

5. ウェブアプリのライフサイクルの改善

ライフサイクルが刷新されました。

この恩恵として、Lighthouseによるパフォーマンス分析を以下のシナリオでもできるようになりました。

  • スプラッシュ画面
  • 読み込み中の画面
  • インタラクティブなアプリが開始される前のプレーンな画面

【Dart記法】

Flutterはほぼ全てのコードがDartで書かれているため、Dartの記法が書きやすくなることは非常にありがたいですね。今回のリリースで、Dartは2.17になりました。

6. enhanced_enumumerations

まずenumが進化しました。

新しくfields, methods, getters, operatorsを追加できるようになったり、interfacesの実装やmixinsの適応もできたりするようになりました。
これにより、enumをclassのように扱えるようになりました。

7. named_args_anywhere

キーワード引数を好きな場所に挿入できるようになりました。

これまでは、キーワード引数は末尾に入れる必要がありましたが、この制約が緩くなりました。長い関数などを位置引数で渡す必要があるときなどにキーワード引数を上に持って来れるという点で非常に便利ですね。

void printMean(double a, double b, {double c=0}){
    print((a+b+c)/3);
}

void main(){
  // これまで:キーワード引数は、位置引数の後じゃないとエラー。
  printMean(1, 3, c: 5); // => 3

// これから:キーワード引数をどこにでも書けるようになった。
  printMean(1, c: 5, 3); // => 3
}

8. super_constructors

これまでは、全ての引数を親Widgetなどに引き継ぐ必要ががありました(manual forwarding)が、これからはsuper parametersを渡せるようになりました。

この公式アップデートは、コード量をものすごく減らすことができ、非常に大きなインパクトをもたらすと考えられます。

【Firebase】

FirebaseはGoogleが運用しているmBaaS(mobile Backend as a Service)になります。FlutterとFirebaseの連携は非常にスムーズで、Flutterエンジニアは、Firebaseを用いることが多いです。

この連携がさらに強化されたことで、他フレームワークからのFlutterへ乗り換えるニューカマーの開発コストはさらに削減されたことでしょう。Googleが技術基盤をたくさん抱えている事による、シナジー効果は計り知れません。

9. Firebase連携

これまでは、FirebaseにFlutterが合わせるというスタンスでしたが、今回のリリースにより、FirebaseもFlutterに寄り添いました。

具体的には、Firebase側からFlutter用のProjectを作成できるようになりました。
flutterfire_1.png

そして、Flutterアイコンをクリックすると、Flutterプロジェクトの場合の設定方法が提示されます。
flutterfire_2.png

10. FirebaseCrashlytics

Firebaseには、Crashlyticsというサービスがあり、クラッシュの検知や管理をしてくれるため、非常に便利です。今回のアップデートで、Crashlyticsでより細かいログが取れるようになったようです。

https://pub.dev/packages/firebase_crashlytics

11. FlutterFire UI

こちらも以前からあるパッケージなのですが、今回のリリースに伴って、更なるアップデートをした模様です。このパッケージには、FlutterとFirebaseを連携する際の認証画面などのフロントエンドのUIテンプレートが用意されています。

https://pub.dev/packages/flutterfire_ui

【その他の機能改善】

12. DevToolsの改善

開発中に用いるDevToolsの改善がされました。

具体的には、Enhance TracingとNetwork Tabの機能強化がされました。Enhance Tracingはパフォーマンスに関連するDevTools機能であり、Flutterの開発チームがパフォーマンス改善を重視している姿勢が非常に見て取れます。

13. Material Design 3

Flutter 3.0において、Material Design 3(M3)のテーマに対応しました。

Material Designとは、Googleが提唱 / 開発しているデザインシステムです。Material Youという、ユーザーの壁紙の色に合わせてカラーテーマが変わる個別最適化デザイン(Dynamic Color)は一時期話題になりましたが、M3はMaterial Youを包括しています。

https://m3.material.io/

Material themeを実装したい場合、以下のサイトが非常に参考になります。

https://material-foundation.github.io/material-theme-builder/#/custom
https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful#0

14. Casual Game Toolkit

Flutterによるゲーム開発ツールキットがリリースされました。
UnityやUnreal Engineほどの機能性はないにしろ、2Dゲームであればこのツールキットで一通り実装できるようになりました。

https://medium.com/flutter/announcing-the-flutter-casual-games-toolkit-c22e401d8fee

15. Linterの改善

最後に、公式Linterの改善がされました。

具体的には、Flutter3.0がLinterのv2に自動的に対応するようになりました。

https://pub.dev/packages/flutter_lints/versions/2.0.0

Upgradeの仕方

Flutterのバージョンをアップデートしたい場合

以下のコマンドを実行することでFlutter3にすることができます。

$ flutter upgrade

既存のプロジェクトをアップグレードしたい場合

既存のプロジェクトにFlutter3を導入しようとするときは、必ずバックアップを取ることを推奨します。今回のアップグレードは、Flutter2との互換性が非常に高いのですが、プロジェクトによっては、デバッグが必要な場合もあります。具体的に、どの機能が非対応になったかは下記のサイトをご覧ください。

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

プロジェクト内をクリーンにしたい場合は、上記のflutter upgradeに加えて、プロジェクト直下で以下のコマンドを実行します。

$ flutter doctor
$ flutter clean
$ flutter pub get

ちなみに、ダウングレードしたい時は、下記のコマンドでダウングレードできます。

$ flutter downgrade

最後に

いかがだったでしょうか?
私は、Googleが本気でソフトウェア開発のデファクトスタンダードを作りに行こうとしている熱量を感じました🔥

最後に、著者が見据えるこれからの展望(期待)をまとめました。

  1. サーバーサイド言語としてのDart言語の改善
  2. データアナリティクス/機械学習におけるライブラリの充実化
  3. さらなるパフォーマンスの改善

最後まで読んでくださり、ありがとうございました!
それでは、Happy Flutter Life :)

参考文献

https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0
https://www.youtube.com/watch?v=w_ezWG1yKQQ

関連動画

https://www.youtube.com/watch?v=3HREQwLmy88
https://www.youtube.com/watch?v=8Q1UgiwaaI8
https://www.youtube.com/watch?v=kCnYRhkfWHY
https://www.youtube.com/watch?v=cIFLFpKTy7c
https://www.youtube.com/watch?v=aIqy-Ulu4Gw
https://www.youtube.com/watch?v=kCnYRhkfWHY

Discussion

ログインするとコメントできます