以下內(nèi)容為Mac上搭建配置Flutter環(huán)境內(nèi)容。
官方地址請見：https://flutter.io/docs/get-started/install/macos
安裝之前，先將Flutter 與 ReactNative對比
ReactNative
采用Javascript開發(fā)，需學(xué)React，成本高
需要JavaScript橋接器，實(shí)現(xiàn)JS到Native轉(zhuǎn)化，性能耗損
訪問原生UI，頻繁操作易出性能問題
支持線上動態(tài)性，可有效避免頻繁更新版本
Flutter
采用Dart開發(fā),可直接編譯成Native代碼（易學(xué)）
自帶UI組件和渲染器，僅依賴系統(tǒng)提供的Canvas（無橋接耗損）
暫不支持線上動態(tài)性
是不是覺得Flutter很有吸引力呢？
開始動手安裝吧！
1.安裝FlutterSDK
方法一：
根據(jù)參考其他人的文章，我手動下載了Flutter包，解壓縮到一個文件夾下，例如我的路徑是：
/Users/Compass/Library/flutter
接著輸入：
flutter doctor
卻得到下面的錯誤：
Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to set up Flutter, run the following command:
git clone -b beta https://github.com/flutter/flutter.git
意思是說，我需要去Git獲取Flutter.我根據(jù)提示，做了方法二的嘗試。
方法二：
在終端里CD到Flutter目錄，然后從Git上獲取SDK：
Compass-MacBook-Pro:~ Compass$ cd /Users/Compass/Library
Compass-MacBook-Pro:flutter Compass$ git clone https://github.com/flutter/flutter.git
Cloning into 'flutter'...
remote: Enumerating objects: 25, done.
remote: Counting objects: 100% (25/25), done.
remote: Compressing objects: 100% (20/20), done.
此時已經(jīng)獲取到了SDK。
接下來配置環(huán)境：
在根目錄下打開.bash_profile文件：
image.png
打開文件，在后面加入配置：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export FLUTTER=/Users/Compass/Library/flutter/bin
export PATH=$PATH:$FLUTTER
export PATH="/usr/local/opt/libxml2/bin:$PATH"
保存之后，在終端輸入：
source .bash_profile
保存環(huán)境變量配置之后，接著輸入：
flutter doctor
接著如下顯示：
Downloading Dart SDK from Flutter engine 7112b72cc229e05d36716c3d7739885d3ffa72e6...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 49.8M 100 49.8M 0 0 8753k 0 0:00:05 0:00:05 --:--:-- 9195k
Building flutter tool...
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.io ║
║ ║
║ The Flutter tool anonymously reports feature usage statistics and crash ║
║ reports to Google in order to help Google contribute improvements to ║
║ Flutter over time. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://www.google.com/intl/en/policies/privacy/ ║
║ ║
║ Use "flutter config --no-analytics" to disable analytics and crash ║
║ reporting. ║
╚════════════════════════════════════════════════════════════════════════════╝
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure
you trust this source!
Downloading Material fonts... 0.7s
Downloading package sky_engine... 0.3s
Downloading common tools... 0.6s
Downloading darwin-x64 tools... 3.0s
Downloading android-arm-profile/darwin-x64 tools... 0.3s
Downloading android-arm-release/darwin-x64 tools... 0.4s
Downloading android-arm64-profile/darwin-x64 tools... 0.4s
Downloading android-arm64-release/darwin-x64 tools... 0.2s
Downloading android-x86 tools... 2.9s
Downloading android-x64 tools... 1.1s
Downloading android-arm tools... 0.6s
Downloading android-arm-profile tools... 0.4s
Downloading android-arm-release tools... 0.4s
Downloading android-arm64 tools... 0.6s
Downloading android-arm64-profile tools... 0.5s
Downloading android-arm64-release tools... 0.4s
Downloading android-arm-dynamic-profile tools... 0.7s
Downloading android-arm-dynamic-release tools... 0.7s
Downloading android-arm64-dynamic-profile tools... 0.7s
Downloading android-arm64-dynamic-release tools... 0.6s
Downloading ios tools... 3.0s
Downloading ios-profile tools... 3.9s
Downloading ios-release tools... 1.5s
Downloading Gradle Wrapper... 0.2s
已經(jīng)下載了相關(guān)的SDK，并且顯示當(dāng)前的信息：
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel master, v1.1.6-pre.37, on Mac OS X 10.13.6 17G4015, locale
zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 27.0.2)
! Some Android licenses not accepted. To resolve this, run: flutter doctor
--android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
? libimobiledevice and ideviceinstaller are not installed. To install with
Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
? ios-deploy not installed. To install:
brew install ios-deploy
! CocoaPods out of date (1.5.0 is recommended).
CocoaPods is used to retrieve the iOS platform side's plugin code that
responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work
on iOS.
For more info, see https://flutter.io/platform-plugins
To upgrade:
brew upgrade cocoapods
pod setup
[!] Android Studio (version 3.0)
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
有很多問題，一條一條修改，先修改有錯號的：安裝brew
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
根據(jù)提示，在終端輸入以上命令，安裝brew，可是我安裝的時候，出現(xiàn)下面錯誤：
Updating Homebrew...
Error: Xcode alone is not sufficient on High Sierra.
Install the Command Line Tools:
xcode-select --install
電腦上缺XCode工具，所以在終端先輸入xcode-select --install
,如下：
Compass-MacBook-Pro:~ Compass$ xcode-select --install
xcode-select: note: install requested for command line developer tools
Compass-MacBook-Pro:~ Compass$ xcode-select -p
/Applications/Xcode.app/Contents/Developer
安裝之后，再次輸入flutter doctor，查找需要安裝項(xiàng)，再次安裝。
在安裝過程中，如果遇見：Permission denied @ dir_s_mkdir - /usr/local/Frameworks錯誤，則用以下命令解決：
$ sudo mkdir /usr/local/Frameworks
$ sudo chown $(whoami):admin /usr/local/Frameworks
brew更新完畢之后，報錯如下：
[?] Flutter (Channel master, v1.1.6-pre.37, on Mac OS X 10.13.6 17G4015, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 27.0.2)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
! CocoaPods out of date (1.5.0 is recommended).
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your
plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To upgrade:
brew upgrade cocoapods
pod setup
[!] Android Studio (version 3.0)
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
[?] Connected device (1 available)
一個是Android Studio的版本問題，還有是Flutter 和Dart插件問題。
我先升級了Android Studio的版本，升級到了3.2，接著打開Android Studio下載最新的Android SDK，安裝升級完畢之后，重新打開Android Studio，在下面圖的地方：
image.png
點(diǎn)擊Configure->Plugins,在打開的窗口里輸入flutter:
image.png
安裝flutter和Dart。
安裝成功之后就是上面那個圖了。
再次輸入flutter doctor檢查：
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel master, v1.1.6-pre.37, on Mac OS X 10.13.6 17G4015, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
! CocoaPods out of date (1.5.0 is recommended).
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your
plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.io/platform-plugins
To upgrade:
brew upgrade cocoapods
pod setup
[?] Android Studio (version 3.2)
[?] Connected device (1 available)
這樣也可以用了。
2.使用Android Studio運(yùn)行Demo
在打開的AS里，點(diǎn)擊Start a new Flutter Project ：
image.png
在彈出的窗口里填寫對應(yīng)信息。
創(chuàng)建之后，為下面的界面：
AndroidStudio代碼.png
在device之處選擇要部署的設(shè)備，我連接上了Android Pad，和iPhone 手機(jī)，在此處都能看得到。
在main.dart文件里，修改代碼。運(yùn)行之后：
2.1在Android上運(yùn)行
image.png
注意，在運(yùn)行Android設(shè)備的時候，可能會出現(xiàn)無法下載xxx.jar文件，例如：
$ Launching lib\main.dart on emulator-5554 in debug mode...
* Error running Gradle:
Exit code 1 from: E:\project\myflutter\android\gradlew.bat app:properties:
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all files for configuration ':classpath'.
> Could not download kotlin-reflect.jar (org.jetbrains.kotlin:kotlin-reflect:1.1.3-2)
> Could not get resource 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-reflect/1.1.3-2/kotlin-reflect-1.1.3-2.jar'.
> Could not HEAD 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-reflect/1.1.3-2/kotlin-reflect-1.1.3-2.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.100, d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159] failed: Read timed out
> Could not download kotlin-stdlib.jar (org.jetbrains.kotlin:kotlin-stdlib:1.1.3-2)
> Could not get resource 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib/1.1.3-2/kotlin-stdlib-1.1.3-2.jar'.
> Could not HEAD 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib/1.1.3-2/kotlin-stdlib-1.1.3-2.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.100, d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159] failed: Read timed out
> Could not download protobuf-java.jar (com.google.protobuf:protobuf-java:3.0.0)
> Could not get resource 'https://jcenter.bintray.com/com/google/protobuf/protobuf-java/3.0.0/protobuf-java-3.0.0.jar'.
> Could not GET 'https://jcenter.bintray.com/com/google/protobuf/protobuf-java/3.0.0/protobuf-java-3.0.0.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.100, d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159] failed: Read timed out
> Could not download bcpkix-jdk15on.jar (org.bouncycastle:bcpkix-jdk15on:1.56)
> Could not get resource 'https://jcenter.bintray.com/org/bouncycastle/bcpkix-jdk15on/1.56/bcpkix-jdk15on-1.56.jar'.
> Could not HEAD 'https://jcenter.bintray.com/org/bouncycastle/bcpkix-jdk15on/1.56/bcpkix-jdk15on-1.56.jar'.
> Remote host closed connection during handshake
> Could not download bcprov-jdk15on.jar (org.bouncycastle:bcprov-jdk15on:1.56)
> Could not get resource 'https://jcenter.bintray.com/org/bouncycastle/bcprov-jdk15on/1.56/bcprov-jdk15on-1.56.jar'.
> Could not HEAD 'https://jcenter.bintray.com/org/bouncycastle/bcprov-jdk15on/1.56/bcprov-jdk15on-1.56.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159, d29vzk4ow07wi7.cloudfront.net/143.204.132.100] failed: Read timed out
> Could not download fastutil.jar (it.unimi.dsi:fastutil:7.2.0)
> Could not get resource 'https://jcenter.bintray.com/it/unimi/dsi/fastutil/7.2.0/fastutil-7.2.0.jar'.
> Could not HEAD 'https://jcenter.bintray.com/it/unimi/dsi/fastutil/7.2.0/fastutil-7.2.0.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.100, d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159] failed: Read timed out
> Could not download ecj.jar (org.eclipse.jdt.core.compiler:ecj:4.6.1)
> Could not get resource 'https://jcenter.bintray.com/org/eclipse/jdt/core/compiler/ecj/4.6.1/ecj-4.6.1.jar'.
> Could not HEAD 'https://jcenter.bintray.com/org/eclipse/jdt/core/compiler/ecj/4.6.1/ecj-4.6.1.jar'.
> Remote host closed connection during handshake
> Could not download jimfs.jar (com.google.jimfs:jimfs:1.1)
> Could not get resource 'https://jcenter.bintray.com/com/google/jimfs/jimfs/1.1/jimfs-1.1.jar'.
> Could not HEAD 'https://jcenter.bintray.com/com/google/jimfs/jimfs/1.1/jimfs-1.1.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.100, d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159] failed: Read timed out
> Could not download lombok-ast.jar (com.android.tools.external.lombok:lombok-ast:0.2.3)
> Could not get resource 'https://jcenter.bintray.com/com/android/tools/external/lombok/lombok-ast/0.2.3/lombok-ast-0.2.3.jar'.
> Could not HEAD 'https://jcenter.bintray.com/com/android/tools/external/lombok/lombok-ast/0.2.3/lombok-ast-0.2.3.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159, d29vzk4ow07wi7.cloudfront.net/143.204.132.100] failed: Read timed out
> Could not download guava.jar (com.google.guava:guava:22.0)
> Could not get resource 'https://jcenter.bintray.com/com/google/guava/guava/22.0/guava-22.0.jar'.
> Could not HEAD 'https://jcenter.bintray.com/com/google/guava/guava/22.0/guava-22.0.jar'.
> Connect to d29vzk4ow07wi7.cloudfront.net:443 [d29vzk4ow07wi7.cloudfront.net/143.204.132.57, d29vzk4ow07wi7.cloudfront.net/143.204.132.53, d29vzk4ow07wi7.cloudfront.net/143.204.132.159, d29vzk4ow07wi7.cloudfront.net/143.204.132.100] failed: Read timed out
> Could not download antlr4.jar (org.antlr:antlr4:4.5.3)
> Failed to download SHA1 for resource 'https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.jar'.
> Could not GET 'https://jcenter.bintray.com/org/antlr/antlr4/4.5.3/antlr4-4.5.3.jar.sha1'.
> Read timed out
> Could not download juniversalchardet.jar (com.googlecode.juniversalchardet:juniversalchardet:1.0.3)
> Failed to download SHA1 for resource 'https://jcenter.bintray.com/com/googlecode/juniversalchardet/juniversalchardet/1.0.3/juniversalchardet-1.0.3.jar'.
> Could not GET 'https://jcenter.bintray.com/com/googlecode/juniversalchardet/juniversalchardet/1.0.3/juniversalchardet-1.0.3.jar.sha1'.
> Read timed out
> Could not download proguard-base.jar (net.sf.proguard:proguard-base:5.3.3)
> Could not get resource 'https://jcenter.bintray.com/net/sf/proguard/proguard-base/5.3.3/proguard-base-5.3.3.jar'.
> Could not HEAD 'https://jcenter.bintray.com/net/sf/proguard/proguard-base/5.3.3/proguard-base-5.3.3.jar'.
> Read timed out
> Could not download commons-compress.jar (org.apache.commons:commons-compress:1.12)
> Could not get resource 'https://jcenter.bintray.com/org/apache/commons/commons-compress/1.12/commons-compress-1.12.jar'.
> Could not HEAD 'https://jcenter.bintray.com/org/apache/commons/commons-compress/1.12/commons-compress-1.12.jar'.
> Read timed out
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
* Get more help at https://help.gradle.org
BUILD FAILED in 6m 10s
Please review your Gradle project setup in the android/ folder.
Exited (sigterm)
此時，多運(yùn)行幾次，待下載完成之后，就成功了：
Android設(shè)備.png
2.2在iOS真機(jī)上運(yùn)行
在device之處選擇iPhone設(shè)備，手機(jī)上運(yùn)行如下顯示：
iOS設(shè)備.png
工程顯示如下：
image.png
這樣就OK了，可以開啟Flutter之旅了~
