Setting up Environment for Flutter | Androidmonks

Setting up Environment for Flutter

This tutorial is geared towards setting up Flutter for Application development. Flutter is the latest news from Google, which is believed to be the next-gen problem solver in terms of cross-platform development. One language can build application across platforms. Flutter development is based on the Dart Language, and is based on AOT(Ahead of Time) compilation and contains a lot of other useful techniques to provide easy development of Apps.

In order to setup Flutter in your System, find the resource below. For optimal performance (Since the application will be running on emulators rather than a physical device for the most part), you will require good performing computers.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

Any system with configuration equal to or above 4Gb RAM, 1TB memory and a good i3(7th gen) or more processor should do the business. You can find some good computers with the configuration here.

Setting up Flutter for MAC

If you are planning on developing applications for both Android and IOS, you will be in need of MAC(Since flutter is dependent on XCode to run the iPhone simulator). In case you don’t have a MAC for development, look at Setting up Flutter on Windows/Setting up Flutter on Ubuntu sections below. However, you will not be able to simulate an iPhone experience by any means.

Requirements

To install Flutter in MacOs, you will require the following

  • Disk Space: 700 MB (does not include disk space for IDE/tools).
  • Tools: Flutter depends on these command-line tools being available in your environment.
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which

All the above command line tools come pre-installed with MacOs. You can go ahead with the following steps if you have the required disk space for the Flutter SDK to reside.

Download Flutter SDK

Download the Flutter SDK from the following location

Flutter SDK Download
Once done, you will find that it is a ZIP folder. UnZip this folder, and copy its path.

You will have to set the environment path variable to point to this Flutter SDK folder by putting the following command into your terminal

Export the path to the Flutter SDK
Export the path to the Flutter SDK

Running Flutter Doctor

Now, the Flutter SDK is in the path. Time to run Flutter Doctor command to check what features are missing. When you run Flutter Doctor. It lists all the dependencies that are currently missing in the system.

Time to install all the required dependencies for IOS and Android development. We will in need of 2 tools. One is XCode which is an IOS native programming Application.

The second is Android Studio which is the Official development kit from Google in order to develop Android Apps. You will require both the Application along with the related dependencies to be in the system to go further.

Install XCode

Time to see how to Install XCode in MacOs. If your system is up to date with the latest release of MacOS, go to the below link.

Option 1

XCode 10

Once the XCode 10 is downloaded, you can give permission for it to be installed in the system. This will install all the XCode and IOS specific dependencies.

Option 2

In case you do not have the latest MacOS. Do not worry(XCode 10 can be downloaded with MacOS Mojave and above only). The Flutter SDK runs pretty much well with any XCode version above 9.0

You can download the older versions from the following link – Developer Tools IOS
You will, first of all, require a Developer Account, which you can create here. Once done, you will have unlimited access to all the developer tools to build, test, deploy anything related to IOS

Once the XCode is installed in your system, run the following command in the terminal. This will let the system know that there is the latest version of XCode present.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

This is the correct command for most of the system. In case you are going through step 2(Installing an older version of XCode), make sure to replace the XCode path with your current path where the XCode gets downloaded.

Setup IOS Simulator on Mac

This step is specific to MacOS only. Since this is not an open source operating system, you need to have a MacOS to develop IOS applications. The IOS simulator gets the same treatment as well. In order to check if the App you built simulates properly on an IOS device, you will require an IOS simulator to be installed.

You can search for the simulator in the MacOS by either checking the spotlight or running the following command in the system.

open -a Simulator

Running that command should pop open the simulator like below.

 

IOS simulator to run Flutter apps
IOS simulator to run Flutter apps

If the XCode is properly installed, this step should run without any issues. If the XCode is not installed properly, remove the XCode and restart the above step from scratch. It is better to not overload the system with unnecessary commands rather than starting everything from scratch.

Setting up Flutter on Windows

Setting up the SDK for Windows is pretty much simple. You do not have any XCode installation to be done. Since windows cannot be used for IOS development. In case you want to simulate the application on IOS, there are 3rd party simulators that are available. This can be used to create and deploy IOS apps. The accuracy, however, cannot be promised.

Let’s look at the requirements and Steps to include Flutter on Windows.

Download the Flutter SDK for Windows

Once the Flutter SDK is downloaded and unzipped. Make sure to place it inside a Folder which does not require permission to access. For (Eg.) Do not place the Flutter folder inside C:>Program files, inside put it inside a folder like C:>src like shown below.

