macOS 搭建flutter开发环境

背景：

• 项目里一直在用RN，最近时间比较宽松，试着练手flutter，flutter之所以能受开发者追捧，在于其强大的跨平台能力(据说可以跨五个平台，支持Windows，macOS，iOS，Android，Linux)，相对来说在Android和iOS两个平台上的表现还是比较令人满意的，flutter跟之前的跨平台方案比就是它是自己实现的控件，而不依赖原生控件,而不像RN和Weex是js代码转成原生控件，这样毕竟在桥接阶段会带来一定的性能消耗(当然flutter也提供了调用原生控件的API，实现跟原生控件的互通)。接下来介绍一下怎么在macOS上搭建flutter的开发环境！！！

• 环境搭建步骤：

1. 安装homebrew
   自己电脑之前安装过homebrew，但是更新命令brew update命令报错，最后是删除了homebrew，安装了新的版本
   在终端 执行命令 open /Usr/local 找到Homebrew目录，删除该目录，然后再按照homebrew官网执行安装就好
   
   20190620163202.jpg

2.下载 Flutter SDK
去官网下载稳定版本的最新SDK

image.png

下载下来解压得到一个名称为 flutter 的文件夹

20190620164254.jpg

3.安装flutter，配置环境变量

• 把上一步解压出来的 flutter 文件夹 移动到 根目录 根目录就是当前用户的目录 ;
  查看根目录方法：终端执行 echo ~ 会打印根目录
• 配置变量:
  打开根目录下的隐藏文件 .bash_profile（Finder显示隐藏文件的快捷键 command + shift + .）,把下边的三行 命令粘贴进去，保存文件（可以用命令行打开文件也行）
  再执行一下该文件 source ~/.bash_profile

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xueliheng/flutter/bin:$PATH

4.第四部完成以后flutter就已经安装完成了，

• 验证方法：
  在终端 执行 flutter help,出现下图的内容就 成功了
  

5.安装 Andorid Studio

• 配置安卓的环境变量 ,同配置flutter环境变量一样，把下面四行命令粘贴到之前的 .bash_profile文件

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

6.查看一下flutter需要的配置环境
终端执行 flutter doctor

image.png

每个 ❌ 代表需要配置的一项(我之前安装过Android Studio，所以没提示未安装，直接提示 缺少两个插件)

• 第一个问题就按照提示执行一下
  flutter doctor --android-licenses
• 第二个问题，CocoaPods 安装了 但是 未初始化 ，执行 pod setup

• 第三个问题，先下载 Android studio ，安装完成后（Dart插件同样操作）

  
  
  image.png

image.png

7. 列出的问题一一解决后，就可以运行第一个flutter程序了

   
   
   image.png

接下来就是学习 Dart 语法了！！！希望对想尝试flutter的同学有一丢丢帮助