How to Setup Flutter on Android Studio, Visual Studio Code Easily, and Start Building Useful & AmazingApplications !

8 min readAug 18, 2020

Let’s setup our lab environment for app development using Flutter. We will be using Visual Studio Code and Android studio IDE.

So what exactly is flutter?

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia and the web from a single codebase.

Flutter consists of two important parts:

An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.

To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.

Dart focuses on front-end development, and you can use it to create mobile and web applications.

If you know a bit of programming, Dart is a typed object programming language. You can compare Dart’s syntax to JavaScript.

What kinds of apps can I build with Flutter?

Flutter is optimized for 2D mobile apps that want to run on both Android and iOS. Flutter is also great for interactive apps that you want to run on your web pages or on the desktop. (Note that web support is in beta, and desktop support is in alpha.)

Apps that need to deliver brand-first designs are particularly well suited for Flutter. However, apps that need to look like stock platform apps can also be built with Flutter.

You can build full-featured apps with Flutter, including camera, geolocation, network, storage, 3rd-party SDKs, and more

Software Prerequisites:

Operating System: Windows 7 or Later version of Windows (64 bit).
Flutter application for windows/mac/linux (Available on the official flutter website)
Android studio IDE
Visual Studio Code for windows/mac/linux.

So let’s get started!

Firstly, we need to extract the .zip file for Flutter Windows that we’ve downloaded already. As soon as we extract, flutter will be installed. All we need to do is set the path. After extraction, we should get the following files:

This is the program we will use and will have to set it’s path

New Path added successfully in the Environment Variable

In Command Prompt, if we execute the command “flutter” and the following output comes up, installation of flutter is successful!

What is inside the Flutter SDK?

Heavily optimized, mobile-first 2D rendering engine with excellent support for text
Modern react-style framework
Rich set of widgets implementing Material Design and iOS-style.
APIs for unit and integration tests
Interop and plugin APIs to connect to the system and 3rd-party SDKs
Headless test runner for running tests on Windows, Linux, and Mac
Dart DevTools for testing, debugging, and profiling your app
Command-line tools for creating, building, testing, and compiling your apps

Does Flutter work with any editors or IDEs?

Flutter support plugins for Android Studio, IntelliJ IDEA, and VS Code.

Now, initially, if we run the “flutter doctor” command, we will get the following output.

flutter doctor

So, lets get started with the remaining process!

Step 1: Installing the Android Studio IDE

Android Virtual Device

An Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android phone, tablet, Wear OS, Android TV, or Automotive OS device that you want to simulate in the Android Emulator. The AVD Manager is an interface you can launch from Android Studio that helps you create and manage AVDs.

So, we need to tick the Android Virtual Device positively.

Now, after giving the location for installation, the process is complete.

Installing the required components (default)

We need to install the following SDK Tools:

Android SDK Build-Tools
Android Emulator
Android SDK Platform-Tools
Android SDK Tools
Google USB Driver
Inter x86 Emulator Accelerator (HAXM installer)

Now, we will have to add a new path for the Android SDK Location.

We can see here, using the “flutter doctor” command we can see that the Android SDK is installed successfully, but there are some plugins missing, which we will need later.

Install Flutter plugin(Dart will automatically be installed)

Now, let’s see how to install the AVD Manager

Select any virtual device or System Hardware selection

One can select any system Hardware and download and install any system image.

After naming and verifying, click Finish!

If we run the “flutter emulators” command, we can find this output:

Now, if we launch the device, we will get a virtual device having internal RAM, CPU, etc.

Device launched

Now, if we get run “flutter devices” command, we will find that a new device is detected.

Now, let’s call the doctor once more! (“flutter doctor”)

flutter doctor

So, finally our lab is ready!

Let’s run a Test Application.

flutter create test_app

test_app

We can see that it is displaying that our application is in test_app\lib\main.dart.

This is the dart file that has been created. Let’s run this app then!

flutter run // from the root folder of the flutter project

We will have to allow access. After a few minutes, our test application will be launched in our device!

The best thing about this application: It supports Hot Reload (no need to compile after changing the code)

Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM). After the VM updates classes with the new versions of fields and functions, the Flutter framework automatically rebuilds the widget tree, allowing you to quickly view the effects of your changes.

So let’s test it!

Let’s make a change in the dart file.

Now, all we need to do is press the “r” key for hot reload!

Magic! In just a single click, application updated!

Now, you guys must be wondering what is the use of Virtual Studio Code, well here it comes! It will provide us with an IDE. For that we need to check a few things, before using it.