什么是Flutter
Flutter开发优势
对比其他技术
Android Studio搭建Flutter开发环境
VSCode搭建Flutter开发环境
Flutter是谷歌新推出的一套跨平台的,开源UI框架,同时支持Android与IOS开发,对于以前需要用两种语言分别开发IOS,Android程序与来说,无疑简单了许多。而且Flutter是未来新操作系统Fuchsia的默认开发软件,谷歌目前正在大力推广flutter,可以说是目前比较前沿的开发工具。
(1)跨平台性:真正做了一套代码可以同时在Android和IOS上运行,避免过高的维护成本,节省测试,开发资源。
(2)通过“自绘UI+原生系统”实现高帧率的流畅UI。不使用WebView这种比较老的开发模式,而使用Skia作为2D渲染引擎,使用Dart语言作为运行,以及使用Text作为文字排版引擎。
(3)支持开发过程中的热重载。在开发过程中,只需要保存操作步骤就可以刷新Flutter项目,提高开发效率。
(4)对开发环境要求不高,可以使用Android Studio,也可以使用VSCode。
(5)高性能:直接调用系统的API绘制UI,因此,性能更接近原生。
(6)学习成本低:如果之前学过RN,那么在学习Flutter也会很快就能掌握。如果具有前端或者纯原生开发经验,则学起来也比较省力。
技术类型
UI渲染方式
性能
开发效率
动态化
取值
HTML5+原生
WebView渲染
一般
高
支持
Cordova,Ionic
JavaScript+原生渲染
原生控件渲染
好
RN,Weex
自绘UI+原生
调用系统API渲染
Flutter高,Qt低
默认不支持
Qt,Flutter
博主做了一个表格,详细对比了其他技术的优缺点,相信非常直观了,一目了然。
(1)首先打开Android Studio,然后选择Setting-plugins,搜索框输入Flutter,然后点击安装,如下图所示:
(2)安装完成之后,重启Android Studio会看到如下界面,点击创建Flutter项目:
(3)我们点击start a new Flutter project后,会发现要我们输入Flutter SDK目录,我们先只安装了Android开发的插件,并没有下载Flutter SDK,所以我们需要选择一个目录,点击后面的install SDK(flutter sdk path后面有下载按钮,这里博主已经点击下载所以消失了,下面显示下载进度):
(4)下载完成之后,就可以创建项目了,如图:
(5)这样创建并不能运行到手机中,因为你没有配置环境变量,所以我们还需要配置两个环境变量,首先在系统环境变量中添加Android_HOME也就是Android的SDK目录:
其次,我们需要在系统环境变量的Path中,添加flutter的环境变量:
如果你配置后不知道自己是否成功,可以在CMD中输入如下命令,如果出现下图提示,就表示环境已经搭建完成, 可以运行Flutter到手机上显示了:
其实这里的脚本命令非常简单,就是用医生检查以下flutter环境是否搭建成功。这样我们的Android Studio的flutter项目运行环境就搭建完成了,我们可以看看默认创建项目的运行效果,以及它的图标:
除了Android Studio外,如果你一直时前端的开发人员,并且一直使用VSCode,现在想开发手机应用,也可以直接使用VSCode进行开发,它的搭建步骤如下:
(1)打开VSCode选择菜单中的View-Command Palette,会出现一个搜索框,然后输入install,选择Extensions:Install Extension。
(2)点击后,会出现如下界面,然后输入Flutter进行安装
(3)安装完成后,同样通过第一步View-Command Palette搜索Flutter,然后点击Flutter:New Project创建项目进行开发。
因为博主后续讲解的都是Android的手机开发,所以后续都以Android Studio开发Flutter为主。