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，然后点击安装，如下图所示：

(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为主。