Mac安装配置Flutter与踩坑

以下内容为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)

此时，多运行几次，待下载完成之后，就成功了：

Android设备.png

2.2在iOS真机上运行

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

iOS设备.png

工程显示如下：

image.png

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

最后编辑于：2020.12.20 11:13:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,968评论 6赞 482
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,601评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 153,220评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,416评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,425评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,144评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,432评论 3赞 401
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,088评论 0赞 261
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,586评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,028评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,137评论 1赞 334
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,783评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,343评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,333评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,559评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,595评论 2赞 355
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,901评论 2赞 345

Mac安装配置Flutter与踩坑

1.安装FlutterSDK

2.使用Android Studio运行Demo

2.1在Android上运行

2.2在iOS真机上运行

推荐阅读更多精彩内容