How to Run a Flutter App in Vs Code​?

Are you interested in using Flutter to create cross-platform apps? There are several IDEs used for Flutter programming, in comparison to others we have beside Visual Studio Code (VS Code) the best options since it is lightweight, faster, and easily configured. It comes with powerful extensions, direct debugging solutions, and a smooth developer experience.

We will walk you through the step-by-step process of setting up and running a Flutter app in VS Code. Whether you’re a beginner or an experienced developer, this guide will help you get started quickly and make the most of VS Code’s powerful features for Flutter development. t

Requirements for Running a Flutter App in VS Code

First, make sure your development environment is set up as intended so that you can run a Flutter app in Visual Studio Code (VS Code). Here are the steps to install the tools and dependencies required for this.

1. Installing Flutter SDK

The Flutter SDK includes everything you need to create Flutter applications. You can find the latest version to download on the Flutter website.

Setting Up Environment Variables

After downloading the SDK, you will want to add Flutter to your system’s PATH so that you can execute it from the command line.

• Windows:  You can include the Flutter bin directory (C:\flutter\bin) t in the system environment variables.
• macOS/Linux:  Modify your shell configuration file(.bashrc, .zshrc, or .bash_profile) with:
  

export PATH="$PATH:`pwd`/flutter/bin"

• Run Flutter Doctor in the terminal to check if Flutter is installed correctly.

2. Installing VS Code

VS Code is a lightweight yet powerful IDE that supports Flutter development. Download it from the official website and install it on your system.

3. Installing Required Extensions

To enable Flutter development in VS Code, install the following extensions:

• Flutter Extension – Provides Flutter-specific functionalities like debugging, running commands, and code snippets.
  
• Dart Extension – Enables Dart language support, which is essential for Flutter development.
  

To install these:

1. Open VS Code.
   
2. Navigate to the Extensions Marketplace (Ctrl + Shift + X or Cmd + Shift + X on macOS).
   
3. Search for Flutter and Dart and install them.
   

4. Setting Up an Emulator or Physical Device

Install Android Studio (required for testing your Flutter app on an Android emulator), it includes the required Android SDK and AVD (Android Virtual Device) manager.

1. Download Android Studio.
   
2. Install the Android SDK and set up a Virtual Device from the AVD Manager.
   

Xcode (for iOS Simulator)

For iOS development, install Xcode on macOS. The iOS simulator is included in Xcode.

• Download and install Xcode from the Mac App Store.
• Execute the below command to accept the license agreement:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Enabling USB Debugging (for Physical Devices)

If you prefer testing on a physical device:

• Android: Enable Developer Mode and USB Debugging in your phone settings.
  
• iOS: Enable Developer Mode in Xcode and trust your development machine.
  

With these steps completed, you are now ready to create and run your first Flutter app in VS Code!

Setting Up a Flutter Project in VS Code

With the setup of your development environment complete, it’s all set up to create or load a Flutter Project in Visual Studio Code (VS Code).

1. Creating a New Flutter Project

VS Code provides an easy way to create a new Flutter project using the command palette.

Steps to Create a New Project:

1. Open VS Code.
   
2. Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette.
   
3. Type “Flutter: New Project” and select it.
   
4. Choose “Flutter Application” as the project type.
   
5. Select a folder where you want to save the project.
   
6. Enter a project name (use lowercase with underscores, e.g., my_flutter_app).
   
7. Wait for the project to be created. VS Code will generate the necessary files and dependencies.
   

Once the project is set up, the default folder structure will look like this:

my_flutter_app/
│── android/         # Native Android code  
│── ios/             # Native iOS code  
│── lib/             # Main Dart files (where you'll write most of your code)  
│── test/            # Testing files  
│── pubspec.yaml     # Project configuration and dependencies  
│── README.md        # Project documentation  

2. Navigating the Project Structure

• lib/main.dart – The entry point of your Flutter app. Modify this file to build your UI. 
• pubspec.yaml – Manages dependencies and assets. 
• android/ & ios/ – Contains platform-specific files. 
• test/ – For writing unit and widget tests. 

3. Opening an Existing Flutter Project

If you have an existing Flutter project and you want to open it on VS Code, you can do so in the following way:

1. Open VS Code.
   
2. Click on File → Open Folder… (or Open on macOS).
   
3. Select your Flutter project folder and click Open.
   
4. If prompted, click “Yes” to trust the workspace.
   

Open the Terminal in VS Code (Ctrl + ~ or Cmd + ~ on macOS) and run:

