DEV Community

Fredson Costa Rodrigues
Fredson Costa Rodrigues

Posted on • Updated on

Setting and Installation Flutter in VS Code

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.

Select operating system

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

File to download

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"

Enviroment

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.

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:

Settings Android Studio

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

Settings Android Studio

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.

Settings SDK

❗️❗️ 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. 😆😆

Top comments (1)

Collapse
 
prosperc profile image
globaltipleap

Hello please while does the logo of my android studio code different