Flutterで作るデスクトップアプリ(Windowsアプリ/Macアプリ)

---

Flutterの記事を整理し本にしました

• 本稿の記事を含む様々な記事を体系的に整理し本にまとめました
• 今後はこちらを最新化するため、最新情報はこちらをご確認ください
• 35万文字を超える超大作になっています!!

---

まとめ記事

• Flutter系の記事のまとめ

概要

Desktopアプリは、PCでFlutterのアプリを動かすための実装です。
Windows/MacOS/Linuxでスマートフォンと同じようなPC上で動作するアプリを作ることができます

公式サイトのページ

最新情報や細かい条件などについては、公式サイトをご参照ください。
https://docs.flutter.dev/desktop

デスクトップアプリとは

デスクトップアプリとは、各OSのデスクトップ環境上で動作するアプリケーションです。
一般的にインストールをして動作しますが、インストールをせずに単体で動作するものもあります。
Flutterのweb版のようにブラウザベースではなく、OS上で直接実行されるアプリです。

代表的なデスクトップ開発環境には、electronなどがあります。

環境ごとの設定の有効化や追加要件について

2022/4時点では、windowsは標準で有効になっていますが、mac/linuxはベータ版であるため、デスクトップアプリを開発する場合は、下記の通り、コマンドで設定を有効にする必要があります。

cmd.sh

$ flutter config --enable-macos-desktop
$ flutter config --enable-linux-desktop

Windows/Mac/Linuxでは、それぞれ追加の要件があります
公式ドキュメントを確認し、必要なライブラリやパッケージ、SDK等のインストールを行ってください。

Windowsアプリの開発

まず、Desktoopがデバイスとして認識されているかを確認します。

cmd.sh

> flutter devices
3 connected devices:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.556]
Chrome (web)      • chrome  • web-javascript • Google Chrome 100.0.4896.60
Edge (web)        • edge    • web-javascript • Microsoft Edge 99.0.1150.46

Windows(desktop)が表示されていれば、問題ありません。

続いて、必要なランタイム(VisualStudioのC++のデスクトップ開発環境)をインストールします。

その前に、Windowsアプリとして実行させようとすると、下記のようにエラーが発生します。

cmd.sh

> flutter run -d windows
Downloading windows-x64/windows-x64-flutter tools...
Downloading windows-x64/flutter-cpp-client-wrapper tools...
Downloading windows-x64-profile/windows-x64-flutter tools...
Downloading windows-x64-release/windows-x64-flutter tools...
Launching lib\main.dart on Windows in debug mode...
lib\main.dart:1
Exception: Unable to find suitable Visual Studio toolchain. Please run `flutter doctor` for more details.
Exited (sigterm)

Downloadは必要な場合(初回など)に行われます

この時は、Flutter doctorでも、VisualStudioがインストールされておらず、デスクトップ開発環境が無い旨の情報が出力されています。

cmd.sh

> flutter doctor
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

※VisualStudioの部分のみ抜粋

VisualStudioのダウンロード

Windowsの場合は、VisualStudioのC++のワークロードが必要になるため、DLしてインストールと有効化を行います。
flutter doctorの結果にも出力されていますが、まずは、VisualStudioのダウンロードサイトにアクセスします。

その中から、無料で利用できるコミュニティ版をダウンロードします。

インストールの際に、ワークロードのタブの「C++によるデスクトップ開発」にチェックをいれてから、インストールをクリックします。

インストール後に、flutter doctorで正しくインストールされたか確認します。

cmd.sh

> flutter doctor
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.3)

※VisualStudioの部分のみ抜粋

Windowsのデスクトップアプリの動作確認

最後に、flutter run -d windowsでデスクトップアプリとして動作させます。

cmd.sh

PS C:\flutter_project\desktop_sample_app> flutter run -d windows
Launching lib\main.dart on Windows in debug mode...
Building Windows application...                                         
Syncing files to device Windows...                                 160ms

Flutter run key commands.
r Hot reload. 
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

 Running with sound null safety 

An Observatory debugger and profiler on Windows is available at:
http://127.0.0.1:60894/MtoFm6G9Baw=/
The Flutter DevTools debugger and profiler on Windows is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:60894/MtoFm6G9Baw=/

Windowsのデスクトップアプリの動作イメージ

Macアプリの開発

デバイスとして認識されているかを確認します。

cmd.sh

$ flutter devices

> 2 connected devices:
> macOS (desktop) • macos • darwin-x64   • macOS 12.0.1 21A559 darwin-x64
> Chrome (web)  • chrome • web-javascript • Google Chrome 99.0.4844.84

Macのデスクトップアプリの動作確認

続いて、コマンドを実行してみます

cmd.sh

$ flutter run -d macos                            
Launching lib/main.dart on macOS in debug mode...
Building macOS application...                                           
Syncing files to device macOS...                                   278ms

Flutter run key commands.
r Hot reload. :fire::fire::fire:
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

:muscle: Running with sound null safety :muscle:

An Observatory debugger and profiler on macOS is available at: http://127.0.0.1:51915/ofIPEp_Gukw=/
The Flutter DevTools debugger and profiler on macOS is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:51915/ofIPEp_Gukw=/

Macのデスクトップアプリでは、Xcodeとプラグインを使う場合は、CocoaPodsが必要になります。
こちらは、基本的に開発で利用しているものと同じなので本稿でではインストール方法は省略させていただきます。
もし、不明な場合はチュートリアル編3:環境構築をご参照ください。

Macのデスクトップアプリの動作イメージ

既存アプリのデスクトップアプリ対応

新規作成ではなく、既に作成済のアプリをデスクトップアプリに対応させる場合は、以下のコマンドを実施します。

cmd.sh

$ flutter create --platforms=windows,macos,linux .

上記コマンドを実行せずに、デスクトップアプリとして実行させると以下のようにエラーが発生します(MacOSの例)

cmd.sh

$ flutter run -d macos
Downloading darwin-x64/FlutterMacOS.framework tools...              4.6s
Downloading darwin-x64-profile/FlutterMacOS.framework tools...      2,404ms
Downloading darwin-x64-profile tools...                            756ms
Downloading darwin-x64-release/FlutterMacOS.framework tools...         3.9s
Downloading darwin-x64-release tools...                          1,430ms
Launching lib/main.dart on macOS in debug mode...
Exception: No macOS desktop project configured. See

Downloadは必要な場合(初回など)に行われます