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
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/flutter_macos_xxx-stable.zip mv flutter ~/Development export PATH=~/Development/flutter/bin:$PATH
We need to set up a flutter path to .bash_profile
and path following the export path
source .bash_profile let .bash_profile change work.
Use following command to update flutter
flutter docker to install the plugin
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://127.0.0.1:51165/RdUgCkjcXMA=/ws Debug service listening on ws://127.0.0.1:51165/RdUgCkjcXMA=/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".
Simulate in apple device
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.
- 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: 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 + .