Flutter(一)——认识Flutter以及搭建开发环境

什么是Flutter

Flutter是谷歌新推出的一套跨平台的,开源UI框架,同时支持Android与IOS开发,对于以前需要用两种语言分别开发IOS,Android程序与来说,无疑简单了许多。而且Flutter是未来新操作系统Fuchsia的默认开发软件,谷歌目前正在大力推广flutter,可以说是目前比较前沿的开发工具。

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

博主做了一个表格,详细对比了其他技术的优缺点,相信非常直观了,一目了然。

Android Studio搭建Flutter开发环境

(1)首先打开Android Studio,然后选择Setting-plugins,搜索框输入Flutter,然后点击安装,如下图所示:

Flutter1
(2)安装完成之后,重启Android Studio会看到如下界面,点击创建Flutter项目:

创建Flutter项目
(3)我们点击start a new Flutter project后,会发现要我们输入Flutter SDK目录,我们先只安装了Android开发的插件,并没有下载Flutter SDK,所以我们需要选择一个目录,点击后面的install SDK(flutter sdk path后面有下载按钮,这里博主已经点击下载所以消失了,下面显示下载进度):
等待下载
(4)下载完成之后,就可以创建项目了,如图:

创建项目
(5)这样创建并不能运行到手机中,因为你没有配置环境变量,所以我们还需要配置两个环境变量,首先在系统环境变量中添加Android_HOME也就是Android的SDK目录:

Android_sdk
其次,我们需要在系统环境变量的Path中,添加flutter的环境变量:

Flutter_sdk

如果你配置后不知道自己是否成功,可以在CMD中输入如下命令,如果出现下图提示,就表示环境已经搭建完成, 可以运行Flutter到手机上显示了:

doctoer
其实这里的脚本命令非常简单,就是用医生检查以下flutter环境是否搭建成功。这样我们的Android Studio的flutter项目运行环境就搭建完成了,我们可以看看默认创建项目的运行效果,以及它的图标:

运行效果

VSCode搭建Flutter开发环境

除了Android Studio外,如果你一直时前端的开发人员,并且一直使用VSCode,现在想开发手机应用,也可以直接使用VSCode进行开发,它的搭建步骤如下:

(1)打开VSCode选择菜单中的View-Command Palette,会出现一个搜索框,然后输入install,选择Extensions:Install Extension。

Install
(2)点击后,会出现如下界面,然后输入Flutter进行安装

安装
(3)安装完成后,同样通过第一步View-Command Palette搜索Flutter,然后点击Flutter:New Project创建项目进行开发。

创建项目
因为博主后续讲解的都是Android的手机开发,所以后续都以Android Studio开发Flutter为主。

发布了94 篇原创文章 · 获赞 115 · 访问量 75万+

猜你喜欢

转载自blog.csdn.net/liyuanjinglyj/article/details/103346451