Flutter简介

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。 Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前Flutter已推出稳定的2.5版本。

Flutter Mac环境搭建

下载Flutter SDK

• 进入Flutter官网

image.png

• 选择 MacOS 系统

image.png

• 下载最新版压缩包

image.png

• 解压SDK包

下载完成，把解压出来的flutter包放到根目录下即~/flutter。因为Flutter的SDK中包含了很多命令行工具，我们需要配置环境变量，所以建议安装到平时放命令行工具的地方，推荐放在根目录~/flutter(仅供参考)

配置环境变量

flutter运行的时候，需要去官方下载所需的资源，那么没有梯子的小伙伴就需要镜像服务器。

image.png

• 查看Shell默认环境

$ echo $SHELL
/bin/bash

来到你对应Shell的配置文件进行配置
如果你默认使用的是bash，那么配置~/.bash_profile
如果你默认使用的是zsh，那么配置~/.zshrc,

• 配置镜像
  在配置文件~/.bash_profile中添加如下

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

• 配置Flutter环境变量
  接下来把Flutter命令行工具的路径配置一下，还是shell对应的配置文件中。

#Flutter 配置
export FLUTTER=～/flutter
export PATH=$FLUTTER/bin:$PATH

• 终端执行下面命令，载入配置

#bash .bash_profile 
// 如果你是zsh环境，就配置zsh文件。执行$ source ~/.zshrc
$ source ~/.bash_profile

• 查看Flutter是否配置完成。Flutter有一个doctor检测命令，用于检测 flutter环境。

$ flutter doctor

image.png

安装 Android Studio

• 下载并安装 Android Studio
• 配置SDK
  手动安装Android SDK Tools (Obslete)和Android SDK Command-line Tools工具包，下载安装。Android Studio -> 偏好设置

image.png

• 安装Android Studio插件
  Android Studio -> 偏好设置 -> 安装flutter插件和Dart插件

image.png

• 创建Flutter工程

image.png

Flutter环境变量介绍

上面我们在搭建环境的时候，配置了环境变量。那什么是环境变量？

• 环境变量就是让shell能够找到工具，比如上面配置的export FLUTTER=～/flutter，就是让shell找到flutter sdk
• shell就是操作系统
• Mac电脑的shell类型：bash、zsh(更强)
• 不同的shell有不同的配置文件，bash的配置文件目录~/.bash_profile，Linux系统中文件名称前面有个.表示该文件是隐藏文件

flutter的命令行工具目录 ～/flutter/bin/flutter，下面进行证明？

$ which flutter
/Users/wn/flutter/bin/flutter

flutter命令行工具是shell在调用，而Android Studio开发工具在创建flutter项目的时候，需要配置flutter sdk路径，编写了.dart代码，并且把MaterialApp显示出来，是Android Studio在调用flutter命令行工具。

配置环境变量推荐使用终端命令，因为记事本会有中文符号，防止一些符号配置错误，又不容易排查

// 使用vi命令进行配置
$ vi ~/.bash_profile

// 主要用来配置PATH路径  
// $PATH表示把前面路径读进去  $表示展开PATH变量
// 不同的命令可以使用 : 隔开，比如 export PATH=$FLUTTER/bin:$PATH:$PATH1 
export FLUTTER=/Users/wn/flutter
export PATH=$FLUTTER/bin:$PATH

$ fluttera  //表示配置的环境变量中没有找到 fluttera 指令
-bash: fluttera: command not found

注意！！！

• 如果有的电脑是由原来的bash切换到zsh，需要在~/.bash_profile、~/.zshrc都配置环境变量
• 也可以在~/.zshrc中配置source ~/.bash_profile，加载出bash中配置过的环境变量

遇到问题

• 问题一：解决许可证问题

image.png

解决办法：打开终端输入下面的命令，按提示都输入y，回车直到最后出现 All SDK package licenses accepted

$ flutter doctor --android-licenses

image.png