Flutter Developer Environment on Windows

What is Flutter?

Flutter is an open source framework for building mobile applications with a single codebase i.e., applications for both Android & iOS can be developed with only a single codebase. It is based on the Dart programming language which has similar syntax to that of JavaScript.

Objectives

In this article, we will install & setup the tools required for the Flutter development.

Table of Contents

1. System Requirements & Pre-requisites
2. Installing & Configuring Dart
3. Verifying the Dart installation
4. Installing the Flutter SDK
5. Verifying the Flutter installation
6. Installing Android Studio
7. Preparing Code Editor
8. Bonus

Requirements

Before installing Dart & Flutter, make sure your machine fulfills the following requirements:

System Requirements

• Operating System — 64-bit, Windows 7 SP1 or later.
• Disk Space — At least 400MB of free disk space available.

Software

• Version Control System — Git For Windows.
• Code Editor — Microsoft Visual Studio Code.

Installing Dart

As mentioned in the introduction, Flutter is based on the Dart programming language so, we will need the Dart SDK (compiler) before installing the Flutter.

On Windows, the Dart SDK can be installed in two ways.

Using the Chocolatey Package Manager

Dart SDK is available as a package at Chocolatey. If you have the Chocolatey package manager installed, follow the steps shown as below or read the documentation for the installation procedure.

1. In your terminal, execute choco install dart-sdk, which will download & install the latest version of the Dart SDK on your machine.

2. Verify the installation.

You have successfully installed the Dart SDK & can use the dart commands from the command line.

Downloading the SDK as a zip file

If you are not familiar or don't use the Chocolatey package manager, downloading the SDK as zip might be another option.

1. Download the Dart SDK zip from here. Ideally, it recommended to download the stable version but either Beta or the Dev release can be used as well.

2. Extract the content to a location of your choice, example C:\src\dart\ but, can be extracted anywhere on your drive.

3. You will need to add the Dart SDK's bin directory to the PATH variable. To do so, visit: Control Panel → System → Advanced System Settings → Environment Variables → System Variables → Path → Edit → New.

4. Assuming that your Dart SDK is at the aforementioned location, i.e., C:\src\Dart\, the location to be added will be, C:\src\Dart\bin.

5. That being done, the Dart CLI commands can now be used.

Verifying Dart Installation

To verify that the Dart SDK installation was successful, execute the following command from the command line.

dart --version

This should return the Dart version as the output.

Installing Flutter

We will be installing Flutter by cloning the stable branch from its GitHub repository. Follow the steps given below:

1. In your terminal, change directories (cd) to the location where you want to install the Flutter SDK. Example: C:\src\.

2. To clone the repository, use the following command:

git clone https://github.com/flutter/flutter.git -b stable

3. For Flutter commands to run in the command line, we will have to add the Flutter SDK's bin directory to the System PATH variable. Go to Control Panel → System → Advanced System Settings → Environment Variables → System Variables → Path → Edit → New.

4. Add location of the bin directory from the Flutter SDK to the PATH variable. Example: C:\src\flutter\bin.

Verifying Flutter Installation

To verify that Flutter SDK has been properly installed, execute the following command from your terminal.

flutter --version

This should return the current Flutter version as the output.

flutter doctor

On running this command, Flutter will check through the installation to make sure everything is ready.

You will get error indicating that Android toolchain is missing, similar to as shown below.

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

This is because, Flutter uses the Android SDK for development purposes. We need to install Android Studio & SDK to solve this error.

Installing Android Studio

For Flutter to work seemlessly when building Android applications, Android Studio & the Android SDK needs to be installed. Flutter leverages the Android SDK to build the final image of your application i.e., the APK file which will be generated after you run the flutter build command.

Nonetheless, it is always a good option to have the Android Studio installed whether you use it or not. Let's see how we can do that.

Android Studio can be heavy for some low end computers. Check the system requirements before installing it.

1. Installation procedure of Android Studio is quite straight forward. Just follow the instructions provided by the installer. If you face any difficulties while installing Android Studio, you might want to check out the informative guide & video tutorials provided at Android Developers.

2. The installer will prompt for a location to install the tools related to SDK. Provide it a location with no spaces such as C:\src\android\sdk\ & note the same since, we will be adding it to the PATH variable. Also, select and download the emulator device (also known as AVD), from here, which will be used for previewing our application during the development process.

3. After the installation is complete, go to Control Panel → System → Advanced System Settings → Environment Variables → System Variables → Path → Edit → New and add the following two directories:

C:\src\android\sdk\tools
C:\src\android\sdk\platform-tools

That being done, execute flutter doctor again. Now, you should get single error (or we can say, warning) stating that "no device is connected" which you can safely ignore since we haven't connected any physical devices.

Preparing Code Editor

You can develop Flutter applications in any IDE or code editor. To keep things simple, we'll be using the Microsoft Visual Studio Code.

1. Open VSCode, View → Command Palette or press CTRL + SHIFT + P to bring up the command palette.

2. Search for "install", and select Extensions: Install Extensions.

3. Search for "flutter" & install the Flutter extension with developer name of Dart Code. This will install the Dart extension as well.

4. To validate, open the Command Palette, type "doctor", and select Flutter: Run Flutter Doctor. This will run the flutter doctor to make sure all the tools are installed properly.

5. If everything runs without any errors, you will be able to create new Flutter app with Flutter: New Project.

Voila! You are ready to build applications with Flutter.

Create your first app, take it for a test drive, play with the code & experience the "hot reload" feature.

Bonus

Prototyping Flutter Applications with CodePen

CodePen has recently announced the support for Flutter. If you want to play with some Flutter code or quickly make prototypes, CodePen is a great place to start with. Try playing with the following pen.

See the Pen Flutter: Test Drive by KMAN (@thekman) on CodePen.

Thank you for reading. Peace ✌🏼