什么是Flutter
Flutter是Google旗下一款全新的跨平台UI开发框架,开发者可以通过同一套代码即可高效构建跨平台的应用,支持移动端、web端、桌面端,该项目是开源并免费的。
从2017年5月份发布alpha版本以来,在Google的强力推动下,目前该项目已在Github上的star数量超过了94000
越来越多的开发者(包括Android、IOS、前端)青睐于学习这一项新的技术,而各互联网大厂也在Flutter实践中推出了自己的应用
如阿里的闲鱼、美团、微信小程序等等。目前看来,Goolgle野心不小,Flutter大有一统前端的趋势。
![1ede02120ddb01f146fc1d6cef4dad0b.png](https://i-blog.csdnimg.cn/blog_migrate/55fdfec2ae96f88c5766f215662b2545.jpeg)
Flutter在各大平台底层都是基于同一套硬件加速2D图像库Skia,能够保证在不同平台、不同设备之间的体验。
目前来说,Flutter开发的App性能与Native App的性能差异不大。
上层采用Dart语言(Google于2011年发布的计算机编程语言),所以Flutter开发学习有一定成本,作为开发者必须要掌握Dart语言。
而作为测试工程师,面对Flutter的来势汹汹,了解Flutter以及如何对Flutter应用做自动化测试也是我们需要掌握的技能。
构建第一个简单的Flutter应用
工欲善其事必先利其器,了解一个应用的开发过程,自己搭建环境构建应用是最佳实践方式
Flutter支持在不同的操作系统搭建开发环境,包括windows、macOS、Linux。
但是要注意如果是在windows、Linux只能支持Android端应用,macOS即可支持Android也可以支持IOS。
官方文档地址:https://flutter.dev/docs
这里以Windows为例:
官方对系统要求
- 操作系统:Win7或之后的版本(64位)
- 磁盘控件:400MB+
- 依赖工具
- Git for Windows(Git命令行工具,确保安装及配置好Git环境变量)
Step1:设置镜像地址
国内访问Flutter网络受限,我们可以通过设置镜像,在系统环境变量中添加如下两个:
- PUB_HOSTED_URL=https://pub.flutter-io.cn
- FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Step2:配置开发环境
官方推荐使用Android Studio作为IDE编辑器,但是Intellij IDEA也是可以支持的,这里以Intellij为例
1、安装JDK
2、下载Android SDK,配置环境变量
3、在Intellij 中进入到插件下载页面(File->Settings->Plugins),下载对应插件
- Flutter插件:支持Flutter开发(运行、调试、热重载)
- Dart插件:提供代码编辑(代码提示、自动补全功能)
![44c90235634f259e8456123d57647621.png](https://i-blog.csdnimg.cn/blog_migrate/65bf8002c775e40f7594870bec2668c6.png)
Step3:安装Flutter SDK
1、从官网下载最新的SDK包:
https://flutter.io/sdk-archive/#windows
2、将SDK包解压到任意盘路径(注意:不要放到 C:Program Files 这种要求高权限的路径)
3、设置环境变量,将flutter下的bin目录完整路径复制粘贴到Path中
4、最后运行flutter doctor检测环境,保证全部项检测通过
![44814ad521c54367c3c49de9aae06f3a.png](https://i-blog.csdnimg.cn/blog_migrate/2051efa6d1d1c739cbeb81a43ec3cf07.png)
Step4:构建第一个Flutter Demo
1、File->Project新建项目,选择Flutter
2、项目命名
3、选择SDK->对应Flutter SDK目录
![62d224943a7c8959cd5e508307b0240b.png](https://i-blog.csdnimg.cn/blog_migrate/5b42a3168227a8aaddf91ef14482d016.jpeg)
工程目录功能说明:
![bf8da40a30ad16de386021f0dab5369a.png](https://i-blog.csdnimg.cn/blog_migrate/88e00b5a6cc1986b6da58b2ff21cce85.jpeg)
点击构建执行,即可在设备上看到demo App的效果
![5dedab6bce0d48c8ad489048a40e60d5.png](https://i-blog.csdnimg.cn/blog_migrate/2b8103beb0d210bc0dfd7194c8bf88c3.png)
关于Flutter的体验我们暂时就到这里,下篇给大家介绍通过Flutter Driver实现Flutter应用自动化测试。
说明:本文为柠檬班歪歪老师原创