Installing and running flutter

Flutter tutorial describing the steps for downloading, installing and running flutter. Android Studio will build and run the app on the emulator.

This will be my first time to download and run Flutter. So join me while I’ll go through the steps of installing Flutter.

I will be installing Flutter on MacOS. And using Android Studio to build the default flutter application using Android Studio.

The purpose of this Flutter tutorial is to ensure by following the instructions that a Flutter application can be built. Which will confirm a successful installation.

Disclaimer: Note that this Flutter tutorial was built using Flutter Beta 1 version. Regular future updates are expected. Which may differ from the steps describes in this Flutter development tutorial.

Steps

This Flutter development tutorial will follow the steps described here.

A basic synopsis of the steps required are:

Checking system requirements
Installing using Git (Git must be installed prior)
Upgrading the environment path with the flutter environment
Running the flutter doctor
Installing Android Studio
Creating a virtual device using Android Studio
Installing the flutter and dart plugins for Android Studio
Creating a new flutter project and run the app

Episodes

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

Operating Systems: macOS (64-bit)
Disk Space: 700 MB (does not include disk space for Xcode or Android Studio).
Tools: Flutter depends on these command-line tools being available in your environment.
- bash, mkdir, rm, git, curl, unzip, which

Get the Flutter SDK

To get Flutter, use git to clone the repository and then add the flutter tool to your path. Running flutter doctor shows any remaining dependencies you may need to install.

Clone the repo

If this is the first time you’re installing Flutter on this machine, clone the beta branch of the repository and then add the flutter tool to your path:

$ git clone -b beta https://github.com/flutter/flutter.git

Update your path

You can update your PATH variable for the current session only at the command line, as shown in Clone the Flutter repo. You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session.

The steps for modifying this variable permanently for all terminal sessions are machine-specific. Typically you add a line to a file that is executed whenever you open a new window. For example:

Determine the directory where you placed the Flutter SDK. You will need this in Step 3.
Open (or create) $HOME/.bash_profile. The file path and filename might be different on your machine.
Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you cloned Flutter’s git repo:

$ export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

Run source $HOME/.bash_profile to refresh the current window.
Verify that the flutter/bin directory is now in your PATH by running:

$ echo $PATH

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup:

$ flutter doctor

Install Android Studio

Download and install Android Studio.
Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This will install the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Install the Flutter and Dart plugins

Flutter is supported by two plugins:

The Flutter plugin powers Flutter developer workflows (running, debugging, hot reload, etc.).
The Dart plugin offers code analysis (code validation as you type, code completions, etc.).

To install these:

Start Android Studio.
Open plugin preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
Select Browse repositories…, select the Flutter plug-in and click install.
Click Yes when prompted to install the Dart plugin.
Click Restart when prompted.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

Enable VM acceleration on your machine.
Launch Android Studio>Tools>Android>AVD Manager and select Create Virtual Device.
Choose a device definition and select Next.
Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
Under Emulated Performance, select Hardware – GLES 2.0 to enable hardware acceleration.
Verify the AVD configuration is correct, and select Finish.

Create new app

Select File>New Flutter Project
Select Flutter application as the project type, and press Next
Enter a project name (e.g. myapp), and press Next
Click Finish
Wait for Android Studio to install the SDK, and create the project.

The above command creates a Flutter project directory called myapp that contains a simple demo app that uses Material Components.

In the project directory, the code for your app is in lib/main.dart.

Run the app

Locate the main Android Studio toolbar:
In the target selector, select an Android device for running the app. If none are listed as available, select Tools>Android>AVD Managerand create one there. For details, see Managing AVDs.
Click the Run icon in the toolbar, or invoke the menu item Run > Run.
If everything works, you should see your starter app on your device or simulator:

Conclusion

At the end of this flutter development tutorial you will have (hopefully) installed the flutter development environment.
And added the flutter and dart plugins to Android Studio.

Then finally creating the flutter application using Android Studio. The flutter application could then be run on Android Studio’s emulator.

In the following flutter development tutorial, we will describe how to download a flutter project from GitHub.