Flutter in a Weekend: Friday - Installation

5 min readMar 23, 2018

At Mobile World Congress 2018, Flutter team announced the first beta release of Flutter, which was really exciting news for all mobile developers around the world.

I believe one of the best ways to learn a new programming language or platform is hands-on learning and write about it. Therefore I came up with this blog post series to give a basic understanding of the platform by creating a movie application that shows top rated movies and their details from an open API.

Let’s start with the basics.

What is Flutter?

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Long story short, it is a framework for creating multi-platform native applications. Flutter framework uses Dart language which was also developed by Google.

In this blog post Flutter team explained everything in more detail. But, now it is time for us to dive into implement something and start our own experience on Flutter!

Installing Flutter

Since it is Friday part of the blog post series, I wanted to start with something basic to get us started with.

I will explain how to do it on MacOS. If you want to follow the tutorials for other OSs, you can check this link.

Let’s start by cloning the flutter repository with the terminal.

$ cd <to-the-location-of-your-directory>
$ git clone -b beta https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH

This copies the Flutter repository to the location that we wanted and adds it to the PATH permanently. If we want to make it work across terminals, we are expected to add it to the PATH variable. On MacOS, we can do it by opening the .bash_profile file and adding the path to it by using the commands below.

$ touch ~/.bash_profile
$ open -a TextEdit.app ~/.bash_profileAdd this to the file:
export PATH=<your-path-to-repo>/flutter/bin:$PATH

Run Flutter Doctor

Flutter has a special command called flutter doctor. This checks our environment and downloads the necessary dependencies and compiles itself.

Also, it helps us through how we can install flutter dependencies. Some dependencies like Dart is already part of SDK, therefore there is no need to add it extra. Just following the messages shown in the Terminal will be enough to implement.

Example message for the missing field:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/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.io/setup/#android-setup for detailed instructions.

Now that everything is settled with the SDK, it is time for editor setup.

Editor Setup

We can build Flutter applications with any text editor by using any text editor. But as always, it is better to use an IDE dedicated to it. For Flutter, we can use IntelliJ Idea, Android Studio or VS Code by using Flutter plug-ins.

Since Flutter can let us create an application for both platforms, we are required to have the platform IDEs that we want to deploy on, which is Xcode 7.2 and later for iOS and Android Studio 3.0 and later for Android.

I will not explain here how you can install this IDEs, you can find plenty of tutorials for it on the internet. I will continue now with the steps afterwards.

After installing Xcode

After installing Xcode, we should let command-line tools to use Xcode by configuring it via the command below:

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

This is the correct path for most cases when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.

One more important thing is the accept the license by either opening Xcode or sudo xcodebuild -license .

Now with the $ open -a simulator command, we can see that we have an emulator up and running.

After installing Android Studio

Be sure to follow Android Studio Setup Wizard and add an emulator. After both emulators are up and running, let’s try one more command to see which devices are running.

$  flutter devices1 connected device:iPhone X • C82C5252-F351-4A94-9BF5-AC255E91F18F • ios • iOS 11.2 (simulator)

Now it is time for us to proceed with IDE setup for the development environment.

Installing Flutter Plugin

Since we already installed Android Studio, let’s use it to develop our Flutter application.

As stated before, we can use Android Studio for developing Flutter projects. Let’s open the Android Studio and open Preferences=>Plugins and click Browse repositories… Search the Flutter plug-in and install everything suggested.

After everything is installed, restart your IDE and it is time for Flutter development.

First Flutter Application

As we see above, we have a new element on our Start Screen. Start a new Flutter Project. Let’s click on that.

The new dialogue shows us three options, let’s select Flutter Application and click next. Now we have the screen below.

Fill the information in this screen as described:

Pick a project name with lower-case letters and underscore between words.
If the Flutter SDK Path is not selected, just copy and paste the path of SDK that we have used to clone the SDK.
Project location is the folder that you want to add your project into.
Description is only a small description of your application.

After everything is clicked, click Next.

In the next page, you will be expected to add a company domain for the package name and you can add Kotlin and Swift support to write OS-specific part with those languages but that won’t be necessary for now.Let’s click finish afterwards.

Pick the emulator you want to use and click the green arrow to run the project.