Flutter入门一：环境搭建

2021-01-31 本文已影响0人 markhetao

Flutter入门学习大纲

本节，主要记录基于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