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

---
# :book: Flutterの記事を整理し本にしました :book:
https://zenn.dev/kazutxt/books/flutter_practice_introduction

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

---

## まとめ記事
* [Flutter系の記事のまとめ](https://qiita.com/kazutxt/items/524acb1c134015682ccf)

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

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

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

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


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

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

```shell:cmd.sh
$ flutter config --enable-macos-desktop
$ flutter config --enable-linux-desktop
```

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


# Windowsアプリの開発
まず、Desktoopがデバイスとして認識されているかを確認します。

```shell: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アプリとして実行させようとすると、下記のようにエラーが発生します。

```shell: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)
```

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

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

```shell: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のダウンロードサイトにアクセスします。

https://visualstudio.microsoft.com/downloads/

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

![](https://storage.googleapis.com/zenn-user-upload/1c231d0a9ac3-20220403.png)

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

![](https://storage.googleapis.com/zenn-user-upload/3da5f6493c57-20220403.png)


インストール後に、`flutter doctor`で正しくインストールされたか確認します。
```shell:cmd.sh
> flutter doctor
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.3)
```
※VisualStudioの部分のみ抜粋

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

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

```shell: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のデスクトップアプリの動作イメージ
![](https://storage.googleapis.com/zenn-user-upload/3859a1137a3d-20220404.png)



# Macアプリの開発
デバイスとして認識されているかを確認します。

```shell: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のデスクトップアプリの動作確認
続いて、コマンドを実行してみます
```shell: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=/
```


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

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

![](https://storage.googleapis.com/zenn-user-upload/4e8aaf15d5ce-20220403.png)


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

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

```shell:cmd.sh
$ flutter create --platforms=windows,macos,linux .
```

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

```shell: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
```

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