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:

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:

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:

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:

Frequently Asked Questions

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 shortcutsextensions, and settings I use for day-to-day Flutter development:

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

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

Daily Challenge - Your first Flutter App

Your first challenge is to complete this codelab by the Flutter team:

If you learn better with video, here’s a YouTube workshop covering the same steps:

Happy coding!

Questions? Let's chat