Flutter Installation Overview

Codecademy Team
This article will describe installing the tools needed to support Flutter development.

Introduction

Before we start building apps with Flutter, we need to prepare our development environment. These steps include:

  • Installing the Flutter SDK
  • Installing Android Studio
  • (Mac Only) Installing XCode

We will cover each step in this article. Let’s get started!

Installing the Flutter SDK

We need the Flutter Software Development Kit (SDK) to create Flutter apps. SDKs include all the necessary tools to allow developers to build applications. The Flutter SDK includes:

  • Dart programming language tools
  • Utilities such as the flutter command
  • Libraries for widgets and animation

We can install Flutter on most popular operating systems.

Installing Flutter SDK on Windows

Click here to see installation instructions for Windows

Flutter SDK Download

We need to first download the Flutter SDK for Windows. This is a zip file that we need to unzip into a local directory, for example, c:\tools\flutter.

Update the Path

Now that we have the Flutter SDK unzipped into a local directory, we need to tell Windows where to find the SDK. To do this, we can use the Control Panel on Windows to update the path variable.

Open Control Panel

First, open the Control Panel with the Search Box near the Start Menu on the bottom of the Windows screen.

Open the Control Panel with the Start Search Box

System and Security

When the Control Panel appears, select System and Security.

Select System and Security

System

Next, select System.

Select System and Security

Advanced Setting

Next, select Advanced systems settings.

Select System and Security

Environment Variables

We need to update our path to include a new entry to the Flutter SDK’s bin folder. For example, the path could be c:\tools\flutter\bin. After entering this information, hit OK and close the control panel.

Updating the Control Panel Path Environment Variable

Check Installation

We now have our system path set up and can verify our installation. Let’s open up a new terminal and enter the following command to check our Flutter SDK installation:

flutter --version

