![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/8e939af554c9a38340e7886be1225a04-1024x719.png)
Windows10に、Flutter3.0をインストール。Android Studioでの環境構築の記録です。
ほぼ、Flutter環境構築 -Windows編-|中央コンピューターサービス株式会社(CCS) の内容を参考にさせていただきました。 但し、Flutterのバージョンが最新の3.0 なので、若干、手順に違いがあります。Android Studioについてもバージョンによる違いがあります。
Flutte3.0のインストール
公式サイトより flutter_windows_3.0.0-stable.zip をダウンロードします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h47_43-1024x666.png)
flutter_windows_3.0.0-stable.zip を解凍して、その中にある「flutter」を任意のフォルダに配置します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_22h10_48.png)
環境変数にPATHを通します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_22h15_06.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_22h14_56.png)
flutter doctorで環境構築が出来ているかの確認
PowerShellにて、下記のコマンドで、Flutterの環境構築が出来ているかを確認します。
> flutter doctor
Flutterの環境構築に足りないものが表示されます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h50_22-1024x616.png)
「Android Studioが必要」と表示されます。 Android Studioをインストールします。Android Studioをインストールすれば、Android toolchain(これも必要と表示されています)も一緒にインストールされます。
Android Studio のインストール
公式サイトより、 android-studio-2021.2.1.14-windows.exe をダウンロードして、インストールします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h58_19-1024x666.png)
指示に従って、インストールします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h00_59.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h01_10.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h03_47.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h04_15.png)
Android Studioのセットアップのウィザードがはじまります。
- Install Type に「Standard」を選択
- Select UI Themeで、お好みのUIを選択
- Verify Settingでダウンロードされる内容を確認後、インストールが始まります。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h16_18.png)
インストール後、 Android Studio が起動します。
Android Studio の設定
Android Studio の設定をします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h04_44.png)
Plunginの設定をします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h05_00.png)
FlutterのPluginをインストールします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h06_07.png)
ここで再度、「flutter doctor」で確認をします。エラーが表示されます。
X cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
下記のサイトの記載を参考にエラーを解消しました。
![](https://assets.st-note.com/production/uploads/images/65802173/rectangle_large_type_2_bfd5fc628cad240f30d8d871be973dba.png?fit=bounds&quality=85&width=1280)
再度、「flutter doctor」で確認をします。エラーが解消されました。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h52_25-1024x616.png)
Flutterプロジェクトの作成
Android Studioのメインメニューより「New Flutter Project」をクリックします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h05_00-1.png)
Flutter SDKのパスを指定します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h07_04.png)
プロジェクトの情報を設定します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h08_53.png)
プロジェクトが起動します。Device Managerを起動します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h10_03_02-1024x719.png)
「Create virtual device」をクリックします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h10_12.png)
AndroidのHardwareの選択画面になります。デフォルトのPixel2を利用します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_20h10_47.png)
該当のライブラリをダウンロードします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h17_26.png)
スマホ画面の縦・横の向きを選択します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h17_39.png)
virtual device の準備が出来たので、「Pixel 2 API 30」を起動します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h18_01.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h18_22.png)
「Pixel 2 API 30」が起動しました。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h19_16-1024x719.png)
カメラのアイコンをクリックすると、スクリーンショットが撮れます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h23_59.png)
Flutter プロジェクトを起動します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h39_04-1024x719.png)
Flutter のデフォルトのサンプルアプリが起動しました。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h26_25-1024x719.png)
右下の「+」ボタンのクリックで数字が、カウントアップされていきます。問題なく動作しているようです。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2022/05/2022-05-14_19h26_50.png)