Setting Up My Visual Studio Code IDE for Flutter Development

So, I decided to be stubborn for once and set up my Visual Studio IDE for Flutter development without the prior installation of Android Studio. Ha!, well that was definitely challenging! After hours of constant back and forth, reading one article after another, trial and error, solving the errors that came along the way, I FINALLY GOT MY FLUTTER APP RUNNING!!!

Let me save you the hustle and show you how I went about mine (this is solely for Windows users).

To-Do 1: Downloading Visual Studio IDE, Java SDK and Android SDK Manager

1. Download and install the latest version of Visual Studio Code IDE.
2. Download and install the latest Java JDK (in my case JDK 12).
   NB: I recommend downloading the .exe file rather than the .bin as the former creates the Java folder straight away in your C:\Program Files folder.
3. Download and install the stand-alone Android SDK Manager from this link. Run the Android SDK Manager, select from the GUI the tools needed to run the mobile application; Android SDK Tools, Android SDK Platform-tools and Android SDK Build-tools (continue updating till Android SDK Tools is at revision 25.x.x or above; Android SDK Platform-tools is at revision 29.x.x and Android SDK Build-tools is at 28.x.x or above).
   Since I normally run my flutter apps on a my android phone rather than an emulator (yep, my computer can’t handle an emulator), I additionally install Google USB Driver and the corresponding SDK Platform matching my android device’s API, Google API and Sources for Android SDK for the mobile phone your application will be running on .

To-Do 2: Downloading Dart and Flutter SDK

1. Download and run the Dart .exe setup.
2. Download the zipped Flutter SDK or visit the official Flutter website to follow the steps slated out.
   NB: Create a folder in your C:\ drive and name it src. Inside C:\src extract the zipped Flutter SDK downloaded above.

To-Do 3: Adding the various downloaded SDKs to your computer’s system variable.

We first need to access the PATH

NB: After running the Dart executable file, a dart sdk variable was added additionally to my system variables without having to manually add it.

1. Right-click on My Computer or This PC, proceed to select Properties.
2. In the left-pane, select Advanced System Settings as shown below.

Advanced System settings under This PC Properties

3. Select Environment Variables in the dialog box appearing next as shown below.

4. Scroll through the System variables, select Path and proceed to select Edit as shown below.

5. In the dialog box shown below,

under the Variable value, add the various paths to the sdk at the end of the variable value whilst separating each path with a semi-colon ‘;’.

The paths to mine were as follows;
Dart: C:\Program Files\Dart\dart-sdk\bin;
Flutter: C:\src\flutter\bin;
Java: C:\Program Files\Java\jdk-12.0.2\bin;
Android SDK Tools:
C:\Users\{username}\AppData\Local\Android\android-sdk\tools;
Android SDK Platform-Tools:
C:\Users\{username}\AppData\Local\Android\android-sdk\platform-tools

NB: I recommend restarting your computer if after editing your paths, flutter commands are unrecognized when run in your command prompt.

To-Do 4: Ensuring Flutter has been successfully installed

1. Open Command Prompt
2. Run “flutter doctor” command to determine if there are any further issues you need to resolve for flutter to work seamlessly on your computer.

To-Do 5: Creating your flutter application

If all problems are resolved, proceed to download your flutter “boilerplate” application files.

1. Still inside the Command Prompt, navigate to the location you want your flutter application files to be created in.
2. Run the command flutter create {appname}.
   Wait a few minutes whilst the flutter “boilerplate” is created.

Congrats, you have your flutter application ready to be run.

To-Do 6: Making Visual Studio Code compatible with Flutter and Dart

Open your installed Visual Studio Code IDE
Click on Extensions.

Extensions tab on Visual Studio Code

In newer versions of Visual Studio Code, the above symbol shown represents Extensions and can be found on the left-pane of the IDE.
In the resulting text box, search flutter and dart extensions and proceed to install both.

Dart extension page on Visual Studio Code IDE

Flutter extension page on Visual Studio Code IDE

NB: In my case, reloading the IDE was required.

Visual Studio Code IDE is now ready Flutter app development!

To-Do 7: Running your flutter application on Visual Studio Code IDE

1. Open your flutter application inside the Visual Studio Code IDE.
2. Run your emulator or in my case, connect your android device to your computer. The IDE will show whether a device has been connected or not as shown below.

Device Connected Status in Visual Studio Code

Where a device is connected, the device name will replace the No Device in the image above.

Open the Terminal inside the IDE. (Ctrl + ` is the default command for opening the terminal in VS CODE).

Navigate to the flutter application folder and enter the command flutter run.

You now have your Flutter application running!!!!

I hope this helped. Please do not forget to comment if there is anything I missed or you have an easier way to go about the process. Thanks!