Setting and Installation Flutter in VS Code

Fredson Costa Rodrigues — Mon, 20 Mar 2023 21:04:41 +0000

Hello everyone, how's it going? I've had a bit of trouble configuring my environment with Flutter in VS Code. So, I decided to share what helped me here. Are you ready?

We'll be going through three steps:

1 - Installing Flutter
2 - Installing Android Studio
3 - Installing VS CODE

Installing Flutter

First, go to the website of Flutter and select your operating system. In my case I will select Windows.

Now download the file zip and after create a new folder called src in your C: and unzip these file.

Your path should look like this::

c:\src\flutter

Got it? Perfect!?. Now, let's create an environment variable with the path of your Flutter installation on your machine.

To create the environment variable, follow these steps:

1 - Access the properties of your operating system
2 - Click on advanced settings
3 - Select variable of environment
4 - Click on "PATH", after click on "NEW" and paste the path of flutter path of flutter "c:\src\flutter\bin"

To test if Flutter is working, you need to open the terminal and type the following command:

flutter doctor

Look at the image below. You need to verify that everything is configured as the flutter requests.

Done! You have successfully installed Flutter! 😆

❗️❗️ However, please note that you need to install all configuration requirements for Flutter, so please pay close attention. ❗️❗️

Installing Android Studio

Now, let's install Android Studio. Access the Website to download. After downloading the executable file, follow these steps:

1 - Uncheck the 'Android Virtual Device' option and click Next:

2- Check the options as shown in the image below:

Done! Android Studio is now installed!

Now, open the app and click on Settings. Open the SDK Manager. AThen, click on the SDK Tools tab and check if the Android SDK Plataform-Tools is installed. If it is not installed, check this option and perform the installation.

❗️❗️ Another configuration important is instalation do JDK. Verify if this installed in your machine. If it not this installed so click this link. Configure also the environment variable of JDK, so perform this step again. ❗️❗️

Done! Android Studio Installed! 😆

Installing VS Code

The process of installing VS Code is easy. Click on link to download it. Then, install the app normally.

Let's configuration the flutter in vs code. Follow the steps below:

1 - Open VS Code
2 - Click on Extesion:
2.1 - Search to flutter and install it.
2.2 - Search to dart and install it.

Done! Flutter is now configured in VS Code!

❗️❗️ Oh, I just remembered something! This configuration helped me. I created a new environment for Android SDK Platform-Tools, and the path should look like this:

C:\your_user\your_user\AppData\Local\Android\Sdk\platform-tools

By doing this, Flutter worked for me and I was able to run the project in VS Code.

Well, in my next post, I will show you how to configure the Android emulator in VS Code to test with Flutter. 😆😆

DEV Community: Fredson Costa Rodrigues

Setting and Installation Flutter in VS Code

Installing Flutter

Installing Android Studio

Installing VS Code