Zenn
🏄‍♂️

【アップデート解説】Welcome to Flutter 2.5 !!

2021/09/09に公開
Flutter
Dart
tech

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

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

自己紹介.png

2021/09/09に、Flutter 2.5がstable（安定版）になりました🎉

そこで早速ですが、今回のアップデートについて日本語で少しだけまとめてみました！とくに、筆者がすごいと思ったアップデートを中心に抜粋して、お届けします🙌

原著記事について

まず原著記事についてですが、Chris SellsさんというFlutter開発のPMの方（Google Product Manager on the Flutter development experience）が書いた記事になります。

https://medium.com/flutter/whats-new-in-flutter-2-5-6f080c3f3dc

記事全体の構成としては、以下のような構成になります。

  1. Performance: iOS shader warmup, async tasks, GC & message passing
  2. Dart 2.14: formatting, language features, pub & linting out-of-the-box
  3. Framework: Android full screen, Material You & text editing shortcuts
  4. Plugins: camera, image picker & plus plugins
  5. Flutter DevTools: performance, Widget inspector, & polish
  6. IntelliJ/Android Studio: integration tests, test coverage, and icon previews
  7. Visual Studio Code: dependencies, Fix All, and Test Runner
  8. Tools: exceptions, new app template & Pigeon 1.0
  9. Breaking changes & deprecations
  10. Summary

(What’s new in Flutter 2.5より引用)

それでは、上記の構成に沿って、それぞれ少しずつ説明します。
※ また、各説明で用いている画像は原著記事より引用させていただいておりますm(__)m

1. Performance / パフォーマンス

これは嬉しい、、、パフォーマンスが改善して悲しむ人はおそらくいないと思います笑
とくに、大きな変更点として、ラスタライゼーションというラスタ形式の画像に変換する部分（シェーディングような機能）における処理時間が短縮されたようです。

また、これまではネットワークやファイルシステムやプラグインやその他のアイソレート（自前のメモリ領域を持ったもの、参考）からの非同期イベントがアニメーションの処理を中断させることがあったが、ここのスケジューリング・ポリシーも改善されたようです。

さらに、ガベージコレクション（garbage collector; GC）の改善も行われたようです。GCとは、不要になったメモリを解放して、再利用していくための機構になります（参考）。

以上のように、複数の側面からiOSジャンクが減り、パフォーマンスなどが改善されました。このPRに貢献している人たちみんな賢すぎですね、、、まじで感謝🙏

performance.png

2. Dart 2.14 / 新しい記述方法

Dart2.14のアップデートも同時に行われたようです。少しギークな変更点としては、トリプルシフト演算子（a>>>n：aをnビット分符号無しの右シフトをする）が復活している点があります。

そして、注目すべきは、analysis_options.yamlというlinterが標準化したことです。ちなみに余談ですが、私はmonoさんという方の大ファンで、monoさんのpedantic_monoを愛用しており、こちらの静的解析は使わせてもらうつもりです（monoさんいつもありがとうございます😭）。興味のある方は以下の記事を読んでみてください。

https://medium.com/flutter-jp/analysis-b8dbb19d3978

analysis_options.png

3. Framework / フレームワーク

ついにMaterial Youがこんなところにも！
私個人として、「ユニバーサル・デザイン（Universal Design; UD）」に大変興味があり、全国のエンジニアにこの概念が浸透して、世の中のプロダクトが全員に障害なく使われたらいいなと切に願っております。以前、こんな記事も書かせてもらったため、ぜひご一読ください！

https://qiita.com/umi_mori/items/ab412996210b67888d2c

話がそれましたが、Material youとは、Googleが開発しているデザインフレームワークです。The next stage for Material DesignとGoogleは打ち出しており、万人にとって使いやすいデザインを目指しています。

https://material.io/blog/announcing-material-you

たとえば、以下のようなフローティングボタンのサイズ変更などがより簡単に行えるようになりました。

material_you.png

それ以外にもAndroid端末におけるフルスクリーンモードのバグが散見しておりましたが、そちらが解消されたりしました。

さらにScaffoldMessengerという機能も加わりました。これまでSnackBarsは下から現れる通知でしたが、それの上部版のようなものです。ユーザーが通知を消すまで残り続ける仕様なようです。

scaffold_messenger.png

4. Plugins / プラグイン

