How to Install Flutter and Setup Android on Windows [Step by Step]

Introduction

Flutter is one of the tools for developing native cross platform applications for Android, iOS, web and Desktop with single Programming Language (Dart) and Codebase.

As the Official Flutter Docs says,

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

In this tutorial, you’ll learn how to install Flutter and setup Android in your Windows Machine.

Pre-Requisites

Step 1 – Downloading the Flutter SDK

In this step, you’ll download the Flutter SDK (Software Development Kit).

Flutter SDK is the collection of tools that compiles the Dart code to native machine code for Android, iOS, web and Desktop.

First, head over to Windows install – Flutter.

Next, Click the button shown in the image below.
Download Flutter SDK

You’ll see that Flutter SDK is downloading as zip file.

Finally , after the SDK file is downloaded. Go to the zip file and extract it to a Folder of your choice.

Don’t extract your files to location where you need Administrator priviliges like C:\Program Files\. Instead, make sure you extract in a different folder like C:\src\flutter\

You’ve successfully installed Flutter on your Windows machine.

Optional

You can execute Flutter Commands by moving to the extracted folder under bin directory.

Open the command prompt and execute the below command.

cd C:\src\flutter\bin

Now the current working directory of the command will be changed to flutter installation directory.

Execute the below command.

flutter --version

You’ll see the below output.

Flutter 1.22.6  

In the next step, you’ll update the System path pointing to the flutter\bin directory.

Step 2 – Updating the System Path

In this step, you’ll update the System path to access flutter.exe so you can access the flutter commands anywhere from the system.

First, you’ll search for env in your Windows search. (or) you can open Edit your System Environment Variables from your Control panel.

Next, click the Edit your System Environment Variables.
You’ll see a new Window named Environment Variables is being opened.
Environment variables in Windows
Next, Under the User Variables select path.

Note: If path is not present in your User Variables, you will create a new variable named path.

Next, add the value as path/to/the/flutter/bin/.

For Example, C:\src\flutter\bin\. Ensure you replace the value with your local file path to flutter\bin\.

Finally, press the OK button.

If you've already installed Dart on your system. then add the `path/to/the/flutter/bin/` before `path/to/the/Dart/bin`.
You've successfully setup Flutter command line interface by adding the `flutter\bin` in your path.

Step 3 – Running Flutter Commands

In this step, you’ll learn some basic commands in Flutter.
First, you’ll execute the below command in your Command prompt.

flutter

You’ll see the below output.

Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands
                            executed.
                            If used with --help, shows hidden options.
-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs

    --packages              Path to your ".packages" file.
                            (required, since the current directory does not
                            contain a ".packages" file)

Available commands:
  analyze           Analyze the project's Dart code.
  assemble          Assemble and build flutter resources.
  attach            Attach to a running application.
  bash-completion   Output command line shell completion setup scripts.
  build             Flutter build commands.
  channel           List or switch flutter channels.
  clean             Delete the build/ and .dart_tool/ directories.
  config            Configure Flutter settings.
  create            Create a new Flutter project.
  devices           List all connected devices.
  doctor            Show information about the installed tooling.
  downgrade         Downgrade Flutter to the last active version for the curren

                    channel.
  drive             Runs Flutter Driver tests for the current project.
  emulators         List, launch and create emulators.
  format            Format one or more dart files.
  gen-l10n          Generate localizations for the Flutter project.
  install           Install a Flutter app on an attached device.
  logs              Show log output for running Flutter apps.
  precache          Populates the Flutter tool's cache of binary artifacts.
  pub               Commands for managing Flutter packages.
  run               Run your Flutter app on an attached device.
  screenshot        Take a screenshot from a connected device.
  symbolize         Symbolize a stack trace from an AOT compiled flutter
                    application.
  test              Run Flutter unit tests for the current project.
  upgrade           Upgrade your copy of Flutter.

Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used
options.

You will use flutter doctor command to know about the tools, which are required to run Flutter.
Finally, You’ll run the below command to check whether the installation is successful along with detailed report of the components.

flutter doctor


flutter – specifies the base command for Flutter.
doctor – gives a detailed report of the Flutter installation.

