StableチャンネルのままFlutterデスクトップを利用する

5 min read読了の目安(約4500字

https://flutter.dev/desktop
上記公式からの抄訳です。公式日本語版がほしい。

Stable チャンネルで Beta スナップショットを利用する

SDKチャンネルにスナップショットという概念を導入し、StableチャンネルのままBetaの一部機能を利用できるようにしました。現在Beta版のデスクトップアプリを試すために、SDKチャンネルをBetaに切り替えていただく必要はありません。ただし、Stableに組み込まれたBetaのスナップショットは次のStableリリースまでアップデートされない点にご注意ください。デスクトップアプリの最新サポートが必要な場合はSDKチャンネルをBetaに切り替えましょう。

必要なもの

Flutterでデスクトップアプリを利用するには以下が必要です。

  • Flutter SDK
  • オプション: FlutterをサポートするIDE

追加で必要なもの(Windowsの場合)

  • Visual Studio 2019 (Visual Studio Code ではないですよ)を "Desktop development with C++" ワークロードと一緒にインストールする必要があります。デフォルトのコンポーネントもすべて入れてください。

追加で必要なもの(macOSの場合)

新規プロジェクトの作成

デスクトップアプリの新規プロジェクト作成は以下の通り行ってください。

設定

コマンドラインで以下のコマンドを実行します。"flutter: command not found" と出たら Flutter SDK がインストールされていること、SDKのパスが設定されていることを確認してください。

$ flutter config --enable-<プラットフォーム名>-desktop

<プラットフォーム名> のところには windowsmacoslinuxのいずれかを入れてください。

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

デスクトップアプリが有効になっていることを確認するには、デバイスリストをコマンドラインから呼び出してください。以下のような表示が出るはずです。
(有効にしたプラットフォームの名前だけが出ます)

$ flutter devices
1 connected device:

Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18362.1082]
macOS (desktop)   • macos   • darwin-x64  • macOS 11.2 20D64 darwin-x64
Linux (desktop)   • linux   • linux-x64   • Linux

最後に、何か問題が発生していないかを確認するため、flutter doctorも試してみてください。Windowsの場合は以下のような表示になるはずです。

PS > flutter doctor                                                                     
Doctor summary (to see all details, run flutter doctor -v):                                           
[√] Flutter (Channel beta, 1.27.0-1.0.pre, on Microsoft Windows [Version 10.0.19042.782], locale en-AU)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)                      
[√] Chrome - develop for the web                                                                      
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.7)                         
[√] Android Studio (version 4.1.0)                                                                    
[√] VS Code (version 1.51.1)                                                                          
[√] Connected device (3 available)                                                                    

macOSでは概ね以下のような表示になります。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.27.0-1.0.pre, on macOS 11.2.1 20D74 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.53.2)
[✓] Connected device (3 available)

仮にflutter doctorが開発対象ではないプラットフォームの問題を挙げていたら、無視して大丈夫です。例えば、Linuxのデスクトップアプリを作るのであれば、Android StudioやAndroid SDKをインストールする必要はありません。

デスクトップアプリを有効にしたら、IDEを再起動してください。 デバイスリストのプルダウンに windows (desktop)macOS (desktop)linux (desktop) などのアイテムが表示されます。

flutter config --enable-<platform>-desktopは一度だけの実行で大丈夫です。設定値の確認はflutter configコマンドでいつでも確認できます.

プロジェクトの作成と実行

デスクトップ用のプロジェクト作成は他のプラットフォーム用のものと変わりありません。

一度デスクトッププロジェクト用に環境設定してしまえば、IDEかコマンドラインからアプリの作成と実行ができます。

IDEでの実行

デスクトップ用の環境設定を行ったら、IDEを再起動しましょう。

IDE上で新規プロジェクトを作成すれば、iOS, Android, Web, そしてデスクトップ用のアプリが生成されます。

デバイスのプルダウンから windows (desktop)macOS (desktop)linux (desktop) のいずれかを選んで、実行すればアプリが起動します。

コマンドラインでの実行

コマンドラインではまず以下のmyappの部分をご自分のプロジェクト名に変更してプロジェクトを作成してください。

$ flutter create myapp
$ cd myapp

作成したアプリを起動するには、パッケージのトップディレクトリから以下のいずれかのコマンドを実行します。

$ flutter run -d windows
$ flutter run -d macos
$ flutter run -d linux

※ 他に認識されているデバイスがなければ、-d <platform>タグはオプションです。

リリース用のアプリをビルドする

以下のいずれかのコマンドを実行します。

$ flutter build windows
$ flutter build macos
$ flutter build linux

アプリの配布

デスクトップアプリのサポートがStable版に移行するまで、公にアプリをリリースすることはおすすめしません が、以下の情報も参考にしてください。

既存のFlutterプロジェクトにデスクトップサポートを追加する

プロジェクトのルートディレクトリで、ターミナルから以下のコマンドを実行します。

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

これにより既存プロジェクトに必要なデスクトップ用ファイルとディレクトリが生成されます。
特定のプラットフォームだけ追加したい場合は、platformsのリストの部分をそのプラットフォーム名に限定してください。