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.
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
- Installing Flutter
- Downloading flutter project from GitHub
- The Hello World App
- Adding External Packages
- Stateful Widget
- Infinite Scrolling List
- Adding user interaction
- Switching screens
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.
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
source $HOME/.bash_profileto refresh the current window.
- Verify that the
flutter/bindirectory 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:
Flutterplugin powers Flutter developer workflows (running, debugging, hot reload, etc.).
Dartplugin 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
Yeswhen prompted to install the Dart plugin.
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
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:
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.