Flutter With Android Studio Step By Step Installation Guide

Introduction

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android. As per the official Flutter documentation, it’s a modern reactive framework (keyword being reactive) to develop cross-platform native mobile apps using a single code base. Even though Google doesn’t say it, many people from the developer community are considering this as Google’s answer to Facebook’s React Native and Microsoft Xamarin.Forms.

In this article, we will set up a Flutter development environment in Android Studio and execute the default code generated by the New Flutter Project template. I am using Android Studio so that existing Android developers can easily start working on this, however, according to Flutter documentation there are plugins support available for Visual Studio Code and JetBrains IntelliJ IDEA IDEs also.

Official Installation Documentation (Read for Hardware requirements)

This blog is the simplified version of official installation documentation focused on setting up the environment with respect to Android Studio:

• Mac
• Windows

Installation Steps on Windows

Since most of the developers in India use Windows Machines, we will start with Windows installation steps first, however, please keep in mind that you will only be able to get Android output when using Windows machine as Mac machine with Xcode is required for iOS development

1. Download and install Android Studio.
   
   
2. Install Git for Windows with the Use Git from the Windows Command Prompt option enabled during installation
   
   
3. Open Command Prompt by either writing cmd in Run windowor by using Start Menu like Start=> Windows System => Command Prompt (in Windows 10)
   
   
4. Get Flutter SDK: Write and execute following code in a terminal window,
   
   git clone -b beta https://github.com/flutter/flutter.git
   
   You will get the following screen showing the progress of the installation,
   
   
   
   
   
5. After executing the above command Flutter will be downloaded in the Folder where you have executed the command, which is your current logged in folder, now in order to run Flutter commands we need to set up the PATHenvironment variable for the current user by following these steps,
   
   
   • Go to “Control Panel > User Accounts > User Accounts > Change my environment variables” you will get the following screen:
     
     
     
     
     
   • Under “User variables” check if there is an entry called “Path”, In most of the cases (like mine) it’s there so select it and click edit to open the below given Window and edit it or else click on New to create this variable and give the path of Flutter\binfolder as highlighted:
     
     
     
     
     
6. Restart Windows to fully apply this change
   
   
7. Now open Command prompt again and execute fthe Futter doctor command which will check your environment and displaysa report to the terminal window like the below screenshot, also it will show the errors; in my case it’s asking me to install Android SDK and Android Studio (as I missed installing it earlier):
   
   
   
   
   
8. Keep on executing the commands mentioned in the result ofFflutter doctor (and believe me there will be many as Flutter is still in Beta and all of the installations are done via command prompt) until you get the following message which says that flutter installation is all ok:
   
   
   
   
   
9. Now Open Android Studio. On the welcome screen click on Configure => Pluginsas shown in the below screenshot:
   
   
   
   
   
10. On the Next screen click on Browse button as highlighted in the following screenshot:
    
    
    
    
    
11. Now on browse screen, search for Flutter by typing the same in the Search Bar and click Install button like the following screenshot:
    
    
    
    
    This will ask to install Dart also, as Flutter is dependent on Dart. Select Yes for that dialog and install both.
    
    
    
    
    
12. Once the Plugin installation is done it will show you message to restart Android Studio after restart and Start a new Flutter Project will appear on the welcome screen just like the following screen shot.
    
    
    
    
    Congratulations -- Flutter with Android Studio is installed in your machine. Follow the next few steps to run the default project template code now
13. On Welcome screen click on Start a new Flutter Projectand you will get the following screen to select the Flutter project type, by default Flutter Application will be selected which is used to create Flutter mobile app so just click on the Next button:
    
    
    
    
    
14. Enter the name of the project (in all small letters), the location of the project, description (if you want) and click the Next button
    
    
    
    
    
15. On the next and final screen of the new Flutter project wizard enter the company domain name in order to set the package name of the application and click Finish button.
    
    
    
    
    
16. After Finishing the project creation wizard the IDE screen with default code and the toolbar will show the connected devices or Emulator along with the run button as highlighted in the below screen.
    
    
    
    
    
17. This is the output when you click the Run button to execute the default code on the Android device: