Flutterの環境構築（Windows）

少し前から業務でFlutterを使ってiPhoneアプリを作り始めたのですが、プライベートでも勉強を兼ねてFlutterを使ってみたいと思い始めました。しかし、私はずっとスマホはAndroid一筋でしたので、Windowsを使ってAndroidアプリを作っていこうと思い、まずは環境構築から始めたいと思います。

Flutter SDKインストール

1. Flutterの公式サイトに移動
2. トップページのGet Startedをクリック
3. “Choose your development platform to get started”画面に移動するので、Windowsをクリック
4. “Choose your first type of app”画面に移動するので、Androidをクリック
5. “Start building Flutter Android apps on Windows”画面に移動するので、”Install the Flutter SDK”の項目まで画面をスクロールし、以下からzipファイルをダウンロードする。
   
6. ダウンロードしたzipファイルを解凍し、Cドライブ直下に移動する。（今後の説明では、移動後のパスがC:\flutterとして説明していますが、ご自身で好きなパスに配置し、以降の説明で出てくるflutterのパスは読み替えて下さい。）

Windows環境変数の設定

flutterが実行できるようにPathを通します。

1. Windowsキーをクリックし、”env”と入力してEnterキーをクリックする。
2. “システムのプロパティ”ウィンドウが開くので、右下にある”環境変数(N)…”をクリックする。
3. ユーザーの環境変数の変数欄にPathがあるので、それを選択して”編集(E)…”ボタンをクリックする。
4. 右上にある”新規(N)”ボタンをクリックし、”C:\flutter\bin”と入力して、右下のOKボタンをクリックする。
5. コマンドプロンプトを開き、”flutter –version”を実行してエラーにならなければOK。

Android Studioのインストール

1. Android Studioの公式ページに移動し、以下からexeファイルをダウンロードする。
   
2. ダウンロードしたexeファイルを実行する。幾つか選択肢が出てくるが、全部デフォルトのままインストールを実行する。
3. “Import Android Studio Settings”ダイアログが出てくるので、”Do not import settings”を選択してOKボタンをクリックする。
4. “Help improve Android Studio”ダイアログが出てきてGoogleに情報を送るかどうか聞いてくるので、好きな方を選択する。（私は”Don’t send”を選択しました。）
5. Android Studioが起動してくるので、Nextボタンをクリックする。
6. Install Typeが聞かれるので、Standardを選択してNextボタンをクリックする。
7. 確認画面が出てくるので、再度Nextボタンをクリックする。
8. “License Agreement”画面になるので、全てAcceptを選択する。
9. Finishボタンをクリックする。
10. （Componentのダウンロードが始まるので、しばらく待つ。）
11. “Intel HAXM installation failed.”というエラーが出ますけど、とりあえず無視してFinishボタンをクリックする。

Flutterに必要なツール類のインストール状況をチェック

ここで、コマンドプロンプトを起動して”flutter doctor”を実行してみると以下の表示。

Visual Studioの方は今の所特に必要無いと思うので、Android toolchainの方を解決してみる。

Android toolchainのインストール

1. Android Studioを起動する。
2. “More Actions”をクリックして、”SDK Manager”をクリックする。
3. “SDK Tools”タブに移動し、”Android SDK Command-line Tools (latest)”にチェックを入れてOKボタンをクリックする。
4. 確認画面が出るので、OKボタンをクリックする。
5. ダウンロード/インストールが始まるので、終わったらFinishボタンをクリックする。
6. コマンドプロンプトを起動し、”flutter doctor –android-licenses”を実行する。
7. ライセンスの同意が何度か求められるので、”y”と入力してからEnterキーをクリックする。（私は2024/04/21に実行して、6回くらい求められました。）
8. もう一度”flutter doctor”を実行すると、Visual Studio以外のエラーが消えていたので先に進みます。

Flutter pluginのインストール

1. Android Studioを起動する。
2. Pluginsをクリックする。
   
3. “Flutter”を検索してInstallをクリックする。

動作確認

1. Android Studioを起動する。
2. “New Flutter Project”をクリックする。
3. “Generators”からFlutterを選択し、”Flutter SDK path”に”C:\flutter”を入力する。
4. Nextボタンをクリックする。
5. Project nameに”test_flutter”と入力し、PlatformsにAndroidだけ選択した状態でCreateボタンをクリックする。
6. main.dartが表示されてくるので、画面の右上の方のDevice Managerをクリックする。
7. 以下をクリックし、Pixel 3aのエミュレータを起動する。
   
8. （起動が完了するまで、しばらく待つ）
9. Shift + F10を押して実行してみる。
10. （しばらく待つ。最初は結構待つ。）
11. エミュレータ上に”Flutter Demo Home Page”が立ち上がり、動作確認完了。
    

以上でWindows + Flutter + DartでのAndroidアプリを開発するための環境構築が完了です。

お疲れさまでした。