Zenn
📌

【Flutter】Web, Desktop(Windows) 開発環境構築

2021/06/16に公開
Flutter
tech

キテルキテルと言われてはいましたが、中々手を付けられずにいたFlutterをやっと触れたので、自分用にメモを残しておこうかと。

【2022/05/17】Flutter 3.0.0で確認

方針

モバイルについては既に先人たちが知見を残してくれているので、ニッチではありますが、FlutterでWebとWindowsデスクトップアプリをなるべく同一ソースで作成する方針でいこうと思っています。

環境構築

何はさておき環境構築、Windows10で公式通りにセットアップを進めます。

インストール

  1. flutter_windows_x.x.x-stable.zipをダウンロード
  2. zipファイルをアクセス権限が引っ掛からない場所(C:\Users[ユーザー名]とか)に展開
  3. 環境変数のPathにflutter\binフォルダーを追加（上記例なら"c:\Users[ユーザー名]\flutter\bin"）
  4. コマンドプロンプト(PowerShell)でflutter --versionを実行してバージョン情報が表示されればOK
  5. 次にflutter doctorを実行、するとAndroid toolchainとAndroid Studioにエラーと警告が出ますがWebとWindows開発だけなら問題なし
  6. 最後にflutter config --enable-windows-desktopを実行してWindowsデスクトップのサポートを有効にする Flutter 3.0.0では不要
    ここまででFlutterの設定は完了
  7. Windowsデスクトップ開発にはVisual Studioが必要なのでダウンロードしてくる
    個人なら無償のVisual Studio Communityでよいかと
  8. インストーラーを起動し、「C++によるデスクトップ開発」にチェックを入れインストール

【2022/05/17 追記】
現在、Visual Studioをインストールしたあとにflutter doctorを実行するとBad UTF-8 encodingというエラーが発生する。
こちらは英語環境以外で発生するバグのようで、対応方法としては以下からvswhere.exeをダウンロードしてきて、C:\Program Files (x86)\Microsoft Visual Studio\Installerにあるファイルと差し替える。
https://github.com/microsoft/vswhere/releases

エディターの用意

こちらも公式のエディターを設定するに記載があるVisual Studio Codeをインストールします。

  1. Visual Studio Codeをダウンロード
  2. インストーラーからインストール（特に難しいところはない）
  3. VS Codeを起動して左のメニューにある拡張機能(□が4つあるアイコン)を選択、検索窓からFlutterを検索してインストール
  4. 必要に応じて検索窓からjapaneseを検索して日本語プラグイン(Japanese Language Pack for Visual Studio Code)もインストール
  5. インストール済みの拡張機能にDart、Flutter(、Japanese Language Pack for Visual Studio Code)があればOK
  6. Ctrl+Shift+Pでコマンドを起動しdoctorと入力、Flutter：Run FlutterDoctorを選択
  7. 結果、Flutter・Chrome・Visual Studio・VS Codeに✓が入っていればOK

ここまでで環境構築は完了。

サンプルアプリ実行

ひとまず公式が用意しているサンプルアプリを実行するところまでいきます。

  1. VS CodeでCtrl+Shift+Pからflutterを入力し、Flutter：New ApplicationProjectを選択
  2. プロジェクトのフォルダーを選択
  3. プロジェクト名を入力（例：myapp）
  4. main.dartファイルが表示されればサンプルアプリ構築完了
  5. 次にVS Code右下のバーにWindows(windows-x64)が表示されていれば[実行]>[デバッグの開始]を選択する(別のデバイス名が表示されている場合、デバイス名をクリックすれば変更できる)
  6. Windowsデスクトップアプリが起動するので軽く動作確認する
  7. デバッグを終了し、デバイスをChrome(web-javascript)に変更する
  8. 再度[実行]>[デバッグの開始]を選択すると、Chromeが立ち上がりWebアプリが起動するので軽く動作確認する

以上で、サンプルアプリのWindowsデスクトップ版とWebアプリ版の確認が取れたと思う。
最初立ち上げたときは簡単すぎて感動した。

次回はTODOアプリを作成してみる。

Discussion