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:
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
- Download and install Android Studio.
- Install Git for Windows with the Use Git from the Windows Command Prompt option enabled during installation
- Open Command Prompt by either writing cmd in Run windowor by using Start Menu like Start=> Windows System => Command Prompt (in Windows 10)
- 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,
- 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:
- Restart Windows to fully apply this change
- 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):
- 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:
- Now Open Android Studio. On the welcome screen click on Configure => Pluginsas shown in the below screenshot:
- On the Next screen click on Browse button as highlighted in the following screenshot:
- 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.
- 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 - 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:
- Enter the name of the project (in all small letters), the location of the project, description (if you want) and click the Next button
- 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.
- 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.
- This is the output when you click the Run button to execute the default code on the Android device:
Installation Steps on Mac
- Install Xcode 7.2 or newer (via web downloador the Mac App Store).
- Download and install Android Studio.
- Open Terminal window either by using programs or searching for it.
- Get Flutter SDK: Write and execute the 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.
- Once the above step is complete execute the following command to add the Flutter tool. Set local user PATH variable temporarily, for the current terminal window:
export PATH=`pwd`/flutter/bin:$PATH
- Execute $PATHcommand again which will show the list of all paths mentioned in $PATH variable and the path of your Flutter installation will be added to it like the highlighted section in the following screen.
Take a screenshot of this path or note it down someplace where you can refer toit again.
Now, execute Flutter doctor command which will check your environment and display a report to the terminal window like the below screenshot, also it will show the errors in bold; in my case it’s asking me to upgrade fFutter and install Brew (highlighted)
- Keep on executing the commands mentioned in the result of fFutter 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.
- The Steps to add Flutter Plugin in Android Studio and creating New Flutter Project are exactly the same as in Windows.
- After Finishing the project creation Wizard the IDE screen with default code will be the same as Windows. The toolbar will show connected devices or Emulator along with Run button as it does in Windows; however, if you click on the drop-down arrow of the devices option you will get an option to start the iOS Emulator and other Android Emulator like the below screenshot.
- This is how the Output of default code looks in iPhone and Android when executed:
This was a simple step by step guide to install Flutter with Android Studio on Windows and Mac. This is just an introduction and I will be coming up with more blogs on developing Cross Platform Mobile apps using Flutter.
Please remember that Flutter is still in Beta and some options /commands may change as the framework evolves with time, so if you face any issues just check Flutter Official Documentation.
Happy Coding
References
- Flutter Official Documentation
- Flutter Introduction From Xamarin Developer