以下内容为Mac上搭建配置Flutter环境内容。
官方地址请见：https://flutter.io/docs/get-started/install/macos

安装之前，先将Flutter 与 ReactNative对比

ReactNative
采用Javascript开发，需学React，成本高
需要JavaScript桥接器，实现JS到Native转化，性能耗损
访问原生UI，频繁操作易出性能问题
支持线上动态性，可有效避免频繁更新版本

Flutter
采用Dart开发,可直接编译成Native代码（易学）
自带UI组件和渲染器，仅依赖系统提供的Canvas（无桥接耗损）
暂不支持线上动态性

是不是觉得Flutter很有吸引力呢？

开始动手安装吧！

1.安装FlutterSDK

方法一：
根据参考其他人的文章，我手动下载了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.我根据提示，做了方法二的尝试。
方法二：
在终端里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.

此时已经获取到了SDK。

接下来配置环境：
在根目录下打开.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

保存环境变量配置之后，接着输入：

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

已经下载了相关的SDK，并且显示当前的信息：

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

根据提示，在终端输入以上命令，安装brew，可是我安装的时候，出现下面错误：

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，查找需要安装项，再次安装。
在安装过程中，如果遇见：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
点击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运行Demo

在打开的AS里，点击Start a new Flutter Project ：

image.png

在弹出的窗口里填写对应信息。
创建之后，为下面的界面：

AndroidStudio代码.png

在device之处选择要部署的设备，我连接上了Android Pad，和iPhone 手机，在此处都能看得到。
在main.dart文件里，修改代码。运行之后：

2.1在Android上运行

image.png

注意，在运行Android设备的时候，可能会出现无法下载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)

此时，还是需要使用科学上网环境（就是需要上google之外的），多运行几次，待下载完成之后，就成功了：

Android设备.png

2.2在iOS真机上运行

在device之处选择iPhone设备，手机上运行如下显示：

iOS设备.png

工程显示如下：

image.png

这样就OK了，可以开启Flutter之旅了~