作者/クリスセルズ、プロダクトマネージャー、Flutter開発者エクスペリエンス
私たちの使命は、開発者にオープンソースで効率的なフレームワークを提供し、あらゆるプラットフォームで美しいネイティブアプリケーションを構築できるようにすることです。これまでに、AndroidとiOSの製品レベルのサポートを提供し、8つの安定したバージョンをリリースし、100,000を超えるアプリがGooglePlayストアだけでFlutterを使用しています。Web、macOS、Linuxなどの他のプラットフォームへのサポートの拡張に引き続き取り組んでいます。現在、Flutterのもう1つの目標、つまりWindowsをサポートするFlutterのAlphaバージョンがリリースされました。
Windowsは、依然としてデスクトップおよびラップトップデバイスで人気のある選択肢です。Microsoftのレポートによると、Windows10には10億を超えるアクティブなデバイスがあります。私たちの統計によると、Flutter開発者の半数以上がWindowsを使用しており、当然、Flutterはこのシステムをサポートするはずです。ネイティブデスクトップサポートは、開発ツールの改善や新規ユーザーの負担の軽減など、Flutterにさまざまな可能性を提供します。もちろん、開発者は、ユーザーが所有する可能性のある任意のデバイスに単一のコードベースを使用できます。アプリケーションを構築します。
Windows 10：世界中で毎月10億台のアクティブデバイスに電力を供給
https://blogs.windows.com/windowsexperience/2020/03/16/windows-10-powering-the-world-with-1-billion-monthly-active-devices/
FlutterにWindowsサポートを追加する
アーキテクチャの概要で述べたように、Flutterは、アプリケーションが基盤となるプラットフォームサービスと直接インターフェイスできるようにしながら、異なるオペレーティングシステム（iOSやAndroidなど）間でコードを再利用できるように設計されたクロスプラットフォームインターフェイスツールキットです。私たちの目標は、開発者が、さまざまなプラットフォーム間の違いを許容しながら、可能な限りコードを共有しながら、さまざまなプラットフォームで自然かつスムーズに実行できる高性能アプリケーションを提供できるようにすることです。Flutterのコアはエンジンであり、必要なプリミティブをサポートし、すべてのFlutterアプリケーションをサポートします。新しいフレームを描画する必要がある場合は常に、エンジンが合成シーンのラスター化を担当します。このエンジンは、グラフィック、テキストレイアウト、ファイルとネットワークのI / O、アクセシビリティサポート、プラグインアーキテクチャ、Dartランタイムとコンパイルツールチェーンなど、FlutterのコアAPIの基盤となる実装を提供します。
アーキテクチャの概要
https://flutter.cn/docs/resources/architectural-overview
Flutterに新しいターゲットプラットフォームを追加するたびに、コアフレームワークを新しいサービスで拡張して、そのプラットフォームで適切に実行できるようにします。これら2つのモバイルプラットフォームでピクセルパーフェクトなエクスペリエンスを実現するために、最初にAndroidとiOSにマテリアルデザインを実装し、モバイルデバイス用のタッチインターフェイスを実装しました。Web、Windows、macOS、Linuxなどのデスクトップ環境では、Flutterは、キーボード、マウス、スクロールホイール、コントローラーの入力方法の強力なサポートや、これらのプラットフォームに適応できるウィジェットなど、まったく新しいサービスセットも提供します（一部ウィジェットは、Webおよびデスクトップアプリケーションの大画面でもうまく機能します）。
さらに、新しいプラットフォームはそれぞれ、Flutterのフレームワークとエンジンだけでなく、他の多くの側面にも影響を与えます。
ツールチェーンの更新：CLIおよびIDEツール（この記事のWindowsなど）の新しいターゲットプラットフォームを追加します
シェル：WM_ *メッセージを介したWindowsからの入力の処理をサポートし、ANGLEを介した出力を実現します。ANGLEはSkiaを使用して、基盤となるDirectXインターフェイスにネイティブ速度でレンダリングします。
ランナー：各プロジェクトは、コンテナーアプリケーションを介してターゲットプラットフォームで実行されます。Windowsの場合、コンテナアプリケーションはWin32 / C ++プログラムであり、Flutterコードをロードして実行時に実行できます。必要に応じて、ここでアプリケーションのネイティブコードを追加できます。
プラグイン：プラグインは、サポートする各プラットフォームのDartコードとネイティブコードのコレクションです。ネイティブコードを各プラグインに追加する必要があります。これらのプラグインは、WindowsバージョンのFlutterアプリケーションにコンパイルされます。
角度
https://opensource.google/projects/angle
スキア
https://skia.org/
今回リリースされたアルファ版は、今後数ヶ月の私たちの仕事の確固たる基盤を築きました。Windows 7以降のサポートにより、早期導入が好きな開発者に出発点を提供できることを願っています。
サンプルアプリケーションの紹介
FlutterのWindowsのサポートを実際に理解するために、私たちが作成したサンプルアプリケーションのいくつかをチェックすることができます。これらのアプリケーションは、新しいサポートを通じてWindows上で正常に動作します。最初の例はFlokkアプリケーションです。これは、gskinner.comの設計者および開発者とのコラボレーションの結果です。クリエイティブで美しいFlutterデスクトップアプリケーションを作成することにより、Flutterがデスクトップに対応できることを示すことを目指しています。Flokkは、実際のGoogle連絡先データを使用して、GitHubとTwitterで連絡先のアクティビティを表示できるアプリです。
WindowsデバイスでFlokkアプリを使用する場合は、GitHubから最新バージョンをダウンロードできます。gskinnerがこのアプリをどのように開発したかを知りたい場合は、彼らのブログ投稿「Flokk-Flutterを使用してデスクトップアプリを構築する方法」を確認してください。
Flokkをダウンロード
https://github.com/gskinnerTeam/Flokk/releases
Flokk-Flutterを使用してデスクトップアプリを構築する方法
https://blog.gskinner.com/archives/2020/09/flokk---how-we-built-a-desktop-app-using-flutter.html
さらに、サンプルアプリのFlutter Galleryでは、Flutterのすべての側面を表示できます。このアプリは最近完全に書き直され、デスクトップデバイスのサポートが追加されました。したがって、Web、Windows、macOS、およびLinuxで正常に動作することを保証できます。
Flutter Gallery（ウェブ版）
https://gallery.flutter.cn/
Flutter Galleryの多くのケースは、さまざまな概念のアプリケーションスタイルを表しています。Flutterを使用して独自のWindowsアプリケーションを設計するときは、それらを参照することをお勧めします。興味がある場合は、GitHubでソースコードを見つけることができます。
ソースコードアドレス
https://github.com/flutter/gallery
Flutter forWindowsの使用を開始します
Windowsのインストール手順に従って、FlutterSDKのインストールを開始してください。Windowsデスクトップデバイスをターゲットにするには、最初にデスクトップドキュメントに記載されているツールをインストールする必要があります。デフォルトでは、Flutterは、ソフトウェアの公式バージョンをビルドしていて、Windowsアプリケーションを開発するために構成していないことを前提としています。ただし、これはコマンドラインで簡単に解決できます。
$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop
WindowsシステムにFlutter開発環境をインストールして構成する
https://flutter.cn/docs/get-started/install/windows
デスクトップドキュメントで説明されているツール
https://flutter.cn/desktop#additional-windows-requirements
最初のコマンドは、（デフォルトの「安定した」チャネルの代わりに）実験的な「dev」チャネルを使用するようにFlutterを設定します。このようにして、Windowsなどのまだアルファ段階にあるプラットフォームサポートを使用できます。2番目のコマンドは、チャネルの最新バージョンを取得できます。3番目のコマンドを使用すると、PC上でWindowsアプリケーションを開発できます。
これらの設定を完了すると、AndroidStudioまたはVisualStudio Code拡張機能、またはコマンドラインを使用して新しいFlutterアプリを作成するたびに、Windowsサブフォルダーが作成されます。
Android Studio
https://flutter.cn/docs/get-started/editor?tab=androidstudio
VisualStudioコード
https://flutter.cn/docs/get-started/editor?tab=vscode
興味がある場合は、次のようにWindowsでデフォルトのアプリケーションを実行してください。
アプリケーションを作成した後、アプリケーションをビルドすると、リリースモードのネイティブEXEファイルと必要なサポートDLLが生成されます。FlutterがインストールされていないWindows10デバイスでこの新しいWindowsアプリケーションを実行する場合は、ここの手順に従って必要なファイルを圧縮およびパッケージ化できます。
デスクトップ環境でアプリケーションを配布する
https://flutter.cn/desktop#distribution
Windowsプラグイン
現在のWindowsサポートはまだアルファ版ですが、FlutterコミュニティのメンバーはすでにWindowsプラグインを開発しています。含める：
url_launcher：アプリからブラウザを起動し、指定されたURLを開きます
https://pub.flutter-io.cn/packages/url_launcher
path_provider：Documentsやtempなど、ユーザーのデバイス上の特別なディレクトリのパスを提供します
https://pub.flutter-io.cn/packages/path_provider
shared_preferences：アプリケーションセッション間で共有するために、ユーザー設定をディスクにシリアル化します
https://pub.flutter-io.cn/packages/shared_preferences
biometric_storage：biometricsによって暗号化されたストレージ
https://pub.flutter-io.cn/packages/biometric_storage
flutter_audio_desktop：デスクトップアプリケーションでオーディオを再生する
https://pub.flutter-io.cn/packages/flutter_audio_desktop
これらのプラグインを使用する利点は、それらのほとんどが他のFlutterプラットフォームもサポートしているため、アプリをAndroid、iOS、Web、Windows、およびその他のプラットフォームに適合させることができることです。さらに、pub.dev（Dart and Flutterのパッケージ管理プラットフォーム）上にありますが、パッケージの約3分の1はプラットフォーム固有のコードを含むプラグインですが、ほとんどのプラグインはそうではありません。たとえば、最高品質で最も一般的に使用されるパッケージの多くはFlutter Favoriteプランリストにあり、それらのほとんどはWindowsで実行できます。Windowsで実行できるパッケージの完全なリストを確認したい場合は、pub.devでクエリを実行できます。
FlutterFavorite
https://pub.flutter-io.cn/flutter/favorites
Windowsプラットフォーム用パッケージ
https://pub.flutter-io.cn/flutter/packages?platform=windows
Windowsとの相互運用性
独自のWindowsプラグインを作成することもできます。開発チャネルにいて、デバイスのWindows開発を有効にしている場合は、次のコマンドを使用できます。
$ flutter create --template plugin --platforms windows hello_plugin
この時点で、Flutterコードをlibサブフォルダーに追加し、WindowsコードをプラグインプロジェクトのWindowsサブフォルダーに追加できます。プラットフォームチャネルを使用して2つのスタック間で通信します。これは、基本的にDartとC ++コード間のメッセージングです。このトピックの最良の例については、url_launcherの実装を参照してください。
デュアルターミナルプラットフォームコードの記述（プラグイン書き込みの実装）
https://flutter.cn/docs/development/platform-integration/platform-channels
url_launcherの実装
https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_windows
ただし、プラットフォームチャネルは、Windowsとの相互運用性のための唯一のオプションではありません。Dart FFI（外部関数インターフェイス）を使用してライブラリをロードし、Win32APIなどのCスタイルのAPIを呼び出すこともできます。GitHubリポジトリでわかるように、path_providerプラグインはFFIを使用して実装されます。これは、プラットフォームチャネルを使用するurl_launcherとは異なります。FFIは、DartとC ++を切り替える必要はありませんが、必要なAPIを直接インポートするコードを記述できます。たとえば、MessageBoxAPIを呼び出すコードは次のとおりです。
typedef MessageBoxNative = Int32 Function(
IntPtr hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
Int32 uType
);
typedef MessageBoxDart = int Function(
int hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
int uType
);
final user32 = DynamicLibrary.open('user32.dll');
final win32MessageBox = user32.lookupFunction<MessageBoxNative, MessageBoxDart>('MessageBoxW');
void showMessageBox(String message, String caption) => win32MessageBox(
0, // No owner window
Utf16.toUtf16(message), // Message
Utf16.toUtf16(caption), // Window title
0 // OK button only
);
...
// call just like any other Dart function
showMessageBox('Test Message', 'Window Caption');
dart：ffiを使用してネイティブコードを呼び出す
https://flutter.cn/docs/development/platform-integration/c-interop
path_provider（Windows版）
https://github.com/flutter/plugins/tree/master/packages/path_provider/path_provider_windows
このコードには、プラットフォームチャネルのように2つのスレッドを切り替える問題はありません。FFIには、Win32、WinRT、COMなどのさまざまな種類のAPIのサポートが含まれています。ただし、CベースのWindows API全体を自分で急いでカプセル化しないでください。win32プラグインを確認してください。すでにこれを実行しており、うまく機能しています。実際、path_providerプラグイン自体は、win32プラグインを使用して実装されています。win32プラグインの開発プロセスと動作原理については、「DartFFIを使用してWindows開発の楽しさを高める」をお読みください。
Win32プラグイン
https://pub.flutter-io.cn/packages/win32
path_provider
https://pub.flutter-io.cn/packages/path_provider
Dart FFIを使用して、Windows開発の楽しさを高めます
https://medium.com/@timsneath/windows-fun-with-dart-ffi-687c4619e78d
Windowsリソースのフラッター
Flutter for Windowsの旅のどこにいても、最新の詳細が含まれているflutter.devのデスクトップ開発ドキュメントを読む必要があります。さらに、codelabを使用して、認証にOAuthを使用する、GitHub APIにアクセスする、GraphQLを使用するなどの実際のシナリオのコードを含め、Windows、macOS、およびWindows用のデスクトップFlutterアプリケーションの作成に慣れることもできます。または、Windowsで実行される別のFlutterデスクトップコードサンプルであるPhotoSearchを確認してください。
フラッターデスクトップのサポート
http://flutter.cn/desktop
Codelab
https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client
写真検索
https://github.com/flutter/samples/tree/master/experimental/desktop_photo_search
Photo Searchは、標準のWindowsファイル開くダイアログ、ツリービューウィジェット、分割ビューウィジェットを使用し、実際のRESTAPIを使用して検索結果を表示します。
他のデスクトップ指向のウィジェットについては、menubar（menubar）プラグイン、NavigationRailウィジェットおよびDataTableウィジェットをお勧めします。完全なデスクトップサポートを提供し、マウスアクションを介して子ウィジェットをパンおよびズームできるInteractiveViewerウィジェットにも興味があるかもしれません。
メニューバー
https://github.com/google/flutter-desktop-embedding/tree/master/plugins/menubar
NavigationRail
https://api.flutter.cn/flutter/material/NavigationRail-class.html
データ表
https://api.flutter.cn/flutter/material/DataTable-class.html
InteractiveViewer
https://api.flutter.cn/flutter/widgets/InteractiveViewer-class.html
非常に便利なウィジェットのもう1つのグループは、SyncFusionからのものです。これらは、Windows開発コミュニティでよく知られており、チャート、メータリングスロット、およびデータグリッドを作成するためのエンタープライズ品質のウィジェットを多数提供します。
SyncFusionウィジェット
https://pub.flutter-io.cn/publishers/syncfusion.com/packages
これらのウィジェットは、コミュニティおよびエンタープライズでの使用が許可されているため、プロジェクトに適したツールを見つけることができます。
Windowsアプリケーションケースのフラッター
Windows（および広義のFlutterデスクトップサポート）パッケージとプラグインに加えて、Flutter開発者は、Invoice Ninjaによるこの実験的な作業など、Windows用の優れたアプリケーションも構築しています。
請求書忍者
https://www.invoiceninja.com/
Invoice Ninjaはレシートソフトウェアを提供する会社であり、Flutterはその収益性を確実に押し上げました。彼らのソフトウェアは現在AndroidおよびiOSシステムをサポートし、Webで製品のデモンストレーションを提供し、ユーザーにデスクトップバージョンを提供します。これはすでに会社の計画の範囲内です。
製品デモ
https://demo.invoiceninja.com/
Invoice Ninjaは過去に使い果たされましたが、Webおよびモバイル端末のサポートしか提供できず、かつては3つの独立したコードベースを維持していました。Flutterと最近のFlutterDesktopを使用すると、単一のコードベースを使用して、すべての主要なプラットフォーム用のアプリケーションを構築できます。アプリケーションのデスクトップバージョンをほぼゼロのコストで入手し、そのパフォーマンスはすべてのバージョンの中で最高です！
— InvoiceNinjaの共同創設者であるHillelCoren
モバイルデバイスとデスクトップデバイスで実際の収益性の高いFlutterアプリケーションを構築する場合は、GitHubにアクセスして、参照用のソースコードを入手できます。
GitHub：請求書忍者
https://github.com/invoiceninja/flutter-client
Aartosには多くの優れた機能があり、リアルタイムのドローン検出システムもその1つであり、Flutterを使用して複数のプラットフォームでシステムのクライアントソフトウェアを構築します。このビデオは、Windowsクライアントの初期バージョンであり、モバイルクライアントと同時に実行されます。
Aartos
https://drone-detection-system.com/
UAV検出システムクライアントソフトウェア
https://drone-detection-system.com/aartos-dds/product-overview/
Windowsデモビデオ
https://www.bilibili.com/video/BV1p54y1R79t/
iOSバージョンとWindowsバージョンはどちらも同じコードベースを共有しています。
経験豊富なFlutter開発者の場合、異なるバージョンのFlutterを切り替える必要がある場合があります。たとえば、一方のバージョンはモバイルアプリの公式バージョンのリリースに使用され、もう一方のバージョンはWindowsalphaの実験に使用されます。 Flutter Version Manager（Version Manager）がお気に召すかもしれませんが、Windowsのグラフィカルユーザーインターフェイスが付属しています。ここからダウンロードできます。
Flutterバージョンマネージャー
https://github.com/leoafarias/fvm/releases
デモビデオ
https://www.bilibili.com/video/BV1LK411A7MX/
このツールはオープンソースであり、Leoがどのように見栄えを良くするかを自分で確認できます。
FVM
https://github.com/leoafarias/fvm
これからの計画
アルファ版がリリースされた後、私たちの注意は機能セットと安定した製品の改善に移ります。オープンソースプロジェクトとして、GitHubでベータ版の進行状況を追跡できます。アクセシビリティ機能、グローバル化とローカリゼーション、強化されたキーボードとテキスト処理、コマンドラインパラメータのサポートなど、まだやるべきことがいくつかあります。
Windowsベータ版のFlutter
https://github.com/flutter/flutter/projects/55
従来のWin32APIのサポートに加えて、UWPベースのFlutterコンテナアプリケーションの実験も行っています。このバージョンでは、FlutterがXboxを含むより多くのWindowsデバイスにログインできます。この実験の一環として、今週、WindowsストアでUWPベースのフラッターギャラリーをリリースしました。
UWP
https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide
Windowsストア：Flutter Gallery
https://www.microsoft.com/en-us/p/flutter-gallery/9pdwctdfc7qq
次のスクリーンショットは、Xboxで実行されているUWPベースのフラッターギャラリーを示しています。
次の図は、デュアルスクリーンWindowsデバイス（Windows 10Xエミュレーター）で実行されている同じアプリケーションです。
Windows10Xエミュレーター
https://docs.microsoft.com/en-us/dual-screen/windows/get-dev-tools
GitHubでUWPのFlutterの進捗状況について詳しく知ることができます。
UWPサポートを追加する
https://github.com/flutter/flutter/issues/14967#issuecomment-697108439
総括する
このアルファ版は、Flutterの強力な機能をWindowsにもたらし、開発者に宣言的で構成可能で応答性の高いアーキテクチャを提供します。このバージョンのマテリアル仕様の適応実装により、独自のニーズに応じてアプリケーションを設計し、Flutter開発およびデバッグツールのフルセットを使用できます。アプリの開発後、ネイティブ64ビットコードにコンパイルされます。他のネイティブアプリと同様に、パッケージ化して他のWindowsデバイスで実行できます。最後に、同じコードベースを使用して、Android、iOS、Web、macOS、およびLinuxプラットフォーム用のアプリを構築できます。
Flutterを使用してWindowsアプリの構築を開始したい場合は、フィードバックをお待ちしております。Windowsの専門知識を使用して、人気のあるプラグインのWindows実装を構築したり、Flutter用のWindows固有のツールを構築したりする場合（flutter build windowsコマンドの出力を介してMSIXコマンドラインツールを作成するなど）、大歓迎です。
フィードバックを送信
https://github.com/flutter/flutter/issues
人気のあるプラグインのWindows実装を構築する
https://flutter.cn/docs/development/packages-and-plugins/developing-packages#plugin
FlutterがWindowsのサポートを開始したとき、どのような素晴らしいアプリケーションを構築する予定ですか？コメントセクションで私たちとあなたの考えを共有することを歓迎します。
推奨読書
最後の画面をクリックします| 元の記事を読みます | Flutter中国の開発者コミュニティリソースにアクセスします