Setup Flutter with VS Code

sarangpratham

Sarang Pratham

Posted on January 10, 2022

Setup Flutter with VS Code

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!.

  1. Download the Flutter SDK

    • Choose your operating system (mine was windows 10)
    • Extract the zip file .I have extracted it to my E:/ drive
  2. Download Git if you don't have. (Flutter depends on it)

  3. 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.
  4. Download the Flutter extension in VS Code.

  5. Open Android Studio, go to SDK manager, click on second tab SDK tools, check the Android SDK Command-line Tools and have it installed.

  6. 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 run flutter config --android-sdk /path/to/android/sdk (problem finding SDK path? search in Android Studio's SDK manager).

  7. Run flutter doctor command again. Check if everything's fine.

  8. Now in your terminal run flutter doctor --android-licenses and press y to accept every license.

  9. In VS Code open up command palette Ctrl+Shift+P and type flutter:new project hit enter. Choose a template (Application) and give it a name. It will generate a default flutter app.

  10. 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.

  11. Finally run using flutter run command or by clicking F5 in VS Code.

That's all! 👋

💖 💪 🙅 🚩
sarangpratham
Sarang Pratham

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