Walkthrough Installing Flutter with Visual Studio Code

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

Download Android Studio and SDK tools | Android Developers

Then click on AVD Manager and Create a Virtual Device

AVD Manager

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

Create a Virtual Device (Pixel 3)

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

Select System Image

Then just click Next until your virtual device is ready.

Our Virtual Devices

Pixel 3 Ready

🤳🏻 Step 2: Flutter

Second, please download flutter.

Windows install

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

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

Download Visual Studio Code - Mac, Linux, Windows

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

Flutter

Extension (Flutter)

Dart

Extension (Dart)

🤳🏻 Step 4: Dart SDK

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

Dart SDK archive

Download x64 architecture

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

New Dart Folder

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

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

Check flutter version

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

flutter upgrade

Upgrade Flutter

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

flutter doctor

Check Flutter Health

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

flutter create first_project

Flutter create 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

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.

If there is any suggestion please tell me or if there is something that I can improve also please do tell me. Hope this writeup help anyone and let’s learn together :)

H0j3n

REFERENCES

1. https://pub.dev/
2. https://flutter.dev/
3. https://itsallwidgets.com/
4. https://marketplace.visualstudio.com/items?itemName=silofy.hackthebox