This tutorial will demonstrate how to install flutter in Mac and build the first app with Xcode.

To install flutter and develop the app, we need to check environment meet minimum requirements

  • Disk space: 2.8 G
  • macOS 64-bit
  • Xcode

Install Flutter in Mac

Download the latest stable release of the Flutter SDK

Download link: Flutter SDK releases

Extract file and move file to bin path

unzip ~/Downloads/

mv flutter ~/Development

export PATH=~/Development/flutter/bin:$PATH

We need to set up a flutter path to .bash_profile

vim ~/.bash_profile

and path following the export path

export PATH=~/Development/flutter/bin:$PATH

source .bash_profile let .bash_profile change work.

source ~/.bash_profile

Use following command to update flutter

flutter upgrade

Install plugin

Execute flutter docker to install the plugin

flutter docker


  ║                 Welcome to Flutter! -                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║                                        ║

Running "flutter pub get" in flutter_tools...                       9.7s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale zh-Hant-TW)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      On first launch it will assist you in installing the Android SDK components.
      (or visit for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at:
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see
      To install see for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.58.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

Install Xcode

It needs to install Xcode to develop flutter, we can install from web download or the Mac App Store.

Run flutter APP on iOS Simulator

Prepare iOS Simulator by following command:

open -a Simulator

Check the simulator is using a 64-bit device (iPhone 5s or later) from the menu Hardware > Device

Create flutter app

flutter create helloworld_app


 flutter create helloworld_app
Creating project helloworld_app...

Running "flutter pub get" in helloworld_app...                   1,944ms
Wrote 78 files.

All done!
To run your application, type:

  $ cd helloworld_app
  $ flutter run

Your application code is in helloworld_app/lib/main.dart.

enter directory helloworld_app and execute flutter run

cd helloworld_app

flutter run

Flutter will launch chrome and show app demo page

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debugging service on Chrome...             24.3s
This app is linked to the debug service: ws://
Debug service listening on ws://

💪 Running with sound null safety 💪

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

Flutter create the app in Mac

Simulate in apple device

Install cocoapods

sudo gem install cocoapods

In the current app project path, execute the following command to open the project by Xcode

cd helloworld_app/

open ios/Runner.xcworkspace

When open Xcode, select the device, and run-button, the runner will trigger and show the simulator.

Flutter create app simulate in xcode

VSCode emulator

  • i Toggle widget inspector. (WidgetsApp.showWidgetInspectorOverr ide)
  • I Toggle oversized image inversion. (debugInvertOversizedImages)
  • p Toggle the display of construction lines. (debugPaintSizeEnabled)
  • o Simulate different operating systems. (defaultTargetPlatform)
  • z Toggle elevation checker.
  • g Run source code generators.
  • P Toggle performance overlay. (WidgetsApp.showPerformanceOverlay)
  • a Toggle timeline events for all widget build methods.

Error handling

Error: The Flutter directory is not a clone of the GitHub project. The flutter tool requires Git in order to operate properly…

Please check all files and folders are moves to the new path.

In Mac, showing the hidden file by this command shift + command + .