Software requirements

#

To write and compile Flutter code for Web, install the following packages.

Operating system

#

Flutter supports developing on macOS 12 (Monterey) or later. This guide presumes your Mac runs the zsh as your default shell.

Some Flutter components require the Rosetta 2 translation process. If you're developing on an Apple Silicon (ARM) Mac, install Rosetta 2:

sudo softwareupdate --install-rosetta --agree-to-license

Development tools

#

Download and install the following packages.

  • Google Chrome to debug JavaScript code for web apps.
  • Git to manage Flutter versions and your own source code versioning. To check if you have git installed, type git version in your Terminal. If you need to install git, run xcode-select --install.

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

Text editor or integrated development environment

#

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've installed Visual Studio Code and the Flutter extension for VS Code.

Prompt VS Code to install Flutter

#
  1. Launch VS Code.

  2. To open the Command Palette, press Command + 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 don't have the Flutter SDK installed, click Download SDK.

      This option sends you the Flutter install page if you haven't installed Git 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 ~/development/

  2. Click Clone Flutter.

    While downloading Flutter, VS Code displays these pop-up notifications:

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

    The download and installation take a few minutes. If you suspect that the download has hung, click Cancel, then start the installation again.

    When the Flutter installation 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?
  3. Click Add SDK to PATH.

    When successful, a notification displays:

    The Flutter SDK was added to your PATH
  4. VS Code might display a Google Analytics notice.

    If you agree, click OK.

  5. To enable flutter in all Terminal windows:

    1. Close, then reopen all Terminal 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.

    Intel ProcessorApple Silicon
    (loading...)(loading...)

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

    The Flutter SDK should download to the macOS default download directory: ~/Downloads/.

  2. Create a folder where you can install Flutter.

    Consider creating a directory at ~/development/.

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

    unzip ~/Downloads/flutter_sdk_v1.0.0.zip \
           -d ~/development/

    When finished, the Flutter SDK should be in the ~/development/flutter directory.

Add Flutter to your PATH

#

To run Flutter commands in the terminal, add Flutter to the PATH environment variable. This guide presumes your Mac runs the latest default shell, zsh. Zsh uses the .zshenv file for environment variables.

  1. Launch your preferred text editor.

  2. If it exists, open the Zsh environmental variable file ~/.zshenv in your text editor. If it doesn't, create ~/.zshenv.

  3. Copy the following line and paste it at the end of your ~/.zshenv file.

    bash
    export PATH=$HOME/development/flutter/bin:$PATH
  4. Save your ~/.zshenv file.

  5. To apply this change, restart all open terminal sessions.

If you use another shell, check out this tutorial on setting your PATH.

Check your development setup

#

Help

Run Flutter doctor

#

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

  1. Open your Terminal.

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

    flutter doctor

As you chose to develop for Web, you do not need all components. If you followed this guide, the command should output [✓] for the tooling and platforms you set up.

Troubleshoot Flutter doctor issues

#

When the flutter doctor command returns an error, it could be for Flutter, VS Code, Xcode, 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.

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 macOS apps with Flutter

#

Congratulations. Having installed all prerequisites and the Flutter SDK, you can start developing Flutter apps for Web on macOS.

To continue on your learning journey, consult the following guides:

Manage your Flutter SDK

#

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