🏄‍♂️

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

8 min read

はじめに

本日(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より引用)

10. Summary / まとめ

v2.5のアップデートいかがだったでしょうか?

こういった最新アップデートを追っていると、エンジニアとしての知識が豊富になるのは良いですね!そして、Flutterもまだまだ進化の過程にいるとひしひしと感じます。私もコミッターになれるように毎日精進しなくては、、、。もしもこの記事の修正箇所等々ありましたら、ぜひtwitterなどでご連絡ください👍

最後まで読んでくださり、ありがとうございました!
素敵なFlutter Lifeを!

Discussion

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