Contents
description bug_report

Start building Flutter web apps on Windows

Contents

Verify system requirements

#

To install and run Flutter, your Windows environment must meet the following hardware and software requirements.

Hardware requirements

#

Your Windows Flutter development environment must meet the following minimal hardware requirements.

RequirementMinimumRecommended
x86_64 CPU Cores48
Memory in GB816
Display resolution in pixelsWXGA (1366 x 768)FHD (1920 x 1080)
Free disk space in GB2.52.5

Software requirements

#

To write and compile Flutter code for web, you must have the following version of Windows and the listed software packages.

Operating system

#

Flutter supports 64-bit version of Microsoft Windows 10 or later. These versions of Windows should include the required Windows PowerShell 5 or later.

Development tools

#

Download and install the Windows version of the following packages:

The developers of the preceding software provide support for those products. To troubleshoot installation issues, consult that product's documentation.

When you run the current version of flutter doctor, it might list a different version of one of these packages. If it does, install the version it recommends.

Configure a text editor or IDE

#

You can build apps with Flutter using any text editor or integrated development environment (IDE) combined with Flutter's command-line tools.

Using an IDE with a Flutter extension or plugin provides code completion, syntax highlighting, widget editing assists, debugging, and other features.

Popular options include:

Install the Flutter SDK

#

To install the Flutter SDK, you can use the VS Code Flutter extension or download and install the Flutter bundle yourself.

Use VS Code to install Flutter

#

To install Flutter using these instructions, verify that you have installed Visual Studio Code 1.77 or later and the Flutter extension for VS Code.

Prompt VS Code to install Flutter

#

  1. Launch VS Code.

  2. To open the Command Palette, press Control + Shift + P.

  3. In the Command Palette, type flutter.

  4. Select Flutter: New Project.

  5. VS Code prompts you to locate the Flutter SDK on your computer.

    1. If you have the Flutter SDK installed, click Locate SDK.

    2. If you do not have the Flutter SDK installed, click Download SDK.

      This option sends you the Flutter install page if you have not installed Git for Windows as directed in the development tools prerequisites.

  6. When prompted Which Flutter template?, ignore it. Press Esc. You can create a test project after checking your development setup.

Download the Flutter SDK

#

  1. When the Select Folder for Flutter SDK dialog displays, choose where you want to install Flutter.

    VS Code places you in your user profile to start. Choose a different location.

    Consider %USERPROFILE% or C:\dev.

  2. Click Clone Flutter.

    While downloading Flutter, VS Code displays this pop-up notification:

    Downloading the Flutter SDK. This may take a few minutes.

    This download takes a few minutes. If you suspect that the download has hung, click Cancel then start the installation again.

  3. Once it finishes downloading Flutter, the Output panel displays.

    Checking Dart SDK version...
Downloading Dart SDK from the Flutter engine ...
Expanding downloaded archive...

    When successful, VS Code displays this pop-up notification:

    Initializing the Flutter SDK. This may take a few minutes.

    While initializing, the Output panel displays the following:

    Building flutter tool...
Running pub upgrade...
Resolving dependencies...
Got dependencies.
Downloading Material fonts...
Downloading Gradle Wrapper...
Downloading package sky_engine...
Downloading flutter_patched_sdk tools...
Downloading flutter_patched_sdk_product tools...
Downloading windows-x64 tools...
Downloading windows-x64/font-subset tools...

    This process also runs flutter doctor -v. At this point in the procedure, ignore this output. Flutter Doctor might show errors that don't apply to this quick start.

    When the Flutter install succeeds, VS Code displays this pop-up notification:

    Do you want to add the Flutter SDK to PATH so it's accessible
in external terminals?

  4. Click Add SDK to PATH.

    When successful, a notification displays:

    The Flutter SDK was added to your PATH

  5. VS Code may display a Google Analytics notice.

    If you agree, click OK.

  6. To enable flutter in all PowerShell windows:

    1. Close, then reopen all PowerShell windows.
    2. Restart VS Code.

Download then install Flutter

#

To install Flutter, download the Flutter SDK bundle from its archive, move the bundle to where you want it stored, then extract the SDK.

  1. Download the following installation bundle to get the latest stable release of the Flutter SDK.

    (loading...)

    For other release channels, and older builds, check out the SDK archive.

    The Flutter SDK should download to the Windows default download directory: %USERPROFILE%\Downloads.

    If you changed the location of the Downloads directory, replace this path with that path. To find your Downloads directory location, check out this Microsoft Community post.

  2. Create a folder where you can install Flutter.

    Consider creating a directory at %USERPROFILE% (C:\Users\{username}) or %LOCALAPPDATA% (C:\Users\{username}\AppData\Local).

  3. Extract the zip file into the directory you want to store the Flutter SDK.

    C:> Expand-Archive `
    –Path $env:USERPROFILE\Downloads\flutter_sdk_v1.0.0.zip `
    -Destination $env:USERPROFILE\dev\

    When finished, the Flutter SDK should be in the C:\user\{username}\dev\flutter directory.

Update your Windows PATH variable

#

help Help

To run Flutter commands in PowerShell, add Flutter to the PATH environment variable. This section presumes that you installed the Flutter SDK in %USERPROFILE%\dev\flutter.

  1. Press Windows + Pause.

    If your keyboard lacks a Pause key, try Windows + Fn + B.

    The System > About dialog displays.

  2. Click Advanced System Settings > Advanced > Environment Variables...

    The Environment Variables dialog displays.

  3. In the User variables for (username) section, look for the Path entry.

    1. If the entry exists, double-click on it.

      The Edit Environment Variable dialog displays.

      1. Double-click in an empty row.

      2. Type %USERPROFILE%\dev\flutter\bin.

      3. Click the %USERPROFILE%\dev\flutter\bin entry.

      4. Click Move Up until the Flutter entry sits at the top of the list.

      5. Click OK three times.

    2. If the entry doesn't exist, click New....

      The Edit Environment Variable dialog displays.

      1. In the Variable Name box, type Path.

      2. In the Variable Value box, type %USERPROFILE%\dev\flutter\bin

      3. Click OK three times.

  4. To enable these changes, close and reopen any existing command prompts and PowerShell instances.

Check your development setup

#

help Help

Run Flutter doctor

#

The flutter doctor command validates that all components of a complete Flutter development environment for Windows.

  1. Open PowerShell.

  2. To verify your installation of all the components, run the following command.

    C:> flutter doctor

As you chose to develop for web, you do not need all components. If you followed this guide, the result of your command should resemble:

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on Microsoft Windows 11 [Version 10.0.22621.3155], locale en)
[✓] Windows version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[!] Visual Studio - develop Windows apps
[!] Android Studio (not installed)
[✓] VS Code (version 1.86)
[✓] Connected device (1 available)
[✓] Network resources


! Doctor found issues in 3 categories.

Troubleshoot Flutter doctor issues

#

When the flutter doctor command returns an error, it could be for Flutter, VS Code, , the connected device, or network resources.

If the flutter doctor command returns an error for any of these components, run it again with the verbose flag.

C:> flutter doctor -v

Check the output for other software you might need to install or further tasks to perform.

If you change the configuration of your Flutter SDK or its related components, run flutter doctor again to verify the installation.

Start developing web on Windows apps with Flutter

#

Congratulations! Now that you have installed all prerequisites and the Flutter SDK, you should be able to start developing Flutter apps for web on Windows.

Manage your Flutter SDK

#

To learn more about managing your Flutter SDK install, consult the following resources.