Flutter for Windows登場！2.10の新機能と入門情報を解説！

Flutter for Windowsのリリース

前回の安定版2.8.0登場からおよそ2ヶ月経った2022年2月4日、Flutter for Windows 2.10がリリースされました。Flutterは単一コードをマルチプラットフォーム開発に利用できます。ステートフルホットリロードにより、アプリの実行中に変更を加えてすぐに結果を確認できます。ユーザーインターフェースのインタラクティブな環境生産性が向上します。

【参考】：Announcing Flutter for Windows

Flutter 2.10のMacOS版・Linux版およびChrome OS版も、合わせてリリースされました。

 Flutterとは、Googleが開発したオープンソースのユーザーインターフェース用SDKを指します。単一のコードをベースに、マルチプラットフォームのアプリケーション開発が可能です。

【参考】：Flutter

開発プラットフォームは、Windows・MacOS・Linux・Chrome OSです。Android・iOSの他、Windows・MacOS・Linux・ウェブアプリケーションのクロスプラットフォームをターゲット環境に選定できます。

Flutterは以下3つの特徴を持ちます。

・高速である

Flutterのコードは、ARM・Intelのマシンコードや、JavaScriptにコンパイルされます。そのため主要デバイスでハイパフォーマンスが実現されます。

JavaScriptに関するフレームワークについて徹底解説！

・高い生産性

ホットリロード機能により、コード更新で状態がキープされ、ほぼ瞬時に変更が反映されます。素早い構築や反復作業が可能となります。

・柔軟性を確保

ピクセル全体を制御し、どの画面でも見栄えのするカスタムデザインを作成できます。

Flutter 2.10安定版で、パフォーマンス改善やMaterial 3のアップデートが行われています。テキスト・キーボードの処理、キーボードショートカットの改良と、コマンドライン引数・グローバル化されたテキスト入力・アクセシビリティをサポートしています。

【参考】：What’s New in Flutter 2.10

具体的な改善項目は以下の通りです。

・パフォーマンス改善

再描画をチューニングしたことで、ラスタライズ時間が大幅に短縮しました。合わせてベンチマーク実施のGPU使用率が90％以上から10％未満に減少しています。

・iOS開発のアップデート

パフォーマンス改善に加えて、キーボードアニメーションがより滑らかになります。エッジケースのクラッシュを修正することにより、iOS 用カメラプラグインの安定性が向上しました。このほか圧縮ポインタによりメモリ使用量削減が可能です。

・Android開発のアップデート

Androidバージョン12（APIレベル31）をサポートし、自動的にmultidex対応可能です。エラーメッセージの内容も見直しました。ウェブ用のプラットフォームビューサポートのためオーバーレイが必要でしたが、ウェブ用の「ノンペイント・プラットフォーム・ビュー」を作成することで、オーバーヘッド削減に対応します。

・Material 3

Material 3への移行が始まります。次世代のMaterial Designで、Material YouあるいはMaterial Design 3とも呼ばれます。任意の色で、ColorSchemeタイプのインスタンスを構築することができます。ThemeData.useMaterial3フラグで、Material 3 の外観に切り替えます。1,028の新しい Materialアイコンが追加されています。

【参考】：Bring Material 3 to Flutter #91605

・その他

Flutter DevToolsを使いやすく修正しています。Visual Studio Codeエクステンションも、コードのカラープレビュー表示を追加し、カラーピッカーがコードを更新するよう修正しました。

Stable Channelとは、安定版のリリースチャネルを指します。Windows版のリリースは2.10.0が2022年2月4日、2.10.1が2月10日、2.10.2が2月19日、2.10.3が3月3日、2.10.4が3月29日と1～2週サイクルで更新が続いています。

Flutterのアーキテクチャ

Flutter for Windowsの実装は、DartフレームワークとC++エンジンを組み合わせています。これは、AndroidやiOSと同等の仕組みです。

