一、简介
Flutter是Google在2015年推出的移动UI框架,可快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。
Flutter第一次亮相于2015年5月Dart开发者峰会上,初始名字叫做“Sky”,后更名为Flutter,Flutter使用Dart语言开发,Dart是Google于2011年推出的新的计算机编程语言。
其应用广泛,社区活跃,因为可以跨平台试用,开发效率还是可以的。学起来学起来!!!
二、Flutter特点
Flutter特点 | |
---|---|
快速开发 | 由于Flutter选用了Dart作为其开发语言,Dart既可以是AOT(Ahead Of Time)编译,也可以是JIT(Just In Time)编译,其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载,从而大大提升了开发效率。 |
性能有约、不依赖原生 | 使用自带的高性能渲染引擎(Skia)进行自绘,渲染速度和用户体验堪比原生。 |
界面更新逻辑和原生不同,采用增量渲染 | 修改控件属性时,重新穿件一个新的Widget |
富有表现力的精美UI | Flutter内置众多精美的Material Design(组件的实现是同名的谷歌设计语言)和Cupertino(iOS风格)小部件,开发者可快速构建精美的用户界面,以提供更好的用户体验。 |
跨平台 | Windows、macOS、Chrome OS、Linux (iOS、Android、web) |
三、环境搭建(For Mac)
3.1 下载Flutter SDK
3.2 解压SDK包
下载完成后,那么接下来就是安装路径了。
因为Flutter的SDK中包含了很多命令⾏⼯具。我们需要配置环境变量,所以建议你安装到你平时放命令⾏⼯具 程序的地⽅!
cd /Users/wangxuewen/Documents/flutter
unzip ~/Downloads/flutter_macos_v2.5.2+hotfix.4-stable.zip
3.3 配置 Flutter 的 PATH 环境变量
export PATH="$PATH:`pwd`/flutter/bin"
# 验证 flutter 是否可用
flutter
3.4 环境检测
# 查看当前环境是否需要安装其他的依赖
flutter doctor
打钩的就是配置OK了,叹号表示警告(下图提示更新cocoaPods,不影响使用),叉就是没有配置好。
3.5 更新 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开发环境
- 安装 Xcode
- 配置 Xcode command-line tools (可选)
# 安装多个 Xcode,可以通过命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
- Xcode 的许可协议(可选)
# 打开 Xcode,或者通过命令同意许可协议
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
- 配置iOS模拟器
# 运行模拟器
open -a Simulator
Android开发环境
1. 安装Android Studio
2. 配置SDK
根据安装向导,我们需要安装Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools,安装过程无需翻墙。
3. 安装Android Studio的插件
-
来到Studio的偏好设置里面.
4. 配置Android模拟器
根据以下步骤来将 Flutter 应用运行或测试于你的 Android 模拟器上:
- 激活机器上的 VM acceleration 选项。
- 打开 Android Studio,点击 AVD Manager 按钮,选择 Create Virtual Device…
a. 在一些旧的 Android Studio 版本里,需要通过 Android Studio > Tools > Android > AVD Manager,然后选择 Create Virtual Device… 选项。(只有在 Android 项目中才会显示 Android 子选项。)
b. 如果你以及还没打开某个项目,你可以选择 Configure > AVD Manager 然后选择 Create Virtual Device 选项 - 选择相应的设备并选择 Next 选项。
- 选择一个或多个你想要模拟的 Android 版本的系统镜像,然后选择 Next 选项。推荐选择 x86 或者 x86_64 镜像。
- 在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启 硬件加速。
- 确保 AVD 选项配置正确,并选择 Finish 选项。
想要查看上述步骤的更多详细信息,请查看 Managing AVDs 页面。 - 在 Android Virtual Device Manager 中,点击工具栏中的 Run 选项,模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。
Web开发环境
安装 Chrome
五、Flutter常用命令
通过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
常见错误
error 1
Could not build the application for the simulator. Error launching application on iPhone 11
造成该问题是因为升级cocoapods到最新版,按照网上的很多方案都未解决,flutter clean
、清理xcode缓存
、清理flutter缓存文件
...
后面在 github flutter issues 上看到该问题的解决方案: 切换flutter分支到master
flutter channel master
执行 flutter channel
查看当前flutter所处分支(我的flutter处于stable(稳定)
分支),
然后在官网上看到这一句话:
我们强烈建议跟踪Flutter的stable分支,这是Flutter稳定分支。 如果你需要查看最新的变化,你可以跟踪master分支,但注意这是开发分支,所以稳定性要低得多。
要切换分支,请使用flutter channel stable
或 flutter channel master
还有个奇怪的问题,我这边先切换到master
然后再切回stable分支
,fluttter clean
后flutter run
运行正常。不确定是不是切换flutter分支时flutter会检查其环境配置,把一些丢失的文件重新下载配置好。