Flutter setup on Windows 11 using VS Code + Android Emulator

For Windows 11 + VS Code + Android Emulator, I recommend using VS Code as your coding/debugging IDE and installing Android Studio primarily for the Android SDK, SDK tools, and emulator. Flutter's current documentation recommends VS Code as a supported installation path, while Android Studio provides the Android tooling required for an emulator.

1. What you need

Install these components:

  1. Git for Windows
  2. Visual Studio Code
  3. Flutter SDK
  4. VS Code Flutter extension
  5. Android Studio
  6. Android SDK
  7. Android Emulator / virtual device

You do not have to write your application in Android Studio.

2. Install Git

Flutter's Windows setup lists Git for Windows as a prerequisite.

Install Git, then open PowerShell and verify:

git --version

You should see something similar to:

git version 2.x.x.windows.x

Reference: https://docs.flutter.dev/install/quick

3. Install VS Code

Install Visual Studio Code, which will be your main development environment.

Then open:

VS Code → Extensions

Search for:

Flutter

Install the official Flutter extension. Dart support is also installed/configured as part of the Flutter development setup.

The Flutter documentation currently recommends VS Code as one of the easiest ways to set up the Flutter SDK. 

4. Install Flutter SDK

There are two approaches.

Recommended: let VS Code install it

In VS Code press:

Ctrl + Shift + P

Search:

Flutter: New Project

If Flutter isn't installed, VS Code can guide you through downloading the SDK and adding it to PATH. 

Alternatively: install Flutter manually

You can download the Flutter SDK yourself and extract it somewhere such as:

C:\dev\flutter

Then add:

C:\dev\flutter\bin

to your Windows PATH.

Avoid putting the Flutter SDK inside locations that may create permission problems.

Restart VS Code/PowerShell after altering PATH.

Verify:

flutter --version

Then:

dart --version

5. Run Flutter Doctor

This is one of the most useful Flutter setup commands:

flutter doctor

It checks the development environment.

Initially, you might see something broadly like:

Flutter       ✓
Windows       ✓
Android       ✗
VS Code       ✓

Don't worry if Android isn't ready yet. We're going to configure it next.

6. Install Android Studio

Even though you're developing in VS Code, install Android Studio.

Why?

It gives you the important Android components:

Android Studio
       │
       ├── Android SDK
       ├── SDK Platform
       ├── Build Tools
       ├── Platform Tools / adb
       ├── Command-line Tools
       └── Android Emulator

Flutter's current Android setup documentation recommends installing the latest stable Android Studio when targeting Android. 

7. Install Android SDK components

Open Android Studio and go to:

More Actions → SDK Manager

or, with a project open:

Tools → SDK Manager

Under SDK Platforms, Flutter's current setup documentation instructs you to ensure an Android SDK platform is installed. At present, its setup page specifically references API level 36. 

Then open:

SDK Tools

Ensure the relevant tooling is installed, including:

  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • Android Emulator
  • Android SDK Platform-Tools
  • CMake
  • NDK (Side by side)

These are the tools currently identified by Flutter's Android setup documentation. 

8. Accept Android licenses

After installing the Android SDK tools, open PowerShell:

flutter doctor --android-licenses

You'll receive license prompts.

Accept them as appropriate.

Then run:

flutter doctor

Flutter's Android setup specifically requires accepting the Android SDK licenses after installing the prerequisites. 

9. Create an Android Emulator

Now open Android Studio and open the Device Manager.

Create a virtual device.

For example:

Device: Pixel
System Image: Recent Android image
Architecture: x86_64 or appropriate image

Download the system image if Android Studio requests it.

Finish creating the device and click the Play ▶ button.

Android should boot in a separate emulator window.

10. Check whether Flutter recognizes the emulator

Once the emulator has started, run:

flutter devices

You should see the Android emulator listed as one of the available Flutter devices.

Also run:

flutter doctor

At this point, the important Flutter/Android components should be healthy.

11. Create your first Flutter project

In PowerShell:

