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/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
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
output
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ 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: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
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: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup 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: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
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 https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation 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
output
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
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.
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 + .