Setup Flutter Development Environment

1. Flutter Android

We refer to Flutter official website to select the most important steps.

1.1. Software requirements

1.1.1. Development tools

  • Android Studio 2022.3 (Giraffe) or later to debug and compile Java or Kotlin code for Android. Flutter requires the full version of Android Studio.
  • Git 2.4 or later to manage source code.
    • To check if you have git installed, type git version in your Terminal.
    • If you don’t have git installed, use Homebrew.
    • If you have homebrew installed, type brew install git.

1.1.2. 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:

 The Flutter team recommends installing Visual Studio Code 1.75 or later and the Flutter extension for VS Code. This combination simplifies installing the Flutter SDK.

1.2. 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. Here recommend use the VS Code Flutter extension.

1.2.1. Use VS Code to install Flutter

  1. Open 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 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.

1.2.2. 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 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. VS Code may 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.

If you have installed all prerequisites and the Flutter SDK, you should be able to start developing Flutter on macOS for mobile-android.

1.3. Configure Android development

1.3.1. Configure the Android toolchain in Android Studio

Refer to Setup Android Development Environment to configure the Android environment.

  1. Start Android Studio.

  2. Go to the Settings dialog to view the SDK Manager.

    1. If you have a project open, go to Tools > SDK Manager.

    2. If the Welcome to Android Studio dialog displays, click the More Options icon that follows the Open button and click SDK Manager from the dropdown menu.

  3. Click SDK Platforms.

  4. Verify that Android API 33.0.0 has been selected.

    If the Status column displays Update available or Not installed:

    1. Select Android API 33.0.0.

    2. Click Apply.

    3. When the Confirm Change dialog displays, click OK.

      The SDK Quickfix Installation dialog displays with a completion meter.

    4. When the install finishes, click Finish.

      After you installed the latest SDK, the Status column might display Update available. This means some additional system images might not be installed. You can ignore this and continue.

  5. Click SDK Tools.

  6. Verify that the following SDK Tools have been selected:

    • Android SDK Command-line Tools
    • Android SDK Build-Tools
    • Android SDK Platform-Tools
    • Android Emulator

  7. If the Status column for any of the preceding tools displays Update available or Not installed:

    1. Select the needed tools.

    2. Click Apply.

    3. When the Confirm Change dialog displays, click OK.

      The SDK Quickfix Installation dialog displays with a completion meter.

    4. When the install finishes, click Finish.

1.3.2. Configure your target Android device: Set up the Android emulator

To configure your Flutter app to run in the Android emulator, follow these steps:

  1. Enable VM acceleration on your development computer.

  2. Start Android Studio.

  3. Go to the Settings dialog to view the SDK Manager.

    1. If you have a project open, go to Tools > Device Manager.

    2. If the Welcome to Android Studio dialog displays, click the More Options icon that follows the Open button and click Device Manager from the dropdown menu.

  4. Click Virtual.

  5. Click Create Device.

    The Virtual Device Configuration dialog displays.

  6. Select either Phone or Tablet under Category.

  7. Select a device definition. You can browse or search for the device.

  8. Click Next.

  9. Click x86 Images if your Mac runs on an Intel CPU or ARM Images if your Mac runs on an Apple CPU.

  10. Click one system image for the Android version you want to emulate.

    1. If the desired image has a Download icon to the right of the Release Name, click it.

      The SDK Quickfix Installation dialog displays with a completion meter.

    2. When the download completes, click Finish.

  11. Click Next.

    The Virtual Device Configuration displays its Verify Configuation step.

  12. To rename the Android Virtual Device (AVD), change the value in the AVD Name box.

  13. Click Show Advanced Settings.

  14. Scroll to Emulated Performance.

  15. From the Graphics dropdown menu, select Hardware - GLES 2.0.

    This enables hardware acceleration.

  16. Verify your AVD configuration. If it is correct, click Finish.

    To learn more about AVDs, check out Managing AVDs.

  17. In the Device Manager dialog, click the Run icon to the right of your desired AVD. The emulator starts up and displays the default canvas for your selected OS version and device.

1.3.3. Agree to Android licenses

Before you can use Flutter and after you install all prerequisites, agree to the licenses of the Android SDK platform.

  1. Open an elevated console window.

  2. Run the following command to enable signing licenses.

    $ flutter doctor --android-licenses

    If you accepted the Android Studio licenses at another time, this command returns:

    [========================================] 100% Computing updates...
All SDK package licenses accepted.

    You can skip the next step.

  3. Before agreeing to the terms of each license, read each with care.

1.4. Check your development setup

1.4.1. Run Flutter doctor

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

  1. Open the Terminal.

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

    $ flutter doctor

As you chose to develop for Android, 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.13.4, on macOS A.B chipset, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[!] Chrome - develop for the web
[!] Xcode - develop for iOS and macOS (Xcode not installed)
[✓] Android Studio (version 2022.3 (Giraffe) or later)
[✓] VS Code (version 1.81.1)
[✓] Connected device (1 available)
[✓] Network resources

! Doctor found issues in 2 categories.

2. Flutter iOS

We refer to Flutter official website to select the most important steps.

2.1. Software requirements

To write and compile Flutter code for mobile-ios, you must have the following version of macOS and the listed software packages.

2.1.1. Operating system

