Flutter 介绍
1.1、跨平台开发对比
- Web 容器 ：Cordova Ionic
- 泛 Web 容器: React Native
- 自绘引擎：Flutter
自己去了解一下：AOT 和 JIT
方案对比
1.2、Flutter 介绍
Flutter 是 Google 推出并开源的移动应用开发 UI 框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在多个平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。
Flutter 架构分层
Flutter 环境
2.1、环境搭建
参考：
- https://book.flutterchina.club/chapter1/install_flutter.html#_1-3-1-%E5%AE%89%E8%A3%85flutter
- https://doc.flutterchina.club/get-started/install/
2.2、常用命令
- 查询环境配置：flutter doctor
- 获取模拟器：flutter emulators
- 启动模拟器：flutter emulators –launch 模拟器名
- 获取所有真机设备列表：flutter devices
- 运行在所有设备：flutter run -d all
- 运行在指定设备：flutter run -d
- 打包 apk：flutter build apk
- 打包 ipa：flutter build ios
- 打包 exe：flutter build windows
- 打包 pkg：flutter build mac
- 拉取 flutter 项目中的第三方包，不包括 flutter 的 sdk：flutter packages get
- 更新 flutter 项目所有依赖包，不包括 flutter sdk：flutter packages upgrade
- 配置打包信息：flutter config -x
- 查看 flutter sdk 的所有分支：flutter channel
- 切换 sdk 分支：flutter channel stable
- 分析代码：flutter analyze
- 获取 flutter 所有命令: flutter
- 查看命令的帮助信息: flutter help
- 查看 Flutter 版本: flutter –version
| 常用命令 | 说明 |
|---|---|
| –version | 查看 Flutter 版本 |
| -h 或者–help | 打印所有命令行用法信息 |
| analyze | 分析项目的 Dart 代码 |
| build | Flutter 构建命令 |
| channel | 列表或开关 Flutter 通道 |
| clean | 删除构建/目录 |
| config | 配置 Flutter |
| create | 创建一个新的 Flutter 项目 |
| devices | 列出所有连接的设备 |
| doctor | 展示有关安装工具的信息 |
| drive | 为当前项目运行 Flutter 驱动程序测试 |
| format | 格式一个或多个 Dart 文件 |
| fuchsia_reload | 在 Fuchsia 上进行热重载 |
| help | 显示 Flutter 帮助信息 |
| install | 在附加设备上安装 Flutter 应用程序 |
| logs | 显示用于运行 Flutter 应用程序的日志输出 |
| packages | 用于管理 Flutter 包 |
| precache | 填充 Flutter 工具的二进制工件缓存 |
| run | 在附加设备上运行 Flutter 应用程序 |
| screenshot | 从一个连接的设备截图 |
| stop | 停止在附加设备上的 Flutter 应用 |
| test | 对当前项目的 Flutter 单元测试 |
| trace | 开始并停止跟踪运行的 Flutter 应用程序 |
| upgrade | 升级 Flutter 副本 |
Android Studio 开发 Flutter 实用技巧
初次使用 AS 的小伙伴可以看下 Flutter 官方的这篇在 Android Studio 或 IntelliJ 里开发 Flutter 应用
3.1 快捷键
以 Android Studio + Mac 为例：
- 快速创建Widget：在dart文件中输入stf或stl出现提示后按回车即可
- 快速修复：command + .
- 自动生成构造函数：选中 final 参数，快捷键：option + 回车
- 添加父组件、变为子组件、删除子组件：option+回车
- 万能的搜索：双击shift
- 查看最近打开的文件：command + E
- 重命名：fn+shift+f6
- 查看当前类结构：command + fn + f12
- 查看源码：将光标放到要查看源码的类名或方法名上，长按command 然后的点击
- 查看类的子类：选中要查看的类，然后：command + B 或 option + command + B
- 将代码更新到模拟器上：选中模拟器然后 command + R
- 导入类的快捷键：将光标放在要导入类的上面，然后按 option + enter
- 前进后退：当跟踪代码的时候，经常跳转到其他类，后退快捷键：option+command+方向左键，前进快捷键：option+command+方向右键
- 全局搜索：command + shift + F
- 全局替换：command + shift + R
- 查找引用： option + shift + F7以上快捷键是 Android Studio 的 macOS 的 keymap，如果是 Windows 系统，将 command 换成 Ctrl，option 换成 Alt 即可。
更多快捷键可参考：keyboard-shortcuts
3.2 自动补全
通过自动补全功能能够让开发效率提升不少，那么如何使用自动补全功能呢？
可以在 Android Studio 的 Plugin 中搜索Flutter Snippets这个插件然后进行安装：
有了这个插件后，Android Studio 可以帮你自动补全主流 widget 的代码。以下是触发自动补全各种 widget 的缩写：
- stful: 创建一个有状态的 Widget
- stless：创建一个无状态的 Widget
- column：创建一个 Column Widget
- container：创建一个 Container Widget
- row：创建一个 Row Widget
- showDialog：创建一个 AlertDialog
更多自动补全快捷键可查阅：flutter-snippets。
3.3 代码自动格式化
虽然我们可以通过快捷键option(alt)+command(ctrl)+L来在提交代码是格式化，但是这种手动的方式显然不够效率。
可以借助 AS 的保存时代码自动格式化功能来释放我们的双手：
在 Settings > Language & Frameworks > Flutter 中勾选 “Format Code on Save”这个选项：
另外建议勾选Organize imports on save这个选项，它会帮你移除没有使用的导入。
3.4 提取 Flutter 代码
Flutter 最让人头疼的一点是的布局的嵌套，对于复杂的布局如果不进行任何重构的情况下会嵌套的非常深，从而降低代码的可读性不利于后期的维护。
推荐的做法是将复杂的布局提取成一个函数或者一个组件，这里分享一个提取 Flutter 代码的技巧：
选中一个比较复杂的 widget，鼠标右键单击，选择 Refactor > Extract Method ，然后给这个方法取一个名字，AS 可以自动把这块代码抽离出一个Method，并为它添加对于对应的参数：
除此之外，我们还可以借助 AS 来将符合条件的代码块提取成一个 Widget，只需要在 Refactor 中选择 Extract Flutter Widget即可。