cd C:\dev
flutter create my_first_app
cd my_first_app

Open it in VS Code:

code .

You'll get the structure we discussed earlier:

my_first_app/
│
├── lib/
│   └── main.dart
│
├── android/
├── ios/
├── web/
├── windows/
├── linux/
├── macos/
│
├── test/
├── pubspec.yaml
├── pubspec.lock
└── analysis_options.yaml

12. Run the application

Make sure the emulator is running.

Then from your VS Code terminal:

flutter run

Flutter will:

Read Dart code
       ↓
Compile Flutter application
       ↓
Build Android application
       ↓
Install APK on emulator
       ↓
Launch application

You should see the default Flutter application running inside your Android emulator.

13. Run directly from VS Code

You don't have to keep using flutter run.

In the bottom-right area of VS Code, select your Android emulator as the target device.

Then:

Run → Start Debugging

or press:

F5

Your workflow becomes:

VS Code
   ↓
Flutter/Dart
   ↓
Android SDK
   ↓
Android Emulator
   ↓
Your App

14. Test Hot Reload

Open:

lib/main.dart

Find some text in the UI and change it.

For example, change:

Text('Flutter Demo Home Page')

to:

Text('Ganesh Flutter App')

Save the file while the application is running.

Flutter's hot reload can update the running application without requiring a complete restart, which makes UI development significantly faster.

15. Your final environment

Once everything is configured, your development environment looks roughly like this:

Windows 11
│
├── Git
│
├── VS Code
│   ├── Flutter Extension
│   └── Dart Extension
│
├── Flutter SDK
│
└── Android Studio
    ├── Android SDK
    ├── Build Tools
    ├── Platform Tools
    ├── Command-line Tools
    └── Android Emulator

The important distinction is:

VS Code → where you write/debug the application
Flutter SDK → builds and runs the Flutter/Dart application
Android SDK → provides Android build/deployment tools
Android Studio → convenient management of the SDK and emulator
Android Emulator → virtual Android phone where you test the app

Useful commands to remember

flutter --version
flutter doctor
flutter doctor -v
flutter devices
flutter create my_app
flutter pub get
flutter run

For your learning path, I'd do the setup in this order:

Windows setup → create first Flutter app → understand main.dart → Widgets → StatelessWidget vs StatefulWidget → layouts → navigation → forms → REST APIs → state management.

Comments

Post a Comment

Popular posts from this blog

Files in your Flutter Project

  In a Flutter project , the files are organized so that your Dart application code , UI resources , platform-specific Android/iOS code , dependencies , and build configuration remain separated. A typical project looks like this: my_flutter_app/ ├── lib/ │   └── main.dart ├── test/ ├── android/ ├── ios/ ├── web/ ├── windows/ ├── macos/ ├── linux/ ├── pubspec.yaml ├── pubspec.lock ├── analysis_options.yaml ├── .gitignore └── README.md 1. lib/ ⭐ Most important This is where almost all of your Flutter application code lives . lib/ ├── main.dart ├── screens/ ├── widgets/ ├── models/ ├── services/ └── utils/ For most day-to-day Flutter development, you spend the majority of your time here. main.dart The entry point of the Flutter application. A minimal example: import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({super.key});   @override   Widget build(BuildContext context) ...
Read more

Understanding single-page flutter app with state

// Imports Flutter's Material Design widgets such as // Scaffold, Text, Button, AppBar, etc. import 'package:flutter/material.dart'; // Every Dart application starts from main() void main() {   // Starts the Flutter application.   // MyApp becomes the root widget.   runApp(const MyApp()); } // Root widget of our application. class MyApp extends StatelessWidget {   const MyApp({super.key});   @override   Widget build(BuildContext context) {     // MaterialApp provides the basic app configuration.     return MaterialApp(       // Removes the DEBUG banner.       debugShowCheckedModeBanner: false,       // HomePage is the first screen.       home: const HomePage(),     );   } } // StatefulWidget is used because the counter will change. class HomePage extends StatefulWidget {   const HomePage({super.key}); ...
Read more