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

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:

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:

Prerequisites

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:

Flutter Windows
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!

Installation successful

What is inside the Flutter SDK?

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 Studio Setup

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.

AVD

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

Installation Complete
Select Any Theme
Installing the required components (default)
Open SDK Manager from Configure

We need to install the following SDK Tools:

SDK Tools

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

New Environment Variable
SDK installed successfully!

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

AVD MANAGER
Creating a new virtual Device
Select any virtual device or System Hardware selection

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

System Image
Naming of Device

After naming and verifying, click Finish!

New virtual device successfully created

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

Emulator detected

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.

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
Security alert

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

Application launched Successfully!

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.

Change

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

Application updated

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.

msinfo COMMAND
Enabled the Virtualization

We need to ensure that virtualization is enabled in our device. If not, you will have to enable it from BIOS settings (Hardware Virtualization).

Now, our Virtual Studio Code(VSC) is ready for installation.

VSC(Visual Studio Code)
VSC Launched!

Now, open the folder where the dart file is located.

lib folder
Install this flutter extension
dart code
Debugging

From here, one can change the code, run the code, run emulator, launch device etc.

Final Setup Complete!

Here, we can do hot reload by just saving the updated file. (Ctrl+s)

Final flutter doctor

So, a final call to the doctor shows that everything is fit and fine!

I hope that everyone will be able to setup this environment very easily and will be able to start building amazing apps with flutter!

For any queries feel free to contact me.

Let’s connect in Linkedin!

Thank you for reading :-)

Aeromodeller|Passionate|Technoholic|Learner|Technical writer