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
- Installing Flutter
- Downloading flutter project from GitHub
- The Hello World App
- Adding External Packages
- Stateful Widget
- Infinite Scrolling List
- Adding user interaction
- Switching screens
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.