版本信息

这篇文章针对 iOS 开发者, 开启 flutter 之旅.
本次版本:
MacOS Big Sur 11.4
Flutter SDK 2.2.3
Xcode 12.5.1
Android Studio 4.1

本人选择使用 Android Studio 作为开发工具, 毕竟是亲生的, 会有很多便捷之处, 我安装的比较早, 现在可能版本较高, 反而少了一些问题, Android Studio 4.1 的时候, flutter sdk 更新没跟上, 有一个路径问题, 后边会讲到, 现在应该是没有这个问题了.

1 安装 Flutter

1.1 下载 Flutter SDK

1.1.1 进入 Flutter官网

1.1.2 选择 MacOS 系统

1.1.3 选择下载最新版压缩包

1.1.4 解压 SDK 包

下载完成, 就是把解压出来的 flutter 包放到自己常用的命令行工具位置, 这个路径没有要求, 不是中文路径就可以. 我这里安装到了根目录的 opt 下, 即我的 flutter SDK 路径为 /opt/flutter, 后边配置就以这个路径为例, 你们安装的时候换成自己的路径就可以.

opt 是系统的隐藏目录;
command + shift + . 显示/隐藏 隐藏文件.

1.2 配置环境

1.2.1 配置镜像

flutter 运行的时候, 需要去官方下载所需的资源, 那么没有梯子的小伙伴你会需要镜像服务器, 比如我?, 以下是官方文档的友情提示.

来到你对应 shell 的配置文件, 我的是~/.zshrc, 后边以这个为例
如果你默认使用的是 bash, 那么配置 ~/.bash_profile,
如果你默认使用的是 zsh, 那么配置 ~/.zshrc,
在配置文件中添加如下,

# Flutter镜像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

1.2.2 配置 Flutter 环境变量

接下来, 把 Flutter 命令行工具的路径配置一下, 还是在上一步shell对应的配置文件中.

# Flutter 配置
export FLUTTER=/opt/flutter/bin
export PATH=$FLUTTER:$PATH
复制代码

配置完成后, 保存并关闭配置文件, 在终端执行下面的命令, 加载刚才的配置, 使其生效.
如果你是 bash 环境, 就换成 bash 的配置文件即可.

source ~/.zshrc
复制代码

接下来你就可以看看 Flutter 配置是否完成了. Flutter 有一个 doctor 检测命令. 专门用于检测 flutter 环境.

$ flutter doctor
复制代码

打勾的就是 OK 的, 打 x 的就是还没有配置好的.我们最终看到下图就差不多了

2 安装 Android Studio

2.1 安装 Android Studio

我们先安装 Android Studio, 可以到国内官网去下载.

2.2 配置 SDK

首次启动会提醒你安装 SDK, 安装过程不需要梯子, 但是有一个工具是需要我们手动安装的.

注意: 如果没有安装, 到后面 flutter doctor 检测的时候会报许可证错误的问题. 还会提示升级 SDK,

当我们安装好 SDK 之后, 打开 Android Studio

• command + , 进入偏好设置
• 如下图, 手动安装 Android SDK Tools (Obslete) 工具.

2.3 安装 Flutter 的插件

• 接下来我们安装 flutter 插件 和 Dart 插件;

来到 flutter 偏好设置里面, 在Plugins中搜索 flutter 插件, 点击安装, 由于我已经安装过了, 所以显示的是 installed.

在安装过程中会弹出安装 Dart 插件的界面, 也点击 Yes 进行安装.

• 安装完成后, 重启 Android Studio 可以看到这样的界面, 说明插件安装成功.

2.4 解决许可证问题

再次执行 Flutter 的检测 flutter doctor 的时候, 会发现许可证问题! 由于我当时没有截图, 找了一张图过来.

打开终端, 输入下面的命令, 然后按提示, 都输入 y, 回车.

$ flutter doctor --android-licenses
复制代码

2.5 解决 Gradle 卡住问题

那么在首次运行的时候, 你会发现卡在如下的地方了, 原因是Gradle的Maven仓库在国外……然后你就懂了.

Running Gradle task 'assembleDebug'
复制代码

解决它比较简单的操作就是镜像, 配置如下:

2.5.1 修改项目下的 build.gradle 文件

• 文件路径: 项目 -> Android -> build.gradle
• 修改内容: 找到buildscript 和 allprojects, 将里边 google() 和 jcenter() 注释掉, 添加阿里云的镜像.

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
复制代码

2.5.2 修改 flutter 安装目录中的 flutter.gradle 文件

• 文件路径: /opt/flutter/packages/flutter_tools/gradle/flutter.gradle
• 修改内容: buildscript 加入阿里镜像

buildscript {
    repositories {
        //google()
        //jcenter()

	maven { url 'https://maven.aliyun.com/repository/google' }
	maven { url 'https://maven.aliyun.com/repository/jcenter' }
	maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
    }
}
复制代码