WindowsでのFlutter環境構築
ツルオカ基本的に必要なインストール操作
- Flutter SDKのインストール
- Visual Studio Code（以下、VS Code）のインストール
-
Git for Windowsのインストール
- GitのインストールはFlutter環境構築とは直接関係しないですが開発には必須のため入れてます
- Android環境のセットアップ
検証環境
デバイス仕様
デバイス名 DESKTOP-ITV7A5P
プロセッサ Intel(R) Core(TM) i3-7100U CPU @ 2.40GHz 2.40 GHz
実装 RAM 8.00 GB
システムの種類 64 ビット オペレーティング システム、x64 ベース プロセッサ
Windows仕様
エディション Windows 10 Enterprise
バージョン 21H2
インストール日 2023/09/13
OS ビルド 19044.1708
エクスペリエンス Windows Feature Experience Pack 120.2212.4170.0
背景
非エンジニアが初めてFlutterを触る際にWindowsが選択されることが多い。会社貸与端末でアプリ開発を体験してみよう、という名目でもWindowsが選択肢として有力である。個人的にWindows周りのセットアップ方法に自信がなかったので、改めてキャプチャを交えながら紹介していく。
ツルオカFlutter SDKのインストール
Windows 10以上 (64bit), x86-64ベース / 1.64GBの空き容量が必要です。
1. Get the Flutter SDKよりインストール
2. アーカイブを解凍して適当なディレクトリに移動
例えば/devフォルダなどを作り、そこに解凍したflutterフォルダごと移動します。
3. pathを通す
フォルダを移動しただけではSDKは使えない（flutterコマンドが通らない）ため、pathを通す必要があります。
From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
Windows検索バーにenvと入力すると「環境変数を編集」がヒットするので開きます。
3-1.ユーザー環境変数の「PATH」を選択し、「編集」ボタンを押下します。
3-2. 2.で配置したflutterフォルダの絶対パスを追加し、「OK」ボタンを押下します。
4. flutter doctorの確認
ターミナルでflutter doctorを入力して、以下のような内容がコンソールに表示されればOKです。
ツルオカVisual Studio Code（以下、VS Code）のインストール
Flutter SDKのインストールの前に、先にVS CodeをインストールしてもOKです。
1. VS Codeのインストール
2. FlutterのVS Code拡張をインストール
Flutterでの開発をしやすくするため拡張をインストールしてください。以下のリンクを押下するか、VS CodeのExtensionsから「Flutter」などで検索するとヒットします。
ツルオカFlutterサンプルアプリを作成して起動する
新規のFlutterプロジェクトを作成し、起動するところまで確認します。
1. 新規Flutterプロジェクトの作成
1-1. VS Codeのコマンドパレット（Ctrl + Shift + P）を開き、「Flutter: New Project」を選択します。
1-2. Applicationを選択
1-3. flutter_my_appというプロジェクトを作成します。
2. 依存パッケージのダウンロード
そのままpubspec.yamlというファイルを開き、右上にある矢印ボタンを押下します。
3. 起動
とりあえず起動確認するにはEdgeでブラウザ起動するのが良いです。
ちなみにWindows（デスクトップアプリ）で起動するには、別途Visual Studio Toolchainのインストールが必要とのことです。
ツルオカGit for Windowsのインストール
1. ダウンロード
2. インストール
選択項目がたくさんありますが、基本的に全て「Next」を選択していけば良いです。
各項目の画面キャプチャは以下のBookを参考にしてください。
3. コマンドが通ることを確認
VS CodeのTerminalなどでgit versionを入力し、gitコマンドが通ること（=バージョンが返ってくる）を確認できればOKです。
ツルオカAndroidセットアップ
Androidアプリ開発をする場合はAndroid Studioのインストールが必要です。これがないとflutter doctor -vコマンドで以下のエラーが表示されます。
手順は公式ドキュメントのAndroid setupにも記載されております:
1. Android Studioのインストール
基本的には設定を弄らず「Next」を押下してインストールを完了させます。インストールの後半に「License Agreement」の項目が表示されるので、各ライセンスを選択し「Accept」で同意すると完了します。
2. Android SDK Command-line Tools(latest)のインストール
インストール完了後にflutter doctor -vコマンドを実行すると、今度は違った警告が表示されます。
Command-line Toolsをインストールします。以下の記事の手順がわかりやすいと思います。
Android StudioのSDK Toolsを選択 > チェックを入れてApplyします。
3. Android licensesの同意
ここまでで再度flutter doctor -vコマンドを実行すると、以下の表示がされると思います。あと少しです。
以下のコマンドを入力しライセンスに合意します。
flutter doctor --android-licenses
同意を求めらるので、問題なければ「y」と入力しいくつかのライセンス条項に同意します。
最後に、flutter doctor -vコマンドを入力しすべてチェックが付けば（以下キャプチャ）完了です。
4. ワイヤレス実機ビルド（任意）
手順3までで、Android端末をUSB接続すれば無事実機ビルドも可能になります。
一方で、Android 11以降の端末をお持ちであればワイヤレスデバッグも可能です。
上記記事がわかりやすいですが、最初はadbコマンドが通らないと思うのでplatfom-toolsの環境変数への追加が必要です（platform-toolsは単体でインストールすることもできますが、Android Studioに内包されているため追加のインストールは不要です）。
環境変数にはAndroid SDK Locationに記載されているパスにplatform-toolsを追加したパスを追加します。
例: C:¥Users¥[username]¥AppData¥LocalAndroid¥Sdk¥platform-tools