Make sure the flutter folder is inside C:/src and open the environment variable folder
Make sure the flutter folder is inside C:/src and open the environment variable folder

Update your Path to let the Environment know where the Flutter SDK resides. See the below steps to update your PATH variable.

Update the PATH Variable with C:/src/flutter/bin
Update the PATH Variable with C:/src/flutter/bin

Open up the Android Studio and navigate to File>Settings. Find the Plugins option on the left and search for Flutter. You might have to search in all repositories to find it.

Search for Flutter Plugin in Windows
Search for Flutter Plugin in Windows

Once it is found, click install and wait for Download. The Android Studio will require a restart. Perform the restart, and you IDE is ready with the plugin.

Search in all repositories and install the plugin
Search in all repositories and install the plugin

You can find a helpful video which Shows Flutter setup in Windows below

Setting up Flutter on Linux/Ubuntu

Installation in Ubuntu/Linux is similar to that of Mac. You still cannot install XCode or the native IOS simulator since it is restricted to an IOS environment only. The below step illustrates how to install the Flutter SDK to your system

Download the Flutter SDK for Ubuntu

Open a terminal and navigate to the download location. Perform Unzipping of the SDK.

tar xf ~/Downloads/flutter_linux_v1.0.0-stable.tar.xz

Once the bundle is unzipped, time to point the Path to the SDK folder. Use the command below to do that.

export PATH=$PATH:`pwd`/flutter/bin

This will point the path to the Flutter SDK and its files. If you run Flutter Doctor now, it should show all the missing dependencies present.

Common Installations

Install Android Studio

Android Studio plays a major role in terms of developing the Flutter Application. It not only provides the IDE to create the App, but it also provides the required Android Emulator to test the Code in Android devices.

The Android Studio comes packed with required ADB and other related command line tools and does not require any external installation.

To know more about installing Android Studio for Mac/Windows, you can read the Setting up Android Studio for Application development post.

Once you are done, the Studio looks like below.

Opening Android Studio
Opening Android Studio

Open the App and find the preference tab. It is under Android Studio>Preferences

Preference tab under File>Preferences
Preference tab under Android Studio>Preferences

Once that is done, you can find the preferences tab with the plugins option on the left section.

Plugins section under preferences
Plugins section under preferences

Search for Flutter. You might have to try searching under Search all repositories to find that. Once done, choose the below option

Choose Flutter under Plugins option
Choose Flutter under Plugins option

Click Install and Restart Android Studio to let the Flutter SDK reflect in the Android Studio IDE.

The restart of the Android Studio now creates a New Tab to create the Flutter Projects. You can find this option in the Android Studio startup or once inside under File>New Flutter Project like below.

Create New Flutter Project
Create New Flutter Project

Test Ride

Time to see if the Flutter Project is working as expected. Continuing from the previous section, go ahead and create a Flutter Project.

The Following section opens up.

Choose from the options
Choose from the options

Choose the Flutter Application option, and the next section asks for the Flutter SDK location.

Remember the first step where the SDK was downloaded and placed in a location. You have to point the project to this location like below.

Flutter Project Details
Flutter Project Details

Once the project is created, you can find the project structure with both the Android and IOS project codebase like below.

Project code base structure for Flutter
Project code base structure for Flutter

Run the project in Your Emulator

Time to take the project for a spin. See what the default project is going to look like. In order to run the project in your environment, you will need to create start the emulators.

To run an Android emulator, do the following.

Navigate to Tools>AVD Manager 

AVD Manager
AVD Manager

Create a new Virtual Device

Create a Virtual Device
Create a Virtual Device
Choose the configuration
Choose the configuration

Once the configuration downloads and the Virtual device builds. It is time to choose the AVD through the Android Studio.

Choose an emulator from the list
Choose an emulator from the list

Upon running the emulator, a new Android-like device opens up. Time to finally run our App on this emulator to see how the device app behaves.

Flutter app
Flutter app

Testing the application on an IOS Simulator looks like,

Iphone app in flutter
Flutter app in IOS Simulator

That’s it for this tutorial on how to set up your Environment to develop Flutter Applications.

You can check out the Post of Developing the first Flutter App using Android Studio post to start programming Simple and Easy Mobile Applications.

Drop in any comments below if any below.

Also Read  Is Android really Dying? What is Google thinking!!

Leave a Comment

Your email address will not be published. Required fields are marked *