How to Run a Flutter App in VS Code: A Step-by-Step Guide

I recently helped set up Flutter projects in VS Code, and it brought back how confusing the initial setup can feel. Flutter might already be installed, VS Code looks ready, yet commands aren’t detected, devices don’t show up, or the app simply refuses to run. At that point, it’s easy to doubt your code or wonder if you missed something obvious. In reality, most of these problems come from small environment details, PATH issues, missing SDK components, or device configuration gaps, that aren’t always clear from official docs.

I wrote this article to walk through the setup the way I wish I had it explained earlier. I’ll show how to create a Flutter project in VS Code, run it successfully, and fix the most common setup issues so you can move past configuration friction and focus on building your app.

Prerequisites to Setting Up Flutter in VS Code

Before creating and running a Flutter app, it’s important to ensure the required tools are set up correctly, as most issues later come from incomplete environment configuration. Here are the necessary tools you need to install:

1. Install the Flutter SDK

To get started with Flutter, the first step is to install the Flutter SDK on your computer. Head over to the official Flutter installation guide, which offers step-by-step instructions tailored for different operating systems. Once you’ve downloaded and installed the SDK, adding Flutter to your system’s PATH is essential so VS Code and the terminal can detect Flutter commands correctly. This allows you to run Flutter commands from any terminal window, no matter where you are in your file system.

If you’re on Windows, make sure to restart your terminal after adding Flutter to the PATH. For macOS and Linux users, updating the terminal profile should do the trick. After that, run flutter doctor to quickly identify missing dependencies, SDK issues, or device configuration problems. Once everything checks out, you’re ready to start using Flutter in your development environment!

2. Install Visual Studio Code (VS Code)

Visual Studio Code (VS Code) is a lightweight, yet powerful code editor. Download VS Code from the official website, install it, and open it up.

3. Install the Flutter and Dart Extensions in VS Code

To enable Flutter development in VS Code, you need to install both the Flutter and Dart extensions. Open VS Code, press Ctrl+Shift+X, search for “Flutter” and “Dart”, and install them. These extensions will provide features like syntax highlighting, auto-completion, debugging, and more.

4. Install Android Studio (Optional)

If you plan to run Flutter apps on Android, installing Android Studio is recommended because it provides the Android SDK, platform tools, and emulator required for most development workflows. Download it from the official site and set it up.

5. Xcode Setup for iOS

To run your Flutter app on an iOS emulator or physical iOS device, ensure you have Xcode installed on your macOS:

• Install Xcode from the App Store.
• After installing Xcode, open it at least once to agree to the licenses and allow the necessary installations.

Suggested Reads- How To Implement Dark Mode in Your Flutter App

6. CocoaPods Installation

Flutter uses CocoaPods to manage iOS dependencies. To install CocoaPods, run the following commands in your terminal:

sudo gem install cocoapods
pod setup

After this setup, run the following command inside your Flutter project's ios directory to ensure dependencies are correctly configured:

cd ios
pod install

Note: CocoaPods is required to run Flutter apps on iOS simulators or physical iOS devices.

7. Android or iOS Device/Emulator Setup

To run a Flutter app, you need at least one active device, either an emulator or a physical device, otherwise the app will build but won’t launch.

• Android: An Android emulator or a connected physical Android device with USB debugging enabled.
• iOS: An iOS simulator or a physical iOS device connected via USB with developer mode enabled.

Run the following command to verify your connected devices and simulators/emulators:

flutter devices

This command lists all available devices/emulators on your system.

How to Create a Flutter Project in VS Code

Now that your environment is ready, it’s time to create your first Flutter project in VS Code.

1. Create a New Flutter Project

Creating a new Flutter project in VS Code is quick and easy. Start by pressing Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette. In the search bar, type “Flutter: New Project” and hit Enter. When prompted, choose "Application" from the list of options.

Next, select a folder on your computer where you’d like the project to be saved. Give your project a name (e.g., my_flutter_app), and VS Code will automatically generate the necessary files and folder structure for you. Once that’s done, you’ll have a fresh Flutter project ready to customize and build upon. It’s that simple!

2. Open Your Flutter Project in VS Code

Once the project is created, it should automatically open in VS Code. If not, navigate to the folder where your project is saved and open it manually.

How to Run a Flutter App in VS Code

With your project set up, it's time to run the Flutter app in VS Code.

1. Open the Integrated Terminal

In VS Code, open the integrated terminal (Ctrl+ or Cmd+). Make sure you are in your project’s root directory.

2. Check for Connected Devices

You need an Android emulator or a connected device to run the app. Run the command:

flutter devices

This will show a list of available devices. Make sure you have an emulator running or a physical device connected.

3. Run Your Flutter App

To run your Flutter app in VS Code, press F5 or run the following command in the terminal:

flutter run

This command builds the app, installs it on the selected device or emulator, and starts a live debugging session in VS Code.

Troubleshooting Common Issues

Even with the correct setup, Flutter apps may fail to run due to environment configuration or device connection issues. Here are a few common issues you may encounter while running a Flutter app in VS Code:

1. Flutter Command Not Found

If you see an error about Flutter not being recognized, make sure you’ve added Flutter to your system’s PATH.

2. Device Not Found

Make sure you have an emulator running or a physical device connected. Run the command flutter doctor to check for any connection issues.

3. Missing Dependencies

If your project is missing dependencies, simply run the following command to fetch them:

flutter pub get

Suggested Reads- How to Implement Drag-and-Drop in Flutter

Conclusion

Running a Flutter app in VS Code becomes straightforward once the environment is configured correctly, as most issues are setup-related rather than code-related. From creating a new project to debugging with Flutter DevTools, VS Code offers a comprehensive platform for Flutter development. By following the steps outlined in this guide, you’ll be up and running with your first Flutter app in no time.

Now that you know how to run Flutter apps in VS Code, it’s time to get coding and build your dream app!