flutter pub get

        5.  This fetches all required dependencies.

Now, your Flutter project is loaded and ready for development in VS Code!

Running a Flutter App in VS Code

When you are done with Flutter project setup process then you can run and test your application from VS Code. In this section, we will take a look at selecting a device, running the app, hot reload, and hot restart to smoothen our development experience.

1. Selecting a Device/Emulator

Before running the app, you need to select a target device or emulator.

Steps to Select a Device:

   1. Ensure your device/emulator is connected:

• • For an Android Emulator, start it from Android Studio → AVD Manager.
    

For an iOS Simulator, open it using:

open -a Simulator

• For a physical device, connect it via USB and enable USB Debugging (Android) or Developer Mode (iOS).
  

  2. Select the device in VS Code:

• • Look at the bottom-right corner of VS Code.
    
  • Click on the device selector (it usually shows “No Devices” if none are connected).
    
  • Choose the device/emulator you want to run the app on.
    

2. Running the App

There are two ways to run your Flutter app in VS Code:

Method 1: Using the Debug Mode (F5)

1. Press F5 (or Fn + F5 on some keyboards) to start debugging.
   
2. VS Code will compile and launch the app on the selected device.
   
3. You can set breakpoints and debug your app using the Debug Console.
   

Method 2: Using the Terminal

1. Open the VS Code terminal (Ctrl + ~ or Cmd + ~ on macOS).

Run the following command:

flutter run

         2. Your app will launch on the connected device/emulator.

1. 3. Hot Reload vs. Hot Restart

Flutter provides Hot Reload and Hot Restart to speed up the development process.

💡 Use Hot Reload for UI changes and Hot Restart when modifying app state or dependencies.

Debugging a Flutter App in VS Code

Flutter Debugging In VS Code Debugging is an important aspect of flutter development, and VS Code gives you some powerful tools to enable you to find and fix problems quickly. This section enlarges your debugging experience with breakpoints, Debug Console and Widget Inspector.

1. Using Breakpoints

With breakpoints, you can pause the execution of your code and inspect your variables, which can help you identify any logic errors.

How to Set and Manage Breakpoints:

1. Launch Open VS Code and open the dart file you want to debug (e.g., lib/main.dart).
   
2. Select the left margin beside the line number where you want execution to stop. This will result in a red dot, which shows a breakpoint.
3. Press F5 to start debugging. The execution will pause at the breakpoint, allowing you to inspect variables and the app’s state.
   
4. Use the Debug Sidebar (on the left) to:
   
   • Resume execution.
     
   • Step through the code (Step Over, Step Into, Step Out).
     
   • View local variables and call stack.
     
5. To remove a breakpoint, click on the red dot again.
   

2. Debug Console & Logs

The Debug Console in VS Code helps analyze runtime errors, warnings, and print statements.

How to Use the Debug Console:

1. Now, launch the Debug Console via View → Debug Console (or using Ctrl + Shift + Y / Cmd + Shift + Y on macOS).

During debugging, set logs by using print() statements in your Dart code to output logs. Example:

print("Button clicked! User ID: $userId");

       2. You will see errors and stack traces in the Debug Console which will allow you to troubleshoot the source of the problems.

💡 Tip: If your application crashes, inspect the logs to see detailed error messages and address the problem accordingly.

3. Widget Inspector

The Widget Inspector is a powerful tool that helps debug UI-related issues in Flutter apps.

How to Use the Widget Inspector:

1. Open VS Code and run your app in Debug Mode (F5).
   
2. In the Debug Sidebar, find the Widget Inspector tab.
   
3. Click on any widget in the app to:
   
   • See its properties, hierarchy, and constraints.
     
   • Identify layout issues (e.g., overflowing widgets).
     
   • Modify UI elements in real time.
     

💡 Tip: Use the debugPaintSizeEnabled property to visualize widget boundaries and debug layout issues:

import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

Common Issues & Troubleshooting

While running Flutter in VS Code, you might encounter some common issues. Below are troubleshooting steps to fix them.

1. Flutter SDK Not Detected

Problem: When running Flutter Doctor, you see an error stating:

“Flutter SDK not found“

Solution:

1. Check if Flutter is installed by running:

flutter --version

2. Verify that Flutter is added to your PATH:

• • Windows: Add C:\flutter\bin to Environment Variables → System Path.
    

macOS/Linux: Open your terminal and run:

export PATH="$PATH:`pwd`/flutter/bin"

