本节，主要记录基于Mac系统的Flutter的环境搭建。主要根据官网介绍进行搭建工作，搭建过程会有一些坑，而且有时需要采取科学上网的方式。
一. 安装Flutter
1. 更新HomeBrew
- 如果你的电脑
已安装这个工具包，升级它
brew update
- 如果电脑
未安装这个工具包，按照官网指示安装它
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. 下载Flutter
使用
科学上网方式
-
2.1 进入 👉 官网 ，点击
Get started：
image.png
-
2.2 选择对应系统
image.png
-
2.3 下载最新版本压缩包
image.png
PS: 中文网地址为： https://flutter.cn/docs/get-started/install/macos
3. 配置环境变量
- 3.1 配置镜像
Flutter运行需要去官方下载所需资源，没有梯子的伙伴需要镜像服务器，以下是官方文档👉 友情提示：
image.png
- 来到对应的
Shell配置文件进行配置：
- 如果你默认使用
base，配置路径为：~/.bash_profile- 如果使用
zsh，配置路径为：~/.zshrc
-
配置内容：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 3.2 配置环境
在Shell文件中继续配置Flutter运行环境（路径中的xxx为自己的电脑用户名）
export FLUTTER=/Users/xxx/iOSCoreMark/Flutter/flutter/bin
- 3.3 更新配置
使用source命令更新配置：
source .bash_profile
4. 指定运行地址
我们运行Flutter指令，需要先指定运行地址。
-
方法一： 只在
当前命令行窗口生效:
# 指定运行地址(pwd是当前文件夹路径,需要指定你自己flutter文件夹的路径)
export PATH="$PWD/flutter/bin:$PATH"
-
方法二：
永久生效：
参考官方指引(https://flutter.cn/docs/get-started/install/macos#update-your-path)
image.png
-
运行
flutter doctor，检查运行环境
image.png
PS： 第一行
Flutter配置成功即可，下面环境未配置成功，我们可以去不同开发工具中配置。
二、安装Android Studio
- 直接去👉 官网下载最新版本的
Android Studio - 下载后
直接安装即可。
1. 配置安卓环境变量
- 在对应的
Shell配置文件中：
#Flutter (下面“pwd”请使用自己的路径)
export FLUTTER=/Users/pwd/Flutter/flutter/bin
export PATH=FLUTTER:$PATH
#Flutter 镜像设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#安卓 (下面“username”请使用自己的用户名)
export ANDROID_HOME=/Users/username/Library/Android/sdk
#安卓模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#安卓tools路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#安卓平台工具
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
2. 安装Android Studio插件
-
安装完后，运行
flutter doctor会发现缺少Flutter插件：
image.png
-
来到Studio偏好设置，搜索并下载
Flutter和Dart插件：
image.png
-
安装完后，重启
Android Studio，可以看到有Flutter 项目的创建方式了:
image.png
PS: 有一个坑点，如果
Flutter插件已安装，但识别不到正确的android studio路径，是因为Android Studio路径已改变，需要我们手动指定下:flutter config --android-sdk /path/to/android/sdk flutter config --android-studio-dir /path/to/android/studio
- 此时再执行
flutter doctor,会发现都搞定了。
image.png
3. 配置安卓模拟器
-
最新版本的包是
自动配置了一个安卓模拟器，如果没配置，我们可以手动配置一下： -
3.1 打开
AndroidStudio，右上角找到模拟器管理:
image.png
-
3.2 创建设备：
image.png
-
3.3 选择设备：
image.png
-
3.4 选择系统并下载
image.png
三、 Xcode和VSCode
- Xcode在Flutter最新版本中，是
自动配置成功的 - VSCode,我们也只需要在
插件库中手动搜索和安装Flutter插件即可
运行flutter doctor，都是绿勾，就表示配置成功。
image.png
本节仅做一个环境搭建的简单记录，其实官方文档都讲得非常详细了。如果后续需要其他坑点，也会在本节进行补充和记录。
网友评论