Zenn
🚀

Flutter 3.0のリリース解説！

2022/05/14に公開
Flutter
Dart
Google
tech

はじめまして、ますみです！

株式会社Galirage（ガリレージ）という「生成AIのシステム開発会社」で、代表をしております^^

自己紹介.png

ついに、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. さらなるパフォーマンスの改善

最後に

最後まで読んでくださり、ありがとうございました！
この記事を通して、少しでもあなたの学びに役立てば幸いです！

おまけ①：生成AIエンジニア塾

より専門的な「生成AIエンジニア人材」を目指しませんか？

そんな方々に向けて、「生成AIエンジニア塾」というプログラムを始めました🎉

最終的なゴールとして、『エンタープライズ向けの生成AIシステムを構築するためのスキルを習得し、大手案件で活躍できる人材』を目標とします。

また、一人一人にしっかりと向き合って、メンタリングをできるようにするため、現在メンバーの人数制限をしております。本気度やスキルレベルの高い人から、順番にご案内しております。

▼ 登録はこちらから ▼
https://bit.ly/generative_ai_engineer_school_by_zenn

おまけ②：AI Newsletter for Biz

最新のAIニュースの情報を収集しませんか？

AI Newsltter for Bizは、ビジネスパーソン向けに「AIニュース」を定期配信する完全無料のニュースレターです📩

一人でも多くの方にとって、「AI人材としてのスキルアップ」につながれば幸いです^^

また、現在、登録者限定で「明日から使える 無料AIサービス3選」のPDFを配布中です 🎁
※ ご登録完了のメールに、PDFリンクを添付いたします。

期間限定のプレゼントとなりますので、ぜひ、お早めにご登録ください！

▼ 登録はこちらから ▼
https://bit.ly/ai_newsletter_for_biz_zenn

参考文献

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