Setup Flutter with VS Code
Sarang Pratham
Posted on January 10, 2022
Well, I decided to learn Flutter. I tried my hand at android app development and it was quite fun. At times it was daunting, especially when I ran the emulator and everything just stopped responding 😅. Overall Android Studio was a great experience!.
So this time instead of running a emulator I will be using my real device and why not let's use VS Code.
Before proceeding I assume you have Android Studio installed, it'll make things easier!.
-
Download the Flutter SDK
- Choose your operating system (mine was windows 10)
- Extract the zip file .I have extracted it to my
E:/
drive
Download Git if you don't have. (Flutter depends on it)
-
Set environment variable
- Copy the bin folder path from the extracted folder location. For me it was
E:\flutter\bin
- Open up environment variables tab. paste the copied path to
Path
variable. Hit OK. - Now you should be able to run Flutter commands anywhere. Open your terminal and type
flutter --version
that should fetch your Flutter version.
- Copy the bin folder path from the extracted folder location. For me it was
Download the Flutter extension in VS Code.
Open Android Studio, go to SDK manager, click on second tab SDK tools, check the Android SDK Command-line Tools and have it installed.
Run command
flutter doctor
in your terminal, here you might get a problem saying "Android SDK location not found", if that's the case then runflutter config --android-sdk /path/to/android/sdk
(problem finding SDK path? search in Android Studio's SDK manager).Run
flutter doctor
command again. Check if everything's fine.Now in your terminal run
flutter doctor --android-licenses
and press y to accept every license.In VS Code open up command palette
Ctrl+Shift+P
and typeflutter:new project
hit enter. Choose a template (Application) and give it a name. It will generate a default flutter app.And Now to run the app on a real device, first enable USB debugging in your device settings. Connect the device to your PC. The bottom status bar in VS Code will now display your device name.
Finally run using
flutter run
command or by clickingF5
in VS Code.
That's all! 👋
Posted on January 10, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024