Flutter 环境配置 for Mac

Andy_GF
4,372 阅读4分钟

版本信息 (很重要)

  • Flutter 要用最新 stable 版本, 一定要保证 Android Studio 2020.3.1 及以上版本
  • Flutter 要用最新 stable 版本, 一定要保证 Android Studio 2020.3.1 及以上版本
  • Flutter 要用最新 stable 版本, 一定要保证 Android Studio 2020.3.1 及以上版本

这篇文章针对 iOS 开发者, 开启 flutter 之旅.
本次版本:
MacOS Big Sur 11.5.1 (x8_64)
Flutter SDK stable 2.5.1
Android Studio 2020.3.1
java 的 JDK 版本 8.1 (Android Studio 需要)
Xcode 12.5.1 ,(包含 cocoapods, 这是必须安装的, flutter 要用到)

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

如果需要安装 Homebrew 的同学可以看 macOS上安装Homebrew国内源

1 安装 Flutter

1.1 下载 Flutter SDK

1.1.1 进入 Flutter官网

image.png

1.1.2 选择 MacOS 系统

image.png

1.1.3 选择下载最新版压缩包

image.png

1.1.4 解压 SDK 包

下载完成, 把解压出来的 flutter 包放到根目录的 opt 下, 即我的 flutter SDK 路径为 /opt/flutter, 后边配置就以这个路径为例, 你们安装的时候换成自己的路径就可以.

/opt 权限问题
根目录的 /opt 有权限问题, 不能用 flutter 命令升级, 所以升级时就需要删除原来的, 重新下载安装, 如果不想这样做, 可以在根目录自定义一个目录, 这样就没有权限问题了.

注意: 最好不要放到家目录下, 因为在项目中有 SDK 的绝对路径, 如果是多人开发的时候, 如果各自的路径不同, 肯定会给我们带来一定的麻烦.

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

1.2 配置环境

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

image.png

1.2.0 查看 Shell 默认环境

查看 Shell 默认环境的命令

$ echo $SHELL

image.png

来到你对应 shell 的配置文件, 我的是~/.zshrc, 后边以这个为例
如果你默认使用的是 bash, 那么配置 ~/.bash_profile,
如果你默认使用的是 zsh, 那么配置 ~/.zshrc,
这两个是系统默认的, 如果你有自己单独的文件, 那就按你自己的来, 能自己创建新的, 说明比较了解这块内容, 也不用多说了.

1.2.1 配置镜像

在配置文件中添加如下

# 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 的就是还没有配置好的.我们最终看到下图就差不多了

image.png

2 安装 Android Studio

2.1 安装 Android Studio

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

image.png

2.2 配置 SDK

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

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

当我们安装好 SDK 之后, 打开 Android Studio, command + , 进入偏好设置

2.2.1 安装工具包

  • 如下图, 手动安装 Android SDK Tools (Obslete) 和 Android SDK Command-line Tools 工具包, 打上对勾后, 左边会出来下载按钮, 点击下载按钮完成下载安装, 最近点击Apply.

image.png

2.2.2 特别更新提醒:

2.2.2.1 Android SDK not found at this location. 错误

根据这位小伙伴的反馈, 他的 Flutter SDK stable 2.5.2 版本出现 Android SDK not found at this location. 的错误, 他的电脑用户名为 test, 错误截图如下

image.png

解决方案是找到 Android Studio 中的路径, 将 SDK 路径配置到 flutter 就可以了, 然后再执行解决许可证的问题步骤.

flutter config --android-sdk /Users/ios/Library/Android/sdk
  • 查找 SDK 路径的位置 image.png

2.3 安装 Flutter 的插件

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

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

image.png

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

image.png

2.4 解决许可证问题

再次执行 Flutter 的检测 flutter doctor 的时候, 会发现许可证问题!.

image.png

打开终端, 输入下面的命令, 然后按提示, 都输入 y, 回车, 直到最后出现 All SDK package licenses accepted.

$ flutter doctor --android-licenses

image.png

再次执行 Flutter 的检测 flutter doctor, 发现所有的配置能通过了, 是不是很开心呀, 但是还有一些小问题需要我们解决, 请继续往下看.

image.png

2.5 解决 Gradle 卡住问题

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

Running Gradle task 'assembleDebug'

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

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

  • 文件路径: 项目 -> Android -> build.gradle

  • 修改内容: 找到buildscript 和 allprojects, 将里边 google() 和 jcenter()(新版本是 mavenCentral()) 注释掉, 添加阿里云的镜像.

    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' }

    image.png

  • 新版本 9C38D932-1246-4E24-B16D-875A50B2E3F4.png

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'
    }
}
  • 最新版本这样的
buildscript {
    repositories {
        //google()
        //mavenCentral()
        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'
    }
}

2.6 解决 Unable to find bundled Java version

如果你在安装或者升级过程中遇到 Unable to find bundled Java version 的问题, 首先要检查你的 Mac 是否已经安装了 java 环境, 如果没有请先安装, 如果已经安装了, 还报如下错误, 很大可能是 Android Studio 和 flutter 版本不匹配问题. 请参考我的另一篇文章来解决.

avatar
文章
阅读
粉丝
相关推荐
MaterialApp 详解：Flutter 应用的全局配置与主题管理
1.3k阅读
 · 
3点赞
Dio 3.0发布，支持Flutter Web 和 Http/2.0
13k阅读
 · 
84点赞
Android与Flutter混合开发
4.6k阅读
 · 
13点赞
用 Flutter 来实现一款简单音乐播放器
331阅读
 · 
2点赞
flutter:styled_widget组件源码查看01
228阅读
 · 
0点赞
Flutter - 我给官方提PR，解决run命令卡住问题 😃
3.2k阅读
 · 
43点赞
【Flutter 1-4】Windows下VSCode配置Flutter开发环境
1.1k阅读
 · 
1点赞
Flutter 状态管理
2.1k阅读
 · 
7点赞
MacOS Flutter环境配置和安装
8.9k阅读
 · 
42点赞

友情链接：