Flutter系列教程——环境搭建（一）

一、Flutter 介绍

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

Flutter 的主要组成部分包括：

基础库
Skia 2D渲染引擎
定制化设计风格的组件

Flutter 引擎

Flutter 的引擎使用 C++ 开发，通过谷歌的 Skia 图形库提供底层渲染支持，亦提供平台相关的 SDK，例如 Android 和 iOS。

基础库

基础库由 Dart 编写，提供了用 Flutter 构建应用所需的基本的类和函数。

组件

Flutter 是通过组织、创建不同的组件完成用户界面设计的。

定制化设计风格的组件

Flutter 框架包含了两套符合特定设计语言的组件。

Material Design 的组件实现的是同名的谷歌设计语言

Cupertino 的组件模仿了苹果 iOS 的设计。

1.1 系统要求：

名称	说明
编程语言	Dart
操作系统	Windows、macOS、Linux （iOS、Android、web）
官方网站	https://flutter.dev/docs
中文网站	https://flutter.cn/
源代码库	https://github.com/flutter/flutter

二、Flutter准备

2.1 下载 Flutter SDK：

macOS Flutter SDK 版本列表

2.2 解压文件

cd Desktop/GitHub
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.4-stable.zip

2.3 配置 Flutter 的 PATH 环境变量

export PATH="$PATH:`pwd`/flutter/bin"

# 验证 flutter 是否可用
flutter

image-20191016150620834.png

2.4 二进制文件预下载（可选）

# 可以通过下面这个命令预先下载 iOS 和 Android 的开发二进制文件
flutter precache

# 更多 precache 使用方式
flutter help precache

2.5 升级 Flutter 版本

参考链接：https://flutter.cn/docs/development/tools/sdk/upgrading

2.6 环境配置检测

# 查看当前环境是否需要安装其他的依赖
flutter doctor

# 解决报错问题

# 1.同意 Android 许可协议
flutter doctor --android-licenses

# 2.安装 Flutter 插件，支持Flutter开发工作流 (运行、调试、热重载等)
# 3.安装 Dart 插件，提供代码分析 (输入代码时进行验证、代码补全等)
# 注意：（Flutter 会附带安装 Dart SDK，不需要再对 Dart 单独安装）
打开 Android Studio、IDEA、VSCode 安装 Flutter 插件

2.7 更新 PATH 环境变量（全局配置）

出现： flutter: command not found 问题

原因：设置环境变量的时候，直接在命令行通过 export 命令进行的，并没有全局设置，需要做如下修改。

# 将flutter/bin添加到.bash_profile或.zshrc文件中
export PATH="$PATH:[替换为FlutterSDK保存的路径]/flutter/bin"

# 修改.bash_profile文件，并更新环境变量 (适用于： Linux、macOS Mojave 之前的系统)
open -e $HOME/.bash_profile
source $HOME/.bash_profile

# 修改.zshrc文件，并更新环境变量 (适用于：macOS Catalina)
open -e $HOME/.zshrc
source $HOME/.zshrc

三、平台配置

macOS 可以开发 iOS、Android 和 Web（技术预览版正式发布）三个平台的 Flutter 应用。

iOS 开发环境

1. 安装 Xcode

2. 配置 Xcode command-line tools (可选)

# 安装多个 Xcode，可以通过命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

3. Xcode 的许可协议（可选）

# 打开 Xcode，或者通过命令同意许可协议
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

4. 配置 iOS 模拟器

# 运行模拟器
open -a Simulator

Android 开发环境

1. 安装 Android Studio

2. 配置 Android 模拟器

激活机器上的 VM acceleration 选项。
启动 Android Studio > Tools > Android > AVD Manager，然后选择 Create Virtual Device 选项。（只有在 Android 项目中才会显示 Android 子选项。）
选择相应的设备并选择 Next 选项。
选择一个或多个你想要模拟的 Android 版本的系统镜像，然后选择 Next 选项。推荐选择 x86 或者 x86_64 镜像。
在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启硬件加速。
确保 AVD 选项配置正确，并选择 Finish 选项。想要查看上述步骤的更多详细信息，请查看 Managing AVDs 页面。
在 Android Virtual Device Manager 中，点击工具栏中的 Run 选项，模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。

Web 开发环境

1. 安装 Chrome

四、Flutter 常用命令

1. 通过 `flutter --help` 查看 Flutter 常用命令

常用命令:
  flutter create <output directory> 创建项目
  flutter run [options]             运行项目
  
使用: flutter <command> [arguments]

全局选项:
-h, --help                  打印帮助信息
-v, --verbose               动态日志

-d, --device-id             目标设备 ID 或名称
    --version               查看命令版本
    --suppress-analytics    禁止分析报告
    --bug-report            提交 bug

可用的命令:
  analyze          分析 dart 代码
  attach           附加应用到连接中的设备
  build            构建应用
  channel          列出或者切换通道
  clean            删除 build/ 文件夹
  config           配置 flutter
  create           创建项目
  devices          列出已连接的设备
  doctor           检查 flutter 信息
  drive            Runs Flutter Driver tests for the current project.
  emulators        列出可用的设备
  format           格式化 Dart 文件
  fuchsia_reload   热加载
  help             显示帮助信息
  install          在连接的设备中安装 app
  logs             显示正在运行的应用的日志
  packages         包
  precache         Populates the Flutter tool's cache of binary artifacts.
  run              运行应用
  screenshot       为应用截图
  stop             停止运行
  test             Run Flutter unit tests for the current project.
  trace            Start and stop tracing for a running Flutter app.
  upgrade          更新 flutter

五、运行效果

1. 创建 Flutter 应用

# 创建新的 Flutter 应用
cd Desktop/GitHub
flutter create my_app

2. 启动 Flutter 应用

# 切换目录
cd Desktop/GitHub/my_app

# 注意：首先要启动模拟器 (iOS 或 Android)

# 可用模拟器设备列表
flutter devices

# 运行 Flutter 应用
flutter run -d 设备ID或名称

3. iOS、Android 运行效果

问题汇总

Q1. Got socket error trying to find package cupertino_icons at https://pub.dartlang.org.

# 修改flutter所需资源的访问方式
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Q2. Waiting for another flutter command to release the startup lock...

# 删除flutter lockfile文件重新启动
rm Desktop/GitHub/flutter/bin/cache/lockfile