Flutter supports macOS 10.14 (Mojave) or later.

 > Important: When installing on an Apple Silicon Mac, install the Rosetta translation environment. Some components require the Rosetta.

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

2.1.2. Development tools

Download and install the macOS version of the following packages:

  • Xcode 15 to debug and compile native Swift or ObjectiveC code.
  • CocoaPods 1.12 to compile enable Flutter plugins in your native apps.
  • Git 2.4 or later to manage source code. This installs as part of the Xcode installation.
    • To check if you have git installed, type git version in your Terminal.
    • If you don’t have git installed, use Homebrew.
    • If you have homebrew installed, type brew install git.

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

2.1.3. 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:

The Flutter team recommends installing Visual Studio Code 1.75 or later and the Flutter extension for VS Code. This combination simplifies installing the Flutter SDK.

2.2. 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. Here we recommend use VS Code Flutter extension.

2.2.1. Use VS Code to install Flutter

  1. Open 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 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.

2.2.2. 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 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. VS Code may 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.

If you have installed all prerequisites and the Flutter SDK, you should be able to start developing Flutter on macOS for mobile-ios.

2.3. Configure iOS development

Refer to Setup iOS Development Environment to configure the iOS environment.

2.3.1. Configure Xcode

To develop Flutter apps for macOS, install Xcode to compile to native bytecode.

  1. To configure the Xcode command-line tools to use the installed version, run the following commands.

     $ sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

    To use the latest version of Xcode, use this path. If you need to use a different version, specify that path instead.

  2. To install the iOS Simulator, run the following command.

     $ xcodebuild -downloadPlatform iOS

  3. Sign the Xcode license agreement.

     $ sudo xcodebuild -license

Try to keep to the current version of Xcode.

2.3.2. Configure your target iOS device: Configure your iOS simulator

With Xcode, you can run Flutter apps on an iOS device or on the simulator.

To prepare to run and test your Flutter app on the iOS simulator, follow this procedure.

  1. To start the Simulator, run the following command:

     open -a Simulator

  2. Set your Simulator to use a 64-bit device. This covers the iPhone 5s or later.

    • From Xcode, choose a simulator device type.

      1. Go to Window > Devices and Simulators. You can also press Cmd + Shift + 2.
      2. Once the Devices and Simulators dialog opens, click Simulators.
      3. Choose a Simulator from the left-hand list or press + to create a new simulator.

    • From the Simulator app, go to File > Open Simulator > Choose your target iOS device.

    • To check the device version in the Simulator, open the Settings app > General > About.

  3. The simulated high-screen density iOS devices might overflow your screen. If that appears true on your Mac, change the presented size in the Simulator app.

Display SizeMenu commandKeyboard shortcut
SmallWindow > Physical SizeCmd + 1
ModerateWindow > Point AccurateCmd + 2
HD accurateWindow > Pixel AccurateCmd + 3
Fit to screenWindow > Fit ScreenCmd + 4

2.3.3. Install CocoaPods

If your apps depend on Flutter plugins with native macOS code, install CocoaPods. Built using Ruby, CocoaPods handles the bundling of various dependencies across Flutter and macOS code.

To install and set up CocoaPods, run the following commands:

  1. Install Homebrew if necessary.

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  2. Install ruby using Homebrew.

    $ brew install ruby

  3. Install cocoapods using Homebrew.

    $ brew install cocoapods

Using Homebrew reduces potential issues with chipsets and install permissions.

2.4. Check your development setup

2.4.1. Run Flutter doctor

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

  1. Open the Terminal.

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

    $ flutter doctor

As you chose to develop for iOS, 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.13.4, on macOS A.B chipset, locale en)
[!] Android toolchain - develop for Android devices
[!] Chrome - develop for the web
[✓] Xcode - develop for iOS and macOS (Xcode 15)
[!] Android Studio (not installed)
[✓] VS Code (version 1.81.1)
[✓] Connected device (1 available)
[✓] Network resources

! Doctor found issues in 3 categories.

3. Flutter Demo

3.1. Create your sample Flutter app with Visual Studio Code

  1. Open the Command Palette.

    Go to View > Command Palette or press + Shift + P.

  2. Type flutter

  3. Select the Flutter: New Project.

  4. When prompted for Which Flutter Project, select Application.

  5. Create or select the parent directory for the new project folder.

  6. When prompted for a Project Name, enter test_drive.

  7. Press Enter.

  8. Wait for project creation to complete.

  9. Open the lib directory, then the main.dart.

    To learn what each code block does, check out the comments in that Dart file.

The previous commands create a Flutter project directory called my_app that contains a simple demo app that uses Material Components.

3.2. Run your sample Flutter app

Run your example application on your desktop platform or in an iOS simulator or Android emulator.

Though you can deploy your app to the web, don’t choose that target for this tutorial. The web target doesn’t support hot reload at this time.

  1. Open the Command Palette.

    Go to View > Command Palette or press + Shift + P.

  2. Type flutter

  3. Select the Flutter: Select Device.

    If no devices are running, this command prompts you to enable a device.

  4. Select a target device from Select Device prompt.

  5. After you select a target, start the app. Go to Run > Start Debugging or press F5.

  6. Wait for the app to launch.

    You can watch the launch progress in the Debug Console view.

After the app build completes, your device displays your app.

Flutter Demo

Congratulations, your flutter development environment for both Android and iOS is now successfully configured.

j