7

谷歌发布 Flutter for web,正式宣布 Flutter 成为全平台框架,支持手机、Web、桌面电脑和嵌入式设备。现在学跨平台应用开发,第一个要看的可能不是 React Native,而是 Flutter,来自阮一峰的评价

学习一门开发框架,首先从配置框架的开发环境开始,这篇文章记录了自己在 Mac 电脑上如何搭建 Flutter 开发环境,参考中文文档,也是有坑要踩的。

系统要求

Flutter 支持在 WindowMacOSLinux等操作系统环境下开发 。

安装 Flutter

  1. 系统环境变量配置

Google 提供的服务,国内无法访问的或速度慢的要死,所以下载资源需要翻墙或者官方提供的镜像,Flutter 官方为中国开发者搭建了临时镜像 for china

在 .bash_profile 文件中添加镜像地址 :

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

终端命令:

1、vim ~/.bash_profile
2、将上面的镜像地址添加到该文件中,保存退出。
3、source ~/.bash_profile 添加的地址生效
  1. 下载 Flutter SDK

    Flutter 官网下载地址分为三个不同的版本:

  • Stable channel (稳定版)
  • Dev channel (开发版)

    最新的完全测试过的版本。也包含了新功能,但是也会有一些 " bad " dev builds,可以查看 Bad Builds 列表。

  • Beta channel (测试版)

    每隔几周都会选取近几个月中最好的一个 dev 版本,当作 beta 版,这个版本是通过了Googlecodelabs 测试的。

建议大家选择稳定版进行开发,不过官网下载确实很慢,不过可以参考 Using Flutter in China 方法替换 host ,亲测有效。

- Original URL:
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip

- Mirrored URL:
https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip

也可以到 GitHub 下载最新版 Flutter SDK

  1. 安装Flutter

解压 Flutter SDK 到自定义目录

获取 Flutter SDK 解压缩后 flutter/bin 的完整路径 ,例如我的路径是

/Users/admin/Documents/workspace/flutter/flutter/bin

解释下 Mac 中的 $HOME 是指定当前用户的主目录的环境变量

终端中输入 
echo $HOME
输出
/User/admin

我们需要把 Flutter 命令所在目录添加到系统的 PATH 变量中,方便后续在任何终端直接使用,而不用切换到特定目录。

export PATH=$PATH:$HOME/Documents/workspace/flutter/flutter/bin

同添加镜像地址一样将这个添加到 .bash_profile 文件中 。

设置 Flutter 编译

在终端运行 flutter doctor 命令查看是否需要安装其它依赖项来完成安装,备注 (Dart SDK 已经包含在 Flutter SDK中无须再单独下载安装 )

执行该命令会得到相关工具配置的详细信息:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.0.0, on Mac OS X 10.13.6 17G65, locale zh-Hans-US)
[!] Android toolchain - develop for Android devices (Android SDK 26.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 with Brew:
        brew install ios-deploy
[✓] 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)

! Doctor found issues in 2 categories.

我们只需要关心画 的内容,然后按照提示安装所需的工具配置。

✗ Flutter plugin not installed; this adds Flutter specific functionality.

对于上面的的提示错误 ,如果没用过 Android Studio 来说,可能不知道怎么解决,这里是说 Android Studio 需要安装 Flutter 插件,在 Andriod Studio 的偏好设置里。

直到 flutter doctor 的运行结果都是 [✓] ,编译环境工具配置就 OK 了。

IDE 配置

Flutter 的集成开发环境 IDEAndriod StudioVS CodeIntelliJ等,不过这里我选择了 Andriod Studio ,毕竟 FlutterGoogle 自家的产品,

Andriod Studio 创建 Flutter 工程,不过注意需要在偏好设置指定 Flutter SDK path

接下来创建工程一直选择 next

对于 iOSAndriod 配置 ,其实大部分工作 dector 都跟踪解决了,对与模拟器真机调试 、证书安装等,因为我的电脑 Xcode 之前都配置好,所以一路下来都没有遇到问题,如果你遇到什么问题,欢迎关注公众号:dreamlee,交流学习 ,一起进步。


程序员BANG
27 声望4 粉丝

程序员