You’ll see the below output.

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.6, on Microsoft Windows [Version 6.1.7601],
    locale en-US)
[✗] Android toolchain - develop for Android devices  
✗ Unable to locate Android SDK.  
Install Android Studio from:  
[https://developer.android.com/studio/index.html](https://developer.android.com/studio/index.html)  
On first launch it will assist you in installing the Android SDK  
components.  
(or visit [https://flutter.dev/setup/#android-setup](https://flutter.dev/setup/#android-setup) for detailed  
instructions).  
If the Android SDK has been installed to a custom location, set  
ANDROID_HOME to that location.  
You may also want to add it to your PATH environment variable.
...

You’ll see that there was issue in your Android SDK. (If there is no issue for you in Android SDK, you can feel free to skip ahead to Step 5 – Installing Plugins for Adroid Studio).

You’ll learn how to install Android SDK in the next step.

Step 4 – Setting Up Android SDK

In this step, you’ll install Android Studio and setup Android SDK.

First, download Android Studio as zip file or executable file from the Official site.
Download Android Studio Button

Next, you’ll install the Android Studio by following the setup wizard.

Note: Android SDK will be downloaded when you install Android Studio.

Press the Finish Button.

In the Next window, hoose the ‘Don’t import Settings option’.

Finally, press the OK button.

You’ve successfully installed Android Studio and setup Android SDK in your Windows machine.

Step 5 – Installing Plugins for Android Studio

In this step, you’ll install Flutter and Dart plugins in Android Studio.

First, open Android Studio.

Then, click Configure, then, click Plugins.

Note: If your using older version( < v3.6.3.0 ) of Android Studio, First, you’ll go to File>Settings>Plugins. then, Select Marketplace.

Next, Select Flutter and Dart plugin.

Finally, press Yes when prompted

You’ve to restart Android Studio to see the newly added plugins.

You’ve successfully setup Android Studio as a Code Editor for Flutter.

In the next step, you’ll setup Android Emulator.

Step 6 – Setting Up Android Emulator

In this step, you’ll use the Android Virtual Device (AVD) manager to setup a Android Virtual Device.

AVD Manager is a tool that comes with Android Studio. It helps you to build and maintain Android Virtual Devices on the go. It is very easy and quick to create a virtual device using AVD manager.

First, you’ll open your Android Studio.

Then select Tools -> Android -> AVD Manager.

Select Create Virtual Device option.

Now you’ll configure the device definition and press the Next button.

You’ll select the latest system image of Android.

In that window, select Hardware – GLES 2.0 to enable hardware acceleration and press the Next button and press finish.

You’ve successfully setup a virtual device in Android Studio using AVD manager.

You can verify the setup by launching the AVD manager.

To launch the Virtual device, Press on the play button.

You’ll see the Android Virtual device is booted and loaded in your Windows machine.

Step 7 – Verifying the Flutter Installation

In this step, you’ll execute the flutter doctor command to verify whether the Flutter installation along with Android setup is successful.

Open the Command Prompt and execute the below command.

flutter doctor -v

You’ll see the below output.

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.6, on Microsoft Windows [Version 6.1.7601],
    locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

[√] Android Studio (version 3.5)
[√] VS Code (version 1.53.2)
[√] Connected device (1 available)

• No issues found!

You’ll see No issues found, this verifies that the Flutter Installation and setup is successful.

Note: If you found issue in Connected Device, ensure your Android virtual Device is running. If not, you’ll open your Android Studio and go to Tools -> Android -> AVD Manager, and press the run icon in the Virtual Device list.

In the next step, you’ll create a default Flutter app and view it in your Android virtual Device.

Step 8 – Running a Default Flutter App

In this step, you’ll put to test everything you’ve done so far. You’ll create a new Flutter application and view it in your Android Virtual Device. You’ll do all of mentioned without writing a single line of code.

Open command prompt and navigate to the folder where you would like to create your Flutter Application.

For Example, to create your Flutter application in the location D:\Projects\Flutter, execute the below commands.

Navigate to the Local Disk (D:)using the below command

D:

Create a new folder named Projects using the below command.

mkdir Projects

Move to Projects directory using the below command.

cd Projects

Create a new Folder named Flutter, using the below command.

mkdir Flutter

Navingate to the newly created Flutter folder, using the below command.

cd Flutter

Now execute the below command to create the flutter application in the desired directory.

flutter create app_name

You’ll see the below output.

Creating project app_name...
  app_name\.gitignore (created)
  app_name\.idea\libraries\Dart_SDK.xml (created)
  app_name\.idea\libraries\KotlinJavaRuntime.xml (created)
  app_name\.idea\modules.xml (created)
  app_name\.idea\runConfigurations\main_dart.xml (created)
  app_name\.idea\workspace.xml (created)
  app_name\.metadata (created)
  app_name\android\app\build.gradle (created)
  app_name\android\app\src\main\kotlin\com\example\app_name\MainActivity.kt
  (created)
  app_name\android\build.gradle (created)
  app_name\android\app_name_android.iml (created)
  app_name\android\.gitignore (created)
  app_name\android\app\src\debug\AndroidManifest.xml (created)
  app_name\android\app\src\main\AndroidManifest.xml (created)
  app_name\android\app\src\main\res\drawable\launch_background.xml (created)
  app_name\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  app_name\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  app_name\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  app_name\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  app_name\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  app_name\android\app\src\main\res\values\styles.xml (created)
  app_name\android\app\src\profile\AndroidManifest.xml (created)
  app_name\android\gradle\wrapper\gradle-wrapper.properties (created)
  app_name\android\gradle.properties (created)
  app_name\android\settings.gradle (created)
  app_name\ios\Runner\AppDelegate.swift (created)
  app_name\ios\Runner\Runner-Bridging-Header.h (created)
  app_name\ios\Runner.xcodeproj\project.pbxproj (created)
  app_name\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)

  app_name\ios\.gitignore (created)
  app_name\ios\Flutter\AppFrameworkInfo.plist (created)
  app_name\ios\Flutter\Debug.xcconfig (created)
  app_name\ios\Flutter\Release.xcconfig (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)

  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]

  ng (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\AppIcon.appiconset\[email protected]

  ng (created)
  app_name\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json
  (created)
  app_name\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png
  (created)
  app_name\ios\Runner\Assets.xcassets\LaunchImage.imageset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\LaunchImage.imageset\[email protected]
  (created)
  app_name\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  app_name\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  app_name\ios\Runner\Base.lproj\Main.storyboard (created)
  app_name\ios\Runner\Info.plist (created)
  app_name\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata
  (created)
  app_name\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\IDEWorkspaceChe

  cks.plist (created)
  app_name\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\WorkspaceSettin

  gs.xcsettings (created)
  app_name\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  app_name\ios\Runner.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist
  (created)
  app_name\ios\Runner.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings
  (created)
  app_name\lib\main.dart (created)
  app_name\app_name.iml (created)
  app_name\pubspec.yaml (created)
  app_name\README.md (created)
  app_name\test\widget_test.dart (created)
Running "flutter pub get" in app_name...                            5.9s
Wrote 71 files.

All done!
[√] Flutter: is fully installed. (Channel stable, 1.22.6, on Microsoft Windows
    [Version 6.1.7601], locale en-US)
[√] Android toolchain - develop for Android devices: is fully installed.
    (Android SDK version 28.0.3)
[√] Android Studio: is fully installed. (version 3.5)
[√] VS Code: is fully installed. (version 1.53.2)
[√] Connected device: is fully installed. (1 available)

In order to run your application, type:

  $ cd app_name
  $ flutter run

Your application code is in app_name\lib\main.dart.

You’ve successfully created your first Flutter application.

Navigate to the folder containing newly created Flutter application.

cd app_name

Finally, you can run your Flutter application using the below command.

flutter run

You can see the Flutter application is launched in your Android Virtual Device.

Conclusion

In this tutorial, you’ve installed Flutter, setup Android in Flutter, created a default Flutter app and launched it in your Android Device. Flutter is one of the fast emerging technologies in Software Development.

As a next step, you can create your own Flutter applications for Android.

Leave a Comment

Share via
Copy link
Powered by Social Snap