Permanently add it to ~/.bashrc or ~/.zshrc:

echo 'export PATH="$PATH:/path/to/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

3. Restart VS Code and try again.

2. Emulator Not Showing Up

Problem: No devices are listed in VS Code’s device selector.

Solution:

For Android Emulator:

1. Open Android Studio → AVD Manager → Ensure an emulator is set up.
   
2. Start the emulator manually and then restart VS Code.
   

Run:

flutter devices

 If no devices appear, run:

flutter doctor --android-licenses

       3. and accept all licenses.

For iOS Simulator (macOS only):

Ensure Xcode is installed and open the simulator:

open -a Simulator

Run:

flutter devices

 If the simulator doesn’t appear, try:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

3. Dependencies Issues

Problem: Errors related to missing or outdated dependencies.

Solution:

Open VS Code Terminal and run:

flutter pub get

This fetches missing dependencies.

If issues persist, try:

flutter clean
flutter pub get

Ensure dependencies in pubspec.yaml are compatible. Avoid version conflicts.

4. Build Failures

Problem: Errors when running flutter run, often related to Gradle (Android) or CocoaPods (iOS).

For Android (Gradle Errors):

Open VS Code Terminal and run:

cd android
./gradlew clean
cd ..
flutter clean
flutter pub get

Ensure Java JDK 11 or higher is installed and configured.

Delete android/.gradle and android/build folders, then rebuild.

For iOS (CocoaPods Errors):

1. Open VS Code Terminal and run:

cd ios
pod install --repo-update
cd ..
flutter clean
flutter pub get

2. Ensure CocoaPods is installed:

sudo gem install cocoapods

3. If issues persist, try Xcode → Product → Clean Build Folder.

Tips for Optimizing Flutter Development in VS Code

Here are some of the key tips, keyboard shortcuts, and useful extensions here to build a better Flutter development workflow in VS Code and how to code better, improve your version control switching, and more.

1. Useful Keyboard Shortcuts

What are your top VS Code shortcuts that help you speed things up? These include some of the most useful:

💡 Tip: Customize shortcuts in File → Preferences → Keyboard Shortcuts.

2. Recommended VS Code Extensions

Enhance your Flutter development with these must-have VS Code extensions:

1. Flutter & Dart Extensions (Essential)

• Flutter – Provides auto-completion, debugging, and hot reload.
  
• Dart – Adds language support for Flutter apps.
  

2. Awesome Flutter Snippets

• Speeds up coding with pre-built Flutter widget snippets.
  
• Install from Extensions (Ctrl + Shift + X) → Search for “Awesome Flutter Snippets”.
  

3. Error Lens

• Highlights errors & warnings inline for faster debugging.
  

4. Bracket Pair Colorizer 2

• Helps visualize nested widget structures by coloring brackets.
  

5. GitLens

• Enhances Git integration with detailed commit history and blame annotations.
  

💡 Tip: You can install all extensions in one command:

code --install-extension Dart-Code.flutter
code --install-extension Dart-Code.dart-code
code --install-extension alefragnani.project-manager
code --install-extension NathanRidley.awesome-flutter-snippets
code --install-extension usernamehw.errorlens
code --install-extension CoenraadS.bracket-pair-colorizer-2
code --install-extension eamodio.gitlens

3. Using Version Control (Git Integration)

Keeping your Flutter projects under version control with Git helps in managing code changes, collaborating with teams, and rolling back mistakes.

Setting Up Git in VS Code

Initialize a Git repository (if not already set up):

git init
git add .
git commit -m "Initial commit"

Connect to GitHub/GitLab/Bitbucket:

• • Open Source Control (Ctrl + Shift + G or Cmd + Shift + G).
    
  • Click “Publish to GitHub” (if GitHub is set up).
    

Alternatively, use:

git remote add origin https://github.com/your-repo.git
git push -u origin main

Common Git Commands for Flutter Development

💡 Tip: Use the GitLens extension for an enhanced Git experience in VS Code.

Conclusion

Having the tools and setup that is needed to start the flutter app in the VS code is simple. VS Code provides a powerful development environment, from installing the Flutter SDK and setting up an emulator, to using debugging tools such as breakpoints and the Widget Inspector. Furthermore, addressing common problems such as SDK detection, emulator configuration, and dependency errors helps in establishing a seamless work environment.

Use VS Code Extensions, Git and Useful keyboard shortcuts to speed up development Hence the best practices and there you have it, make Flutter app, debug, that all in the VS Code be your top IDE for making the Flutter apps.