スポンサーリンク

Setting up Android Studio+Flutter for Windows and installed VSCode plugin

Android Studio
スポンサーリンク

Goal of this article

  • Set up the Flutter development environment on Windows.
  • Install the Vscode plugin for Flutter.

Download the Flutter SDK

DL the zip from the link below.

Windows install
How to install on Windows.

After you have downloaded the zip, extract it to a location of your choice. In my case, I created a flutter directory directly under C:\ and extracted it there I regretted making an extra flutter directory, but it was too much trouble, so I just went ahead with it.

Next, we need to edit the environment variables since we need to pass the path.
Type “environment variables” in the taskbar search and you will get a list of candidates.

  1. Click “Environment Variables”.
  2. Select “Path” and click “Edit”.
  3. Add the flutter path as shown in the last image.

Run “flutter doctor” at the command prompt, and if you see the following message, you can confirm that the path has been passed.

C:\flutter\flutter>flutter doctor
Running "flutter pub get" in flutter_tools... 12.1s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.

[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.
スポンサーリンク

Installing Android Studio

Download the installer from the link below.

Download Android Studio and SDK tools  |  Android Developers
Download the official Android IDE and developer tools to build apps for Android phones, tablets, wearables, TVs, and more.

After downloading the exe file, run it.
When I did so, I got the following error when downloading the component.

My PC had a Ryzen CPU, so it seemed that I needed to check the “Windows Hypervisor Platform” box.

If you don’t get any errors like I did, the device seems to be registered by default, so if you activate the play button, the virtual Android screen should come up.

スポンサーリンク

Setting up Flutter

Run flutter doctor again at the command prompt.

C:\flutter\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ No Java Development Kit (JDK) found; You must have the environment variable JAVA_HOME set and the java binary in your PATH. You can download the JDK from https://www.oracle.com/technetwork/java/javase/downloads/.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.

We have installed Android Studio, but we are getting a “not installed” message, so the first thing we need to do is to fix this. Execute the following command at the command prompt.

> flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"

Run flutter doctor again at the command prompt.

C:\flutter\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ 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.
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

The “Android Studio” part has been resolved. Next, we will resolve “Android license status unknown”.

  1. Click “Configure” in “Android Studio”.
  2. Check “Android SDK” → “SDK Tools” → “Android SDK Command-line Tools”.
  3. Also, uncheck “Hide Obsolete Packages”.
  4. Check the “Android SDK Tools” checkbox.

 

 

 

 

 

Then execute the following command.

> flutter doctor --android-licenses

Run flutter doctor at the command prompt.

C:\flutter\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19042.1110], locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)

• No issues found!

All checked!

スポンサーリンク

Setting up Vscode

Install the Flutter plugin.

Install Flutter Widget Snippets. To be honest, you don’t need this, but I’ve heard it’s useful for development, so I’ve included it.

Creating a project

In VScode, execute the “Ctrl + Shift + P” shortcut key, then type “flutter”.
Select “Flutter: New Application Project”.

Enter a project name to create it.

Launching the emulator

You can launch the emulator from VScode.
Select the device you have just created in Android Studio.
Then, run the “flutter run” command in the console to display the sample app.

This is the end of the process.

Featured Articles

Setting Up Docker and docker-compose on WSL2
Setting Up Docker and docker-compose on WSL2.Installing WSL2. Installing Docker 20.10.1 . Installing docker-compose 1.27.4
Setup React.js/Next.js development with Docker and docker-compose
It is very easy to set up a development setup with docker and docker-compose. Node.js 14.15.4 is installed. On top of that, we have Next.js installed.
Django+MySQL+Nginx with Docker and docker-compose
Docker and docker-compose make it easy to create a Django+ Nginx+MySQL development environment. Python 3.8.5, MySQL8.0, and Nginx1.18 to install.

コメント