一、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
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
五、运行效果
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