Flutter Installation & IDE Config

Welcome onboard! 👋

The goals of this first lesson are to:

• get started by installing the Flutter SDK
• install and get familiar with VSCode so you can make the most of it
• build your first Flutter app

Let’s get to it!

Flutter Installation

To install the Flutter SDK, follow the instructions on the official website at docs.flutter.dev:

• Install Flutter

Notes:

• To build Flutter apps on Android, you’ll need to install the Android SDK, as well as the Android emulator.
• To build Flutter apps on iOS, you’ll need to install Xcode.

The guide above explains how to do this.

If you run into any snags or if something isn’t working for you, check the FAQ below.

Since Flutter is a multi-platform UI toolkit, you can use it to build apps for iOS, macOS, Android, Windows, Linux, and web. Though note that to build apps for iOS and macOS**, you’ll need a macOS system**. If you’re on Windows, you could explore services like macincloud and Remote Mac to build iOS apps remotely - or better yet, get yourself a Mac mini and use that.

Configuring your IDE

Once you’ve installed Flutter, you’ll need a code editor such as Android Studio or Visual Studio Code, along with the Dart and Flutter plugins:

• Set up an editor

To make the most of your IDE, check out the documentation for tips on running and debugging your apps, using code snippets, keyword shortcuts, and more:

• Android Studio and IntelliJ
• Visual Studio Code

Flutter doctor

Once everything is installed (don’t forget to configure your system PATH on Windows or macOS!), try running flutter doctor on your terminal. Your output should look something like this:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.8, on macOS 13.6.3 22G436 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.85.1)
[✓] Connected device (3 available)
[✓] Network resources
 
• No issues found!

If flutter doctor doesn’t report any errors, you already have everything you need to start building apps.

Time for a quick test drive. This page shows you how to create a new Flutter project and run it:

• Test drive

Frequently Asked Questions

• How to find the path of Flutter SDK
• Flutter command not found
• Waiting for another flutter command to release the startup lock
• Android Studio (not installed) , when run flutter doctor while Android Studio installed on machine
• flutter doctor —android-licenses gives a java error
• Flutter doctor error - Android sdkmanager tool not found. Windows
• I am getting error “cmdline-tools component is missing” after installing Flutter and Android Studio… I added the Android SDK. How can I solve them?
• How to run CocoaPods on Apple Silicon (M1)
• Disable autoformat in VS Code for dart

Bonus: VSCode Shortcuts, Extensions & Settings for Flutter Development

VSCode is an excellent IDE for Flutter development.

After you have completed the basic setup steps, the next best step is to customise it to boost your workflow.

To make this easier, I’ve written this guide about all the shortcuts, extensions, and settings I use for day-to-day Flutter development:

• VSCode Shortcuts, Extensions & Settings for Flutter Development

And if you’re on IntelliJ / Android studio, I’ve got you covered, too:

• IntelliJ / Android Studio Shortcuts for Flutter Development

If you completed all the steps above, pat yourself on the back: your Flutter dev environment is ready to go! 🚀