FlutterをWindows10にセットアップ

篠原 隆司

Windows10 で Flutterアプリを開発するときのセットアップ手順を紹介します。

公式のインストールマニュアル

https://flutter.dev/

ヘッダー内　右上「Get started」をクリック

「Windows」をクリック

ここにやり方が書かれていますのでこの通りやっていきます。

必要要件の確認

Windows 10 or later (64-bit), x86-64 based.

ディスク容量 1.64 GB 以上の空き

Windows PowerShell 5.0 以上 （Windows10にプリインストール済み）
Git for Windows 2.x　　「WindowsコマンドプロンプトからGitを使用オプション」

Git for Windows 2.x のインストール

既にインストール済みであれば、コマンドプロンプトからインストールされていることを確認してＯＫならスキップします。

マニュアルの「Git for Windows」の文字をクリックしてリンク先を開きます。

https://git-scm.com/download/win

Click here to download the latest (2.39.0) 64-bit version of Git for Windows. This is the most recent maintained build. It was released 22 days ago, on 2022-12-21.

https://git-scm.com/download/win

「Click here to download」に貼られているリンクをクリック

もしくは

Other Git for Windows downloads
Standalone Installer

https://git-scm.com/download/win

の次の「64-bit Git for Windows Setup.」をクリックします。

「Git-2.39.0.2-64-bit.exe」をダウンロードします。

ダウンロードできたら「Git-2.39.0.2-64-bit.exe」を起動します。

  1. ライセンス画面 ・・・ Next
  2. インストール先 ・・・ そのまま、Next
  3. コンポーネント ・・・ そのまま、Next
  4. スタートメニュー ・・・ そのまま、Next
  5. デフォルトエディタ ・・・ 「Use Visual Studio Code as Git's default editor」に変更、Next
  6. git init 時のメインブランチ名 ・・・ 「override the default branch name for new repositories」で「main」を使うように設定、Next
  7. PATHの設定 ・・・ 「use git and optional unix tools from the command prompt.」（Flutterのマニュアルには「Use Git from the Windows Command Prompt」）、Next
  8. SSH ・・・ そのまま、Next
  9. HTTPS ・・・ そのまま、Next
  10. 改行コード ・・・ 「Checkout as-is, commit Unix-style line endings」、Next
  11. ターミナル ・・・ そのまま、Next
  12. git pull　・・・ そのまま、Next
  13. 資格情報 ・・・ そのまま、Next
  14. キャッシュ ・・・ そのまま、Next
  15. 実験的オプション ・・・ そのまま、Next
  16. Finish

インストール後の確認

「win + R」 「cmd」Enter
git -v
git version 2.39.0.windows.2

Flutter のインストール

手順は公式のマニュアル通りです。

ダウンロード

「flutter_windows_3.3.10-stable.zip」のボタンをクリックしてダウンロード

他のバージョンはFlutter SDK releasesにあります。
https://docs.flutter.dev/development/tools/sdk/releases

解凍して配置

zipを解凍して目的の場所に配置

D:\apps\flutter_windows_3.3.10-stable

ここでは▲ここに配置することにします。
「C:\Program Files\」だったり特殊文字やスペースを含むディレクトリでなければ他の場所でもOKです。

flutter_windows_3.3.10-stable.zip を開くと「flutter」フォルダがあるので展開します。

次のようになります。

パスを通す

さて、ここでやりたくない作業が必要になってきます。
ですが、やりたくないので公式でない手順で行います。

D:\apps\flutter_windows_3.3.10-stable

先述の通りこちらにインストールした続きでの手順になります。

ここでの完成形は次のようになります。

call フォルダを作成する

D:\apps\flutter_windows_3.3.10-stable\call

初期化ファイルを作成する

先ほど作成した call フォルダの下に init.bat を作成します。

D:\apps\flutter_windows_3.3.10-stable\call\init.bat

ファイルの中には次の内容を書きます。そのままコピペでOＫです。

@ECHO OFF
SET PATH=%PATH%;%~dp0..\flutter\bin
cd %~dp0

プロンプト起動ファイルを作成する

インストールディレクトリ直下に cmd.bat ファイルを作成します。

D:\apps\flutter_windows_3.3.10-stable\cmd.bat

ファイルの中には次の内容を書きます。そのままコピペでOＫです。

@ECHO OFF
CALL .\call\init.bat
cmd

動作確認

cmd.bat をダブルクリックするとコマンドプロンプトが開きます。

PATH を確認してみましょう。

echo %PATH%

PATH の最後に flutter のパスが追加されていることを確認できます。

これで完了ですがついでに確認してみてください。

普通に「win + R」の「cmd」Enter でコマンドプロンプトを起動し、echo %PATH% を見てみると、flutter のパスが含まれていないことが分かります。

このように、Windows の環境変数を変えてしまうのではなく、このコマンドプロンプトの中だけ PATH が書き換わっているという状態を作り出しています。

これの何が嬉しいか、と言うと、複数バージョンを同居したくなったときですが、詳しいことはまた今度します。

fluuter と dart の確認

公式のマニュアルの手順に戻ります。

D:\apps\flutter_windows_3.3.10-stable\cmd.bat

こちらから起動したコマンドプロンプトで次のコードを実行します。

where flutter dart

マニュアルだと dart.exe の話しになってますが、最新版には dart.exe が含まれなくなったようなのでここまでの確認だけでOKです。

バージョンの確認

flutter --version

flutter doctor

現在の状況を診断して教えてくれます。

flutter doctor

とりあえずは「Chrome」に緑のチェックが入ってればOKです。