WindowsとFlutterは、Flutterエンジンをホストし、Windowsメッセージの翻訳とディスパッチを担当する組み込みレイヤーを介して通信します。FlutterはWindowsと連携してユーザーインターフェースを画面に表示し、サイズ変更やDPI変更などのイベントを処理します。入力メソッドエディタ等は、国際化のために既存のWindows様式と連携して動作します。

Windowsでは、DartのC相互接続レイヤーを通して、あるいはC++のプラットフォームプラグインを用いて、Win32・COM・Windowsランタイム APIと接続が可能です。

Flutter for Windowsでは、以下のツールを活用してさらに効率的にコード開発を行うことができます。

・FlutterFlow

Flutterアプリのノーコード・ローコードデザインツールです。デスクトップ用途に合わせたアプリを構築するのに役立つ機能を提供します。Flutterコードを記述せずにユーザーインターフェースの操作でアプリケーション開発が可能です。

【参考】：FlutterFlow

・Realm

Realmは、超高速のローカルデータストアのオブジェクトデータベース管理システムです。Dart FFIを用いてデータベースに高速にアクセスし、Windowsアプリケーションを構築します。

【参考】：realm

・Nevercode

Nevercodeは、FlutterのCI/CDツールであるCodemagicをアップデートしてWindowsをサポートします。クラウド上でWindowsアプリのテストとビルドを行い、Microsoft Storeへのアプリのデプロイを自動化することも可能です。

【参考】：Nevercode

・Syncfusion

Syncfusionは、.NET プラットフォームソフトウェアコンポーネントとツールを提供します。ウィジェットのスイートでは、ツリーマップやチャートなどのデータ可視化コンポーネント、リッチデータグリッドウィジェット、カレンダー、PDF作成やExcelスプレッドシート等に対応します。

【参考】：Syncfusion

・Rive

Riveは対話型アニメーションプラットフォームで、リアルタイムに反応するインタラクティブなベクターアニメーションを作成可能です。高速なパフォーマンスと低メモリーフットプリントを提供し、近日中にマイクロソフトストアで公開予定です。

【参考】：Rive

Flutter入門

Flutter入門としておすすめするのは、Flatter appと呼ばれるテンプレートを利用することです。インストール完了後に、Dartコードの保存先にある”lib/main.dart”を編集して利用します。

【参考】：Write your first Flutter app, part 1

”lib/main.dart”を以下のリンクにあるコードに差し換えてIDEで実行してみると、”Hello World”がスクリーン中央に表示されます。

【参考】：Step 1: Create the starter Flutter app

Flutterは、64bit Windows 7 SP1以降に対応します。ディスク空き容量は、IDEを除き1.64GB必要です。この他、Windows PowerShell 5.0以降とコマンドプランプ用にGit for Windows 2.xを使います。

【参考】：Windows install

モジュールのインストールは以下のリンクに掲載されています。2022年3月時点では、“flutterwindows2.10.4-stable.zip”が掲載されています。

【参考】：Get the Flutter SDK

Zipファイルを展開後、PATH環境変数に”flutter\bin”のパスを追加して利用します。

インストール完了後、”flutter doctor”コマンドを実行することで関連ソフトウェアのセットアップが必要かどうか表示されます。一例としては、ターゲットとなるAndroid SDKが利用可能か表示されます。Androidの開発をする際には関連して以下のリンクからAndroid Studioをインストール・セットアップします。

【参考】：Android setup

関連してVisual Studioを利用する場合には、以下のリンクをご確認ください。

【参考】：Windows setup

Flutterを活用してモダンユーザーインターフェースを設計しましょう

Flutterは、最新デザインであるMaterial 3（Android 12のMaterial You）に対応します。モダンデザインを単一コードで開発できますので、ユーザーインターフェースの統一にはうってつけです。今後のデザイン変更の流れを理解するためにもFlutterはおすすめです。