frc d4a181f519b9ef94e0811dcca6a36b8a - Flutter:Mac下Flutter开发环境集成
Flutter

Flutter 是为了跨平台而生的,所以为了验证在iOS和Android 的运行情况,必须先在mac 上配置好 iOS 的开发环境 Xcode 和 Android 的开发环境 Android Studio。这里我就不在展开写 Xcode 和 Android Studio 的安装配置过程了,这算是开发Flutter 的前提条件吧。另外,我个人更喜欢IntelliJ IDEA 的Flutter 开发环境,所以,将IDEA 的配置Flutter方法放在最后。

下载flutter

https://flutter.io/setup-macos/

frc b68feb303a7047d565c4c2960c4d9157 - Flutter:Mac下Flutter开发环境集成
屏幕快照 2019-05-26 下午4.41.00.png

配置环境变量

先把刚才下载的flutter放到你想安装的目录下。配置环境变量,命令行:

vim ~/.bash_profile
frc 4572b706d8982a680074b2f7d6f61d1f - Flutter:Mac下Flutter开发环境集成
屏幕快照 2019-05-26 下午4.54.43.png

保存完毕之后运行命令:

source ~/.bash_profile

检查环境

flutter doctor
frc 97ca603d6867b8c582d838451b129755 - Flutter:Mac下Flutter开发环境集成
屏幕快照 2019-05-26 下午5.03.53.png

按照检测结果的说明,如果有[!] ✗ 标志,表示本行检测不通过,需要做一些设置或者安装一些软件。

Android Studio安装配置

安装:
https://developer.android.com/studio/index.html
或者http://www.android-studio.org
配置:
Android Studio的配置非常简单:

  • 打开Android Studio -> Preference > Plugins
  • 在搜索框中搜索 Flutter
  • 本地没有, 就联网查找,搜索到Flutter, 点击安装即可
  • Dart环境他自动会安装好

IntelliJ IDEA 配置 Flutter

  • 打开IntelliJ IDEA -> Preference > Plugins
  • 在搜索框中搜索 Flutter
  • 搜索到Flutter, 点击安装即可
  • Dart环境他自动会安装好

    frc b97132098606e5d80cdc6bd825420e29 - Flutter:Mac下Flutter开发环境集成
    屏幕快照 2019-05-26 下午5.17.02.png

    这样,IntelliJ IDEA 的 Flutter 开发环境就配置好了,接下来需要额外安装配置Dart语言的开发环境。

Mac安装Dart的SDK

flutter是基于Dart语言开发的,所以我们需要额外安装配置Dart语言的开发环境。
使用brew(Homebrew)安装Dart:
终端 依次执行

brew tap dart-lang/dart
brew install dart

查看相关信息

brew info dart

在安装Dart的SDK过程中,提示Xcode版本过低(只要不是最新版本,貌似就会提示版本过低),由于更新Xcode10.2还需要更新mac系统,耗时费力。于是安装了Android Studio,安装Flutter插件,一路下来比较顺利,创建了第一个flutter工程:

frc 719e94a2c39160cb4cd1ad1ac72c93b6 - Flutter:Mac下Flutter开发环境集成
屏幕快照 2019-05-27 上午10.25.14.png

运行效果:

frc c307e9eebcf6b33b614f87dbfd7ac431 - Flutter:Mac下Flutter开发环境集成
WechatIMG224.jpeg

Android Studio体验还可以,flutter运行到iPhone的体验也还可以,个人感觉要比RN稍微好一点,考虑到Android、Flutter、Google之间的关系,也就很好解释了,,😄。IntelliJ IDEA开发Flutter工程的相关配置后续更新,由于平时写Java工程还是主要用idea,还是更倾向于使用IntelliJ IDEA,避免安装多个开发工具。

其实安装完Android Studio,配置Flutter插件,Dart SDK也已经安装好了,在IntelliJ IDEA设置好Flutter SDK路径,就可以一路走通Flutter工程:

frc 6b1da5344fd7f8aa96e7ef53fce1391c - Flutter:Mac下Flutter开发环境集成
屏幕快照 2019-05-27 上午10.49.06.png
frc e8fe009edb2cfc90d951532059be8310 - Flutter:Mac下Flutter开发环境集成
屏幕快照 2019-05-27 上午11.00.52.png

我花了 8 小时,”掌握”了一下 Flutter | Flutter 中文站上线
flutter环境配置详解MAC版
https://www.jianshu.com/p/eb782589be82

Flutter:Mac下Flutter开发环境集成