Configuring & Installing VS code for Flutter and Dart

6 minute read

Flutter is a great framework built by google to create hybrid apps for mobile and other platforms. flutter has some really good documentation that you can follow as well. which I would be following as well, the link is given below. The thing you need to have installed on your PC: VS Code or Android Studio, Git.
Link: https://flutter.dev/docs/get-started/install/windows This article introduces the basics of flutter and dart theory, laying down the common concepts and techniques involved. This post is intended for the people starting with flutter development, making it easy to follow the core concepts and get comfortable with flutter basics.

Why Flutter?

Fast development

Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times without losing state on emulators, simulators, and hardware.

Expressive, beautiful UIs

Delight your users with Flutter’s built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.

Native Performance

Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android.

It’s free and open source.

Get started

Step 1: Installing Flutter

Link: https://flutter.dev/docs/get-started/install/windows

  • the first step is to go the link provided above and to download the flutter SDK you can do that in two ways. you need to have git installed for flutter to work.
  • Download the file and place it in your C:/ directory in a newly created folder titled src, extract the file. The path would look something like this C:/src/flutter and extract it there
  • If you have git installed you can just clone the repository in the newly created folder src in your C:/ directory.
    git clone https://github.com/flutter/flutter.git -b stable

Step 2: Updating your Path

Now, why we need to do this step is that we can use the flutter SDK in our windows command prompt or terminal from any directory we want in our OS. go to the Start search bar and enter the keyword env, which would give you the settings for “Edit your System Environment variable”, select it to have a new window opened as shown below and click on the Environment variables to add a new path for flutter

  • After you’ve clicked on the button, you would see a new window, click on the path and click on the edit button just like I’ve done in the image below and that would open another window( I know too much work but the rest is really easy)

well, in the new window just click on the new button and add the path to the bin folder in the new flutter SDK in your C: drive. Your path would be C:/src/flutter/bin. After you’ve done all the hard part, Close all of these windows by clicking on the ok button

Step 3: Run Flutter Doctor

now we need to run the command “flutter doctor” in our command prompt. and let flutter do its thing. but just to be on the safe side I’m going in the flutter directory (C:/src/flutter) to run this command and it might take some time.

Well, I have some good news and some bad news, the good news is that we’re done with this step and the bad news is that we have some more steps to follow. like in the image above we need to have an android studio, flutter extensions for vs code, and an emulator or a real android device to run our apps to run on.

Step 4: Installing Android Studio.

okay, so we don’t need to write code on an android studio we can do it on Vs code with the help of a few extensions but it’s crucial for creating apps. just go the official website of an android studio and begin your installation and after you’re done with it. we’ll move on to the other steps. The link to their site is below https://developer.android.com/studio after installing an android studio if you run the flutter doctor -v you would see some more things that needed to be taken care of in the image below.

to resolve the android toolchain issue with android licenses not accepted. just run the command flutter doctor — android-licenses and keep on accepting the licenses.

Step 5: Installing Flutter plugins for Android Studio

Now, if you look at the image above you could see that the terminal is telling us that the dart plugin and flutter plugin are not installed in the Android studio. So open your android studio. when you install the flutter plugin it will automatically install the dart plugin as well.

Step 6: Installing flutter packages in VS Code

well, just open your vs code editor and look for packages in the packages section in the left sidebar menu. you’ll need to have two packages installed. but if you install only the flutter package it will automatically install the dart package as well. just like in step 5.


  • Flutter
  • Awesome Flutter Snippets

Step 7: Set up your Android Device

Now, if you run the command flutter doctor -v in your terminal you would see that the only thing left is that you don’t have a connected device to your machine. we could download an emulator from our android studio but it would mean more work for your PC or laptop. if you’re comfortable with it then yeah go for it. But we’ll be attaching a real device to your machine. Download an opensource project on Github called scrcpy by Genymobile to mirror your mobile on laptop. you can follow the instructions there to mirror your android device and here is the link https://github.com/Genymobile/scrcpy

Step 8: Running your first flutter Application

if everything has gone according to the plan than we would see green ticks on all of the mentioned tasks. if you run the flutter doctor -v command in the terminal. no issues found.

Let’s create our very first flutter application. you can go to any folder you like to open up the terminal and run the following command flutter create firstApp to make your first flutter application and now to run your application go to the newly created directory by cd firstApp to run the project by the command flutter run. and it might take some time to run your first project

Thanks for reading through the article and if you find any issues or errors while installing the application. do let me know in the comments and I’ll try to help you as well.

Made with ❤️by Vaibhav Hariramani

Don’t forget to tag us

if you use this repo in your project don’t forget to mention us as Contributer in it . And Don’t forget to tag us Linkedin, instagram, facebook , twitter, Github

More Resources

To learn more about these Resources you can Refer to some of these articles written by Me:-

Download THE VAIBHAV HARIRAMANI APP

image

The Vaibhav Hariramani App (Latest Version)

Download THE VAIBHAV HARIRAMANI APP consist of Tutorials,Projects,Blogs and Vlogs of our Site developed Using Android Studio with Web View try installing it in your android device.

Follow me

Linkedin Badge Instagram Badge Twitter Badge GitHub Badge Gmail Badge Medium Badge

Happy coding ❤️ .

Categories:

Updated: