Flutter Installation Overview

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.

System and Security

When the Control Panel appears, select System and Security.

System

Next, select System.

Advanced Setting

Next, select Advanced systems settings.

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.

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:

• We copy the zip to a folder (for example c:\tools\flutter) and unzip the files.
• We open Control Panel and edit our path to include an additional entry for the bin folder in the Flutter folder (for example c:\tools\flutter\bin).
• To test the installation, we should open a new command line and type in the flutter –version command.
• Installation instructions for Flutter SDK on Windows can also be found on Codecademy’s Articles section.

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.

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

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:

• We need to download the correct zip for our Mac’s chipset.
• We unzip the file into a folder (for example, /Users/codecademy/flutter).
• We edit our shell script and update the path variable to include the bin folder from the Flutter SDK (for example, /Users/codecademy/flutter/bin).
• To test the installation, we should open a new terminal and enter flutter –version.
• Installation instructions for Flutter SDK on Mac can also be found on Codecademy’s Articles section.

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.

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

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

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.

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!

Review

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

• We should install the Flutter SDK first.
• Android Studio can build Flutter apps for Android and web browsers.
• Our same Flutter app can be moved to a Mac later and be used to build the App for iOS and MacOS devices.
• We also need to install the Command Line tools and Flutter plugin, then restart our IDE.
• Installation instructions for Android Studio on Windows can also be found in Codecademy’s articles section.

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.

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.

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!

Review

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

• We should install the Flutter SDK first.
• Android Studio can build Flutter apps for many devices, not just Android.
• We also need to install the Flutter plug-in and restart our IDE.
• Installation instructions for Android Studio on MacOS can also be found in Codecademy’s articles section.

Install XCode

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

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

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.

• Macs allow us to set up a development environment to target both Android and iOS devices with Xcode.
• Xcode should be installed first from the App Store on our Mac.
• We then need to install the Brew and Cocoapods package managers.
• Installation instructions for Xcode on Mac can also be found on Codecademy’s articles section.