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

 

本文目录

• 什么是Flutter
• Flutter开发优点
• 对比其余技术
• Android Studio搭建Flutter开发环境
• VSCode搭建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，而后点击安装，以下图所示：

(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项目运行环境就搭建完成了，咱们能够看看默认建立项目的运行效果，以及它的图标：

VSCode搭建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为主。