わざわざウェブではなく、モバイルを選択する理由に、「スムーズにカメラ機能を使いたいから」ということはよくあるかと思います。そのため、他のフレームワーク（React Native / Ionic / Capacitor / Unityなど）と差別化するために、Googleはここに注力したと筆者は推察します。

具体的には、Androidカメラのオートフォーカス、露出強度、フラッシュ、ズーム、FPS、解像度、方位センサー、ノイズ除去において改善を行いました。また、ウェブプラットフォームにおけるパッケージも導入しました（公式がこれをしてくれるのは意外と大きい、、、）。

5. Flutter DevTools / 開発ツール

皆さんはFlutter DevToolsをご存知でしょうか？
（個人的には、VS CodeからウェブブラウザのFlutter DevToolsを開き、作業するのが最近のトレンドです笑）

パフォーマンスをみれたり、Widgetの大きさやpaddingを見れたりするため、大変便利です。ウェブ開発する時のGoogle Chromeのデベロッパー・ツールのようなものです。

今回のアップデートでこのDevToolsが改良されました。具体的には、特定のフレームにおけるパフォーマンスをライブで見れるようになったことが挙げられます。これによりどのフレームが予想以上にリソースをくっているかを確認することができるようになりました！

devtools.png

これらの機能は、shader compilation jank（描画をコンパイルする時の無駄な部分）を診断する際も使用されます。

shader_compilation_jank.png

6. IntelliJ/Android Studio / IDE

続いて、IntelliJ/Android Studioという統合開発環境（integrated development environment; IDE）の改善も行われました。私のイメージですが、IntelliJはJava開発者が多く使っているイメージがあり、Android StudioはAndroidアプリ開発者（Java / Kotlin / Dart）が多く使っているイメージがあります。

おそらくここの項目で一番大きい変更点は、統合テスト（アプリ全体のテスト）が行えるようになったことです。

ide.png

7. Visual Studio Code / エディタ

ここのアップデートは、一番この記事で役立つTipsかもしれません✨
VS Codeのコマンドとして、以下の3つが追加されました！

  • Dart: Add Dependency
  • Dart: Add Dev Dependency
  • Fix All

私は普段、linterにひっかる部分は、Command + .で変更候補を表示して、直していたのですが、Fix Allで全て一発で変更できるようになりました！しかも、editor.codeActionsOnSave（保存時に実行する処理）にsource.fixAllを追加すれば、保存時に毎回修正することもできます。
vs_dep.png

vs_fix.png

8. Tools / 便利ツール

flutter create -t skeleton my_app

スケルトンテンプレート、、、！
ここは記事を読んでてワクワクしました笑

他のフレームワークは色々なテンプレートがあり、初学者にとってはありがたいものでしたが、Flutterにはカウンターアプリ以外にとても良いテンプレートはありませんでした。この新機能によって、Flutterにワクワクしてより学びたいと思ってくれる人が増えたら嬉しいですね😆

また、特筆すべき点としては、ChangeNotifier、ローカルストレージ、ページ遷移などのアプリ開発をする上でほぼほぼ登場するような機能がしっかりと組み込まれていることです。また、信頼のあるFlutterのファイル構成のベストプラクティスはまだあまり多くないため、その点においても目を通す価値があるかと思います。

ちなみに、余談ですが私はshared_preferencesでは無く、hiveというパッケージの方が最近は好みです。

tools.png

さらに、こちらは初見だったのですが、Pigeonというコード生成ツールも紹介されていました。freezedのようなコード生成パッケージは使ったことがありますが、これもまた便利そう👀

あと、名前もちょっと可愛い...ポケモンのピジョンが頭をよぎります🐦
pigeon.png

9. Breaking changes & deprecations / 注意事項

最後に、意外と重要な情報です⚠️

Breaking changesとは「既存プロジェクト（旧バージョンで作成されたもの）を破壊しうる変更点」を表し、deprecationsとは廃止予定のような意味を持ちます（以下の記事参考）。

https://nordicapis.com/what-are-breaking-changes-and-how-do-you-avoid-them/

そのため、ここの項目は意外と重要です。古いパッケージで廃止すべきものや改善すべきものは必ずあります。無闇にアップグレードをして、取り返しがつかなくなる前に、どういうパッケージや機能が組み込まれている場合は、アップグレードしない方がいいか把握しておきましょう。

公式サイトからの引用は以下の通りです。
もしも該当する項目がある場合はしっかりと確認しましょう。

（Released in Flutter 2.5より引用）

最後に

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

おまけ①：生成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

Discussion