Setting and Installation Flutter in VS Code
Tags: fluter, vscode, dart, android
Published: 2023-03-20 21:04:41

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](https://docs.flutter.dev/get-started/install) and select your operating system. In my case I will select Windows.


![Select operating system](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7385p4p640x62bk8rva.png)

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

![File to download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7m9j1nfqd39t7p7gvqr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxhbiu5uxwilpx5l3yf9.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i7qbilzamibcetaiqhs.jpeg)
 
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](https://developer.android.com/studio) to download. After downloading the executable file, follow these steps:


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


![Settings Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03u047t85q7j2ed2a9cy.png)

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

![Settings Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aim4s3ufbd583wlqthqv.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/muirbzfbrfqb65chvo9z.png)

❗️❗️ Another configuration important is instalation do JDK. Verify if this installed in your machine. If it not this installed so click this [link](https://docs.oracle.com/en/java/javase/18/install/installation-jdk-microsoft-windows-platforms.html#GUID-E3C75F92-D3B2-421D-A9BE-933C15F7CD1B). 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](https://code.visualstudio.com/download) 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. 😆😆