How to Setup Flutter on Android Studio, Visual Studio Code Easily, and Start Building Amazing Applications!
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:
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.
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.
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 (XAHM 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.
Now, let’s see how to install the AVD Manager
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.
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”)
So, finally our lab is ready!
Let’s run a Test Application.
flutter create 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.
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.
Now, open the folder where the dart file is located.
From here, one can change the code, run the code, run emulator, launch device etc.
Here, we can do hot reload by just saving the updated file. (Ctrl+s)
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 :”)