きっとラボ

プログラミングや自然科学などの話題がメイン

Flutter で Windows アプリを開発するための準備

Flutter でのモバイルアプリ開発はやっていましたが Windows のデスクトップアプリはまだ開発したことがなく、今後やりたいと思った時にいつでも出来るように準備をしましたので、その際の手順をまとめました。いちいちモバイルのエミュレータを立ち上げるのが面倒な時にも便利だと思います。

環境は以下の通りです。

  • Flutter : master 1.19.0-2.0.pre.209
  • Visual Studio Community 2019 : 16.5.3

手順の一部は以下を参考にしています。

 

目次

 

Flutter の設定を変更

Flutter for desktop on Windows を有効にする

 以下のコマンドで有効にできます。

>flutter config --enable-windows-desktop

チャンネルを master へ切り替える

f:id:k_hiroyuki:20200531024518j:plain

stable チャンネルで作業をしていたのですが、Windows アプリの場合は master チャンネルでないとビルドできないようでしたので、切り替えます。

>flutter channel master

f:id:k_hiroyuki:20200531030115j:plain

flutter devices で PC を認識してくれるか確認

これで、実行端末として自身の PC を認識してくれました。

>flutter devices

f:id:k_hiroyuki:20200531025855j:plain

 

必要なツールを取得する

flutter doctor

次のコマンドで必要なツールをダウンロードできます。

>flutter doctor

f:id:k_hiroyuki:20200531031147j:plain

ただし、私の環境では VC++ のビルドツールに不足がありましたので別途入手しました。

C++ でのデスクトップ開発ツールを入手

Visual Studio Installer を起動して必要な Work load をインストールします。

私の環境では必要なものは以下のとおりです。(doctor コマンドの結果に必要なものがバージョン番号と共に出ています)

利用している Visual Studio のバージョンで変更をします。

f:id:k_hiroyuki:20200531121639p:plain

表示される画面で「ワークロード」タブから「C++ によるデスクトップ開発」にチェックを入れます。

f:id:k_hiroyuki:20200531122735p:plain
「個別のコンポーネント」タブへ切り替え、そこで前述の3つのコンポーネントにチェックを入れます。(バージョン間違えに注意)

f:id:k_hiroyuki:20200531122037p:plain

f:id:k_hiroyuki:20200531122048p:plain

f:id:k_hiroyuki:20200531122057p:plain

ツールのパスを通す

以上をインストールし終えたら、環境変数の Path へ以下を追加します。*1

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin

  • MSVC

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\VC\Auxiliary\Build

ここまで完了したらパスが通っているか確認します。

f:id:k_hiroyuki:20200531123446j:plain

再度 flutter doctor

ここまでが問題なく完了できれば、恐らく flutter doctor で怒られることは無いと思います。

f:id:k_hiroyuki:20200531123715j:plain

 

いよいよアプリをビルド

書き忘れていましたが、既存のプロジェクトに対しては

> flutter create .

を先にターミナルで実行して desktop 用の準備をしなければなりません。

2020/06/04 追記

 

既存のプロジェクトがあればそれを、無ければ初期に自動生成されるやつで。(ただし既存のプロジェクトが Windows 版を意識せずモバイルの Native に依存していれば、うまく実行できない可能性はあります)

私は Android Studio を利用しているのでその画面を示しますが、恐らく他の IDE でも同様かと思います。

実行対象のデバイス一覧に Windows (desktop) の文字列が出ているか確認します。出ていなければ他になにか不備があります。flutter doctor の結果を見つつ検索すれば大体の問題は出てきます。(他力本願)

もし最初から IDE を起動していたのであれば、まずは再起動しましょう。

f:id:k_hiroyuki:20200531124206p:plain

いざビルドラン!

 

 

f:id:k_hiroyuki:20200531124611p:plain

上手くいきました。

参考に出しているアプリは Flutter のアーキテクチャサンプル用に作成したものです。今の所公開はしていません。

 

最後に

Flutter での Windows アプリの開発をするための準備手順のまとめは以上です。

ここまで読んでくださりありがとうございました。もし記事に何か不備や問題点があればご指定いただけると幸いです。

 

*1:エディションやバージョンによってパスが異なる可能性があります。