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.
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.
- Click “Environment Variables”.
- Select “Path” and click “Edit”.
- 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.
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”.
- Click “Configure” in “Android Studio”.
- Check “Android SDK” → “SDK Tools” → “Android SDK Command-line Tools”.
- Also, uncheck “Hide Obsolete Packages”.
- 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
コメント