The output should look similar to the following:

Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (6 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

When we see this output, we know we have successfully installed the Flutter SDK!

Review

Let’s review what we learned about installing the Flutter SDK on Windows:

Installing Flutter SDK on Mac

Click here to see installation instructions for Mac

Determine the Mac Chipset

The chipset of our Mac will be either Apple (arm64) or Intel (x64). We should check this before we begin with our installation. First, open the Apple menu in the top left corner of your screen and select About This Mac. Selecting will open a dialog where we can find our chipset information.

Select top left corner About This Mac

Make a note of which chipset your Mac is using so the correct version of the Flutter SDK can be downloaded.

About this Mac Dialog Box showing Chipset

Downloading and Unzipping

Download the Flutter SDK for the correct chipset and extract the zip into a new Flutter folder on our hard drive. For example, we could put the Flutter SDK in our user directory /Users/codecademy/flutter. Note that the word codecademy should be replaced with our username on the Mac.

Determining the Mac shell version

We now need to tell our Mac about the Flutter SDK. This requires the terminal to update our shell configuration. On a Mac, the shell is responsible for launching other programs.

For more information about using the terminal command line, check out Codecademy’s Learn Command Line course!

We can open up a terminal by typing ⌘/Command + Space and typing terminal.

Once the Terminal is open, type the following to determine the shell our Mac uses.

echo $SHELL

The command will output the active shell in use.

If we see /bin/bash, we will modify .bashrc. If we see /bin/zsh, we will instead modify .zshrc.

Both files, .bashrc or .zshrc, reside in the home folder. Let’s edit them and add a path to the Flutter SDK.

Editing Your Mac Path

Now that we know the shell script to use we can edit the path to include an additional entry for the bin folder inside our Flutter SDK folder.

We will use the nano editor, but you can use any editor for this step. Another example is vi.

In our terminal, we first open the script file:

For example:

nano /Users/codecademy/.zshrc

Note that the username codecademy should be replaced with our username on the Mac.

Let’s add a line to the end of this script file:

For example:

export PATH="$PATH:/Users/codecademy/flutter/bin"

Again, use the username instead of codecademy here.

Next, hit ⌃/Control + o to save the file. Hit enter to confirm the file name.

We can exit now with ⌃/Control + x

We should now close the terminal program and re-open it again for the change to take effect.

Open a new terminal and test the Flutter SDK by entering the following command:

flutter --version

The output should look similar to the following:

Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (6 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

When we see this output, we know we have successfully installed the Flutter SDK!

Review

Let’s review what we learned about installing the Flutter SDK on the Mac:

Once we’ve installed the SDK, we must install our development environment.

Installing an IDE

To develop applications, we will need an IDE or Integrated Development Environment. This environment is where we will:

  • Edit code
  • Organize our files
  • Compile and run our app

While we can use several IDEs to develop Flutter applications, this course will focus on using Android Studio. This choice simplifies the setup process.

Installing Android Studio

Android Studio is Google’s integrated development environment (IDE) that we use to build apps for Android devices. Android Studio includes:

  • An IDE with a powerful code editor
  • Android SDK to build and package Android applications
  • Emulators of different virtual Android devices
  • The ability to connect to physical Android devices

Follow the installation instructions for your system.

Installing Android Studio on Windows

Click here to see installation instructions for Windows

Install Android Studio on Windows

To install Android Studio, we need to download the Android Studio installation program. Once downloaded, we will launch the installer and follow the steps.

Windows Installer for Android Studio

Once finished, the Setup program will close, and Android Studio will open. It will launch a wizard to set up our development environment and download any necessary components.

Install Android Studio Command Line Tools

Next, we need to install the Android SDK Command Line Tools. To do this, we:

  • Launch Android Studio
  • Go to More Actions and choose SDK Manager

Opening the SDK Manager

In the SDK Manager under System Setup, click the checkbox for Android SDK Command-line Tools (latest)

Selecting Command Line Tools

Install Android Studio Plugin

When we launch Android Studio, we will see an option to install plugins to extend Android Studio. We need to install the plugins to allow for Flutter development.

Launch Android Studio and select the Plugins item in the navigation list on the left side.

Select Plugins for Android Studio Windows

After selecting Plugins, we enter flutter as a search term in the Marketplace. We will install the Flutter plugin. Note that this will also install the Dart plugin as it is required.

Once the plugin has finished installing, Android Studio will restart, and we will now see an option to create a Flutter app!

New Flutter Project Option in Android Studio

Review

We should now have Android Studio set up! Let’s review what we learned about installing Android Studio on a Windows computer:

Installing Android Studio on MacOS

Click here to see installation instructions for MacOS

Install Android Studio

To install Android Studio, we need to do the following:

  • Navigate to the Android Studio homepage and click on the Download Android Studio button.

  • Navigate to the downloads folder and double-click on the downloaded file.

  • Once the installer opens, drag and drop the Android Studio icon into the Applications folder. Doing this will copy Android Studio into the Applications folder on the Mac.

Installation Dialog for Android Studio

We can now launch Android Studio from the Applications folder! Let’s do that so Android Studio can download updates or necessary files.

Install the Flutter Plug-in

When we launch Android Studio, we will see an option to install plugins to extend Android Studio. We need to install the plugins to allow for Flutter development.

Installing the Flutter Plugin in Android Studio

On the left side, we select Plugins.

Next, we enter flutter as a search term in the Marketplace, then install the Flutter plugin. Note that this will also install the Dart plugin as it is required.

Once the plug-in has finished installing, Android Studio will restart, and we will now see an option to create a Flutter app!

New Flutter Project Option in Android Studio

Review

Let’s review what we learned about installing Android Studio on a Mac:

Xcode (Mac only)

To develop for Mac, we need Xcode. Xcode only runs on macOS and will allow us to build Flutter apps for use on iOS devices such as iPhones and iPads.

Xcode is Apple’s integrated development environment (IDE) that we use to build apps for Apple products such as the iPhone and Mac. Similar to Android Studio, Xcode includes:

  • An IDE for writing apps
  • Device simulators for different iOS versions
  • Tools such as compilers and debuggers

We cannot run Xcode on a PC. However, developers can create Flutter apps on PCs and then later build them on a Mac with Xcode.

Install Xcode on MacOS

Click here to see installation instructions for Xcode on MacOS

Install XCode

Navigate to the XCode on the Mac App Store page and click on Open App Store.

Opening the App Store

This will open the Apple App Store app for XCode. It will display details about the Xcode application.

Installing Xcode from the App Store

Click on the download icon to install Xcode.

Installing Brew and Cocoapods

Another component we need for Apple development is Cocoapods. Cocoapods is an open-source package management tool for the Xcode build environment. It is necessary to install this tool as Flutter synchronizes necessary packages with the Dart environment.

We can get Cocoapods using a tool called Brew. Brew is an open-source and freely available installation tool for our Mac. We will need to install this first. To do this, open a terminal and type:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once this is completed we can use brew to install Cocoapods.

We will need to open a terminal and type:

brew install cocoapods

Our Mac should now be set up for Flutter development and running Flutter apps on iOS and macOS devices. Our next step will be to verify our Flutter environment.

Review

While installing Xcode is not required for starting Flutter development, it is necessary to install if we want to deploy Flutter apps on iOS and macOS devices. Let’s review a few topics we have covered.

Review

Let’s review the Flutter setup process:

  • First, we must install the Flutter SDK
  • Next, we install the Android Studio IDE
  • Developers who want to build for iOS can install Xcode (Mac only)

Great! Now we have installed our Flutter tools; we should check our configuration. Flutter has a built-in tool to do this called Flutter Doctor. We will cover using this in the next article.