Flutter系列教程——环境搭建（一）
2019-10-16 本文已影响0人
LuisX
一、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：
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
