Flutter--macOS安装与配置

叛逆点起一根烟
4,901 阅读4分钟

Flutter 英文网以及Flutter 中文网上解释了Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。本文带着大家一起走上探索Flutter安装配置之路

开始之前说明一下我用的是Oh My Zsh的iTerm终端,如过有兴趣可以参考我另一篇文章-->MacOS必备效率神器--Go2Shell+iTerm2+Oh My Zsh

1、Flutter 安装

这一步你也可以和我一样直接参考Flutter 中文网安装说明

  • 下载 目前Flutter SDK的release获取方式只能在官网下载。 在页面上找到下图位置点击直接下载

    download.png

  • 安装

安装之前因为flutter相关插件需要Homebrew,建议先更新一下，如果你没有Homebrew 可以参考我另一篇macOS之Homebrew安装与使用

$ brew update

更新后直接通过终端把刚才下载的Flutter解压到你觉得合适的位置，建议安装到/opt这个可选安装包目录下方便管理

$ sudo unzip -d /opt/ 刚下载zip路径
  • Flutter环境配置

前面说了我用的是zsh所以的配置写入~/.zshrc 你如果用的是base那就配置写入~/.bash_profile

1、配置镜像

Flutter官网中说了在中国需要有镜像才能方便使用,所以加上下面配置

# flutter 镜像
export PUB_FLUTTER_URL=https://pub.flutter-io.cn
export STORAGE_FLUTTER_URL=https://storage.flutter-io.cn
2、环境变量

/opt/flutter/即刚才解压flutter 的路径，bin是命令行所在的目录

#Flutter 配置
export PATH=/opt/flutter/bin:$PATH
3、生效配置

配置写入后需要更新source才能生效

$ source .zshrc
4、 验证配置

由于我放在根目录下，所以需要加上sudo,配置成功就会出现下列内容

$ sudo flutter doctor
Password:
......
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.15.1 19B88, locale
    zh-Hans-CN)
......

注意！

如果是 10.15 或则更高系统可能会出现

idevice_id.png
这是时候，千万不要点移到废纸篓，不然flutter就废掉了，得重来了，解决方案是找到 idevice_id 文件所在目录下(/opt/flutter/bin/cache/artifacts/libimobiledevice/)相关可执行文件参考我另一篇macOS 打开软件显示已损坏或无法验证此App不包含恶意软件执行下面,然后在执行上面第四步就不会在出现了

$ sudo xattr -r -d com.apple.quarantine /opt/flutter/bin/cache/artifacts/libimobiledevice/idevice_id
$ sudo xattr -r -d com.apple.quarantine /opt/flutter/bin/cache/artifacts/libimobiledevice/idevicename
$ sudo xattr -r -d com.apple.quarantine /opt/flutter/bin/cache/artifacts/libimobiledevice/idevicescreenshot
$ sudo xattr -r -d com.apple.quarantine /opt/flutter/bin/cache/artifacts/libimobiledevice/idevicesyslog
$ sudo xattr -r -d com.apple.quarantine /opt/flutter/bin/cache/artifacts/libimobiledevice/ideviceinfo

以上Flutter就初步完成了，但是要完全配置好还需要根据flutter doctor输出的内容进入软件的安装和插件的配置

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.15.1 19B88, locale
    zh-Hans-CN)
.....

这里你会看到一些[✗],我们根据实际情况把存在[✗]的软件或依赖安装上，因为我只想弄手机客户端，所以只需要把Android和Xcode根据相关的错误提示进行操作就行，当你安装了任一缺失部分的依赖后，可以再次运行 flutter doctor 命令来确认是否成功安装。也就是是否会出现[✓]

安卓

[✗] 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/setup/#android-setup for detailed
      instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

Android.png

安装打开初始化后再次验证

$ sudo flutter doctor
......
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
.....

根据提示执行中间需要输入确认的地方输入y

$ sudo flutter doctor --android-licenses
.......
Review licenses that have not been accepted (y/N)?
.......
Accept? (y/N):y
......
All SDK package licenses accepted

然后继续验证

$ sudo flutter doctor
....
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
....
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

错误说明：Android Studio 没有安装Flutter插件问题 安装下图步骤安装即可

plugins.png
当跳出安装Dart插件的界面时，也点击Yes进行安装。安装完成后重启Android Studio就可以看到可以新建flutter工程了
Android flutter.png
然后继续验证

$ sudo flutter doctor
......
[✓] Android Studio (version 3.5)
......

ok,安卓配置完毕

Xcode

[!] Xcode - develop for iOS and macOS (Xcode 11.2)
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with
        is different from the one being used to invoke it.
        This can usually be fixed by re-installing CocoaPods. For more info, see
        https://github.com/flutter/flutter/issues/14293.
      To re-install CocoaPods, run:
        sudo gem install cocoapods

错误说明：由于我是 iOS 开发者，所以我的验证提示 xcode 前面是[!] ，说明存在问题需要解决 1、如果提示 Xcode没有安装，如果你没有Xcode直接在mac的appstore中搜索下载即可

xcode.png

2、如果提示没有安装CocoaPods,关于如何安装 CocoaPods可以参考我另一篇Cocoapods的安装与使用

3、flutter验证告诉我CocoaPods installed but not working.就是我安装了CocoaPods但是无法使用，并且提示我执行sudo gem install cocoapods命令，但我是iOS 开发者怎么可能会装一个不能用的CocoaPods，那我开发怎么安装第三方 sdk，那不是开玩笑嘛，那既然报了这个问题，就要去解决它。经过多种尝试，

  • 怀疑是 flutter版本问题，下过旧版本flutter安装，然而无效。
  • 怀疑是cocoapods版本问题，安装旧版本cocoapods安装，依然无效。
  • 怀疑是flutter目录的权限问题，加上权限，问题终于得到了解决

解决如下：xxxx是当前用户, /opt/flutter是flutter所在目录,赋值权限后在用flutter就不再需要在加sudo了

$ whoami
xxxx
$ sudo chown -R xxxx /opt/flutter

验证结果

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
......
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
......

ok,Xcode 配置完毕了

Device

$ flutter doctor
.....
[!] Connected device
    ! No devices available
.....

错误说明：没有可用的设备连接，打开 Xcode模拟器或者 Android模拟器，或者手机连接电脑即可 可通过终端直接打开xcode模拟器

$ open -a Simulator

打开后再验证

$ flutter doctor
......
[✓] Connected device (1 available)
......

ps:个人觉得Xcode模拟器比Android模拟器界面看着舒服，所以之后再开发过程中我都是直接用Xcode模拟器，如果你喜欢Android模拟器自行打开Android Studio安装即可

ok,以上就是Flutter的安装与配置所有内容了

avatar
文章
阅读
粉丝