how to install flutter in vscode

 how to install flutter in vscode

I always wonder how people build apps. What kind of tools and where to start? And then I found Flutter which I want to give it a try. I will try to make it simple and clean for the installation and if there is something wrong feels free to message me.

Step 1: Android Studio w Emulator

First please download Android Studio

Then click on AVD Manager and Create a Virtual Device

Image for post
AVD Manager

You can choose yours but in this case, I choose Pixel 3 :)

Image for post
Create a Virtual Device (Pixel 3)

You can try playing with this but I always stick to Android 9.0

Image for post
Select System Image

Then just click Next until your virtual device is ready.

Image for post
Our Virtual Devices
Image for post
Pixel 3 Ready

Step 2: Flutter

Second, please download flutter.

Extract the file that you download and put it inside C Drive

Image for post

After that make sure the PATH is being set up like this.

PATH environment

Step 3: Visual Studio Code

Please download Visual Studio Code and follow the steps below

After download and install please make sure that you have this extension installed on your VSC

Flutter

Image for post
The extension (Flutter)

Dart

Image for post
The extension (Dart)

 Step 4: Dart SDK

Please download Dart SDK to make sure we can create and run flutter apps successfully

Download x64 architecture

Image for post
Dart SDK Download

Then create a new folder name as Dart inside Program Files and put the folder inside that newly created folder.

C:\Program Files\Dart
Image for post
New Dart Folder

After that make sure the PATH is being set up like this.

Image for post
PATH environment

First Project with Flutter!!!

Okay! Supposedly it should be working right now. So let's try to check using Visual Studio Code the version of our flutter.

flutter --version
Image for post
Check flutter version

Let's try to upgrade our flutter if its not the updated one.

flutter upgrade
Image for post
Upgrade Flutter

Okay, let's check flutter using its doctor haha.

flutter doctor
Image for post
Check Flutter Health

Okay right now let's try to create our first simple project.

flutter create first_project
Image for post
Flutter create the first project

So supposedly it should like the above figure. Right now go back to AVD Manager and start our virtual device. After that let's try to run the application and make sure you are inside the same directory with pubspec.yaml file.

flutter run
Image for post
Flutter work successfully

So now you can start to make your first mobile application using Flutter! Enjoy and have fun with flutter :) In case you wonder what theme I use for my visual studio code is it's from HackTheBox and I will put it in the references.

Reactions

Post a Comment

0 Comments