How to install, setup and run your first Flutter application on Android Studio

What is Flutter?

Flutter is an open-source UI toolkit made by Google for developing beautiful and native Mobile, Web and Desktop application from a single code base. It uses Dart as it’s programming language which is similar to Java, Swift and JavaScript. Flutter’s hot reload and hot restart makes it very easy to make changes in the codebase and see it live almost instantaneously which results in faster development process. Big companies like Google, eBay, BMW, and more are building apps with Flutter. More information here. If you want to learn more about what Flutter is please refer to this article.

Now that you have a fair idea about what Flutter is, let us dive into the installation process.

How to install and setup Flutter?

Note: This process is specifically for devices running the Windows OS. You can refer these docs for macOS and Linux respectively.

Requirements:

• Operating System: Windows 7 SP1 or later (64-bit), x86–64 based
• Disk Space: 1.32 GB (does not include disk space for IDE/tools)
• Tools: Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10) and Git. (Note: Git is not a necessary requirement)

Steps:

1. Download the latest Flutter SDK for Windows from here.

2. Extract the zip file and move the contained flutter Folder to “C:\src” directory. (If the src folder does not exists in your C: drive, please make one).

Note: If you don’t want to download a fixed version of installation bundle(although you can upgrade later), alternatively you can clone the Flutter repo on GitHub, and change the branches and tags as needed.

C:\src>git clone https://github.com/flutter/flutter.git -b stable

Your final Directory should look something like this:

You are now ready to run Flutter commands in the Flutter Console.

Update Path:

Sometimes you would want to run Flutter commands like flutter run and flutter create in regular Windows PowerShell or Command Prompt. You can take these steps to add Flutter to the PATH environment variable.

Step 1:

Search “env” in the Start Search bar and select Edit environment variables for your account.

Step 2:

Check for an entry of PATH in User Variables.

• If it exists, append/add C:\src\flutter\bin to the PATH variable
• If it does not exist, create one and add C:\src\flutter\bin to it.

Final output should look something like this:

Note: You must close and reopen any existing Windows Terminal for changes to affect.

Hurray!!, you successfully have setup Flutter in your Windows OS.

To check that everything works fine run this command in Windows PowerShell:

flutter doctor

The output should look something like this:

Note: If you don’t have Android Studio installed in your computer, please install it from here. If you do not have it installed, you will get an output something like this:

[-] Android toolchain — develop for Android devices

• Android SDK at D:\Android\sdk

✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ

• Try re-installing or updating your Android SDK,

visit https://flutter.dev/setup/#android-setup for detailed instructions.

Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in several editors such as VS Code, Android Studio and Emacs. More information here.

Configure Android Studio for Flutter Development and set up an Android Virtual Device:

• Download and install Android Studio from here.
• Open Android Studio

• Click on Configure button on bottom right corner and then click on Plugins.

• In the marketplace search for Flutter and install the plugin. When prompted for installing the Dart plugin, click on the Install button.

• Restart the IDE to see the changes and you will get a new option to Start a new Flutter project.
• Click on Start a new Flutter project and then select Flutter Application and hit Next.

• Give your project a name, setup the Flutter SDK path if it’s not auto detected, select a project location and give a short description. Then, click Next. Note: The path to your Flutter SDK is C:\src\flutter. For this project, I will keep everything as default.

• Next, give your Flutter app a Package name. If not sure let it be default and click on Finish.

• Let Android Studio create the project. Once done you will see the code for classic Counter app provided by Flutter in the main.dart file.

• OK, now you have the code setup. But where can you run your code? Well, there are 2 options.
• 1st: Setup an AVD (Android Virtual Device) and run in an Android Emulator.
• 2nd: Use your Android phone to run your Flutter app.
• For this tutorial, I will use the 1st method but at the end will give you a brief on how can use your Android phone to run your Flutter app.
• So let’s get going. Click on the AVD manager button on top right to start setting up your Android Emulator.

• A popup will come where you can create your new Android Emulator.
• Click on Create Virtual Device to create a new Android virtual device.

• Next, select a Mobile Device and hit Next. For this tutorial, I will be using the Nexus 6P as an example. Feel free to select a device of your choice.

• The next step is to select an Android version for this Mobile phone. I will be using Android 10.0 (Q) (API level 29) for this tutorial. Feel free to choose any one of your choice. (You will need to download it first). After selecting click Next.

• Next step is to configure the AVD. For beginners, I would suggest keeping all the settings to default except for one. Change the Emulated performance graphics settings to Hardware. This would improve the performance of your AVD significantly. If you want to explore more and change more configurations of the device, click on Show advanced settings and change it as per your need. After configuring, click Finish and wait for AVD to complete its setup.

• After the setup, you will see a new device added to your AVD manager. Click on the play button to start the emulator.

• After a few moments, your new Android device will start setting up. Wait for some time till it sets up and then your emulator is ready to run your first Flutter app.
• This is how your emulator should look.

• If you see this screen, then you have almost completed the whole process and you are ready to run your first Flutter app. Things to look at:
• 1st: See that your device is listed in the devices section of Android Studio
• 2nd: main.dart should be set as the configuration to run your file.

• Now just click on the play button or press Shift+F10 to run your code and patiently wait for your code to compile and run.

• After your code has run, you should see a screen like this in your Android device with the counter app running. And with this, you have completed your Flutter setup and ready to start developing beautiful and native mobile apps.

As promised earlier, I will also show you how you can run your flutter apps in an actual Android device. So here are the steps:

• Go to Settings->About Phone->Software Information. (Note: This path might change depending on your device. Find for your device here)
• Here you will find something named as Build number. Click on it 7 times. This will enable Developer options in your device.
• After developer options is enabled, you will find a new Setting menu named after it.
• Click on developer options and search for USB debugging and turn it on.
• That’s it. Now just connect your phone to your Laptop/Computer via USB cable and Android Studio will automatically detect your device.

Conclusion

You have successfully configured Flutter on your Laptop/Computer and completed the first step towards building beautiful cross-platform Mobile applications. You are now ready to start developing Flutter apps and showcase your apps to the world.

What Next?

Head over to the Flutter docs and start building your first Flutter app. Happy Coding :)