Configuring & Installing VS code for Flutter and Dart
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.
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
- If you enjoyed this, follow me on Medium for more
- Follow me on Kaggle for more content!
- Let’s connect on LinkedIn
- Interested in collaborating?
- Check out my website.
- Check out my website.
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
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
Happy coding ❤️ .