Setting Up Your Flutter Development Environment

Welcome to the first lesson of your journey into app development! We're starting at the very beginning by building a solid foundation. Today's goal is to get your computer fully set up for Flutter development. We will install the necessary software, configure your code editor, and run your very first Flutter application on both a simulator and a physical phone.

This initial setup is the most critical step. Once it's done, you'll have a smooth runway for all the exciting coding and building we'll do in the upcoming lessons, starting with the fundamentals of the Dart programming language.

The Flutter Development Ecosystem

Before we dive into the installation, let's briefly clarify the components you'll be setting up. Unlike web development where you might just need a text editor and a browser, mobile development involves a few more moving parts:

Flutter SDK (Software Development Kit): This is the core toolkit. It contains the Dart programming language, the Flutter framework (all the UI components and libraries), and command-line tools that compile your code into native Android and iOS apps.
IDE (Integrated Development Environment): This is your code editor. We will be using Visual Studio Code (VS Code), which is likely familiar to you from your web development background. We'll enhance it with a specific Flutter extension that provides features like code completion, debugging, and project creation wizards.
Platform Toolchains: To build and run an app for a specific platform (like Android or iOS), you need that platform's native build tools.
- For Android, this means installing Android Studio, which manages the Android SDK, command-line tools, and virtual devices (emulators).
- For iOS, this means installing Xcode on a Mac, which provides the iOS SDK, simulators, and build tools.

Don't worry, we'll walk through this step-by-step.

Step 1: Install the Flutter SDK and VS Code Extension

The most streamlined way to get started is to use the Flutter extension for VS Code, which can handle the SDK download for you.

Install Flutter using VS Code

The official Flutter documentation provides an excellent guide for installing the SDK directly through VS Code. This method is clean and integrates well with the editor.

Please read the section Install and set up Flutter. Follow the instructions to: Launch VS Code. Add the Flutter extension from the marketplace. Use the command palette (Cmd/Ctrl + Shift + P) to run Flutter: New Project, which will prompt you to download the SDK. Add the SDK to your PATH when prompted.

Step 2: Verify Your Setup with `flutter doctor`

Once the installation is complete, the Flutter SDK provides a powerful diagnostic tool called flutter doctor. This command checks your system and shows a report of what is installed correctly and what might be missing.

Open a new terminal or command prompt window and run:

flutter doctor -v

The -v flag gives verbose output, which is more helpful. You'll likely see a report with several sections. Some will have green checkmarks (✅), and others might have red crosses (❌) or yellow exclamation marks (❗). Our goal is to get checkmarks for the Flutter toolchain, your chosen editor, and at least one target platform (Android or iOS).

The output from flutter doctor will be our guide for the next steps.

Step 3: Set Up the Android Toolchain

This setup is essential for building Android apps and can be done on Windows, macOS, or Linux. Even if you plan to primarily use VS Code, you need to install Android Studio to manage the Android SDK and emulators.

The Quick Guide to Mobile Development Using Flutter - Alisco IT

This guide gives a concise overview of installing Android Studio and verifying the installation.

First, read the section Set up Android Studio to download, install, and configure an Android emulator (AVD). Then, read the section on verifying your installation. After installing Android Studio, you may need to run flutter doctor --android-licenses as suggested by the flutter doctor output to accept the necessary licenses.

After installing Android Studio and creating a virtual device, run flutter doctor -v again. You should see a green checkmark next to "Android toolchain" and a mention of your connected emulator under "Connected device".

For a visual walkthrough of setting up an Android emulator within Android Studio, the following video is very helpful.

Complete Guide to Install Flutter VSCODE, Android studio | With emulator | 2025

This video demonstrates how to create and configure an Android emulator (AVD) using Android Studio's manager.

Watch the segment from setting up the emulator. The presenter shows how to select a device, an Android version, and configure the emulator to launch in a separate window, which is often more convenient.

Step 4: Set Up the iOS Toolchain (macOS Only)

Since you have access to a Mac, you can also set up your environment for iOS development. This step is only possible on macOS.

The main requirement is to install Xcode. It's a large application, so the download and installation can take some time.

How to Install Flutter on a Mac: Step-by-Step Guide

This comprehensive video guide by Flutter Mapp is one of the best resources for a complete macOS installation, covering common issues like Cocoapods.

First, watch the section on installing Xcode, from installing Xcode from the App Store and ensuring the command-line tools are selected. A very common issue on macOS is setting up Cocoapods. The video provides an excellent walkthrough for troubleshooting this. Watch from fixing Cocoapods by updating Ruby with Homebrew. Following these steps carefully can save you a lot of time. Finally, watch the part about installing the Android toolchain on Mac, which includes accepting the licenses. This is covered from installing Android Studio on Mac.

After completing these steps, running flutter doctor -v on your Mac should show green checkmarks for both the Xcode and Android toolchains.

Step 5: Create and Run Your First App

Now for the rewarding part! Let's create a new Flutter project and see it run.

Create the Project: In VS Code, open the command palette (Cmd/Ctrl + Shift + P), type Flutter: New Project, and select the Application template. Choose a folder to save your project in and give it a name (e.g., hello_flutter). Project names must be in snake_case.
Select a Device: In the bottom-right corner of the VS Code window, you'll see a device selector. Click on it to choose one of the emulators or simulators you configured.
Run the App: Open the lib/main.dart file. You can now launch the app in a few ways:
- Press F5.
- Go to the Run and Debug panel on the left and click the green play button.

After a minute or two, you should see the Flutter demo app launch on your emulator/simulator.

This image shows the default starter application you've just launched. It's a simple counter app that demonstrates some basic Flutter concepts, running side-by-side on Android and iOS simulators.

Step 6: Run on a Physical Device

Running your app on a real phone is essential for testing features like the camera or GPS and for getting a true feel for performance.

Connecting a physical device via USB is a straightforward way to test your app with native performance and access to hardware features.

The process is slightly different for Android and iOS.

The Quick Guide to Mobile Development Using Flutter - Alisco IT

This guide clearly outlines the steps for both platforms.

Please read the sections for running on Android and running on iOS. For Android, the key is to enable "Developer options" and "USB debugging" on your device. Once you connect the phone, it will appear in the device list in VS Code. For iOS, you'll need a free Apple Developer account. The first time you run on a physical iOS device, you may need to open the project's ios/Runner.xcworkspace file in Xcode to select your development team for code signing.

Conclusion

Congratulations on making it through the setup process! This is a significant first step. You have now:

Installed the Flutter SDK and configured your VS Code editor.
Set up the necessary platform toolchains for Android and/or iOS.
Successfully created and run the starter Flutter app on both an emulator and a physical device.

You now have a complete, professional development environment ready for building powerful mobile applications.

In our next lesson, we will leave the world of configuration behind and dive into code. We'll start exploring the Dart programming language, covering its syntax for variables, types, and control flow. This will be the first step in learning the language that powers Flutter.

Recommended resources