(1)、Study Flutter认识和环境搭建

Flutter认识

Flutter(官方网站)是Google开发的一个款跨平台应用框架，首次亮相是在2017年Google I/O大会上推出，目前已经推出了稳定版1.0.0。Flutter采用用了Google的Dart语言，之所以采用这门语言，说的是Dart开发团队就在隔壁！至于这门语言的优劣性是一个仁者见仁智者见智的问题，就不过多讨论了！Flutter采用的是自绘UI+原生调用系统API进行渲染的技术类型，因此它的性能表现还是很不错的。在Flutter中一切皆是Widget。

Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎，值得一提的是，由于Android系统已经内置了Skia，所以Flutter在打包APK(Android应用安装包)时，不需要再将Skia打入APK中，但iOS系统并未内置Skia，所以构建iPA时，也必须将Skia一起打包，这也是为什么Flutter APP的Android安装包比iOS安装包小的主要原因。

Flutter框架结构

image

Flutter Framework层

• Material: Android平台的UI设计规范
• Cupertino：iOS平台的UI设计规范
• Widgets：组件，Flutter中一切皆是Widget
• Rendering：渲染
• Animation：动画
• Painting：绘制
• Gestures：手势
• Foundation：基础库

Engine层（C++实现）

• Skia：2D图形处理函数库
• Dart：Dart语言引擎
• Text：文字排版引擎

环境搭建

笔者环境

• win10 64bit
• 16G
• CPU E3-1231 v3

下载SDK

去官网（下载地址），根据自身电脑，选择下载SDK到我们的系统上。选择合适的位置解压。如下笔者这儿选择了在D盘目录下新建目录FlutterSDK,然后将下载下来的包解压到此处即可。

安装目录

配置SDK环境

右键我的电脑->属性->高级系统设置->环境变量->系统变量

找到Path变量，将Flutter的bin目录地址添加到该变量后面。如下：

QQ截图20190105140951.png

可以使用flutter doctor安装情况，如下：

QQ截图20190105142332.png

也可以通过flutter upgrade命令进行flutter版本升级，笔者个人还是喜欢直接去官网下载SDK解压。

Android Studio安装Flutter插件

由于笔者是Android开发者，所以我这儿使用AS作为开发工具，其他工具自行百度。

打开AS的setting 找到Plugins ->Browse Reponsitories 搜索Flutter，如下：

QQ截图20190105141303.png

点击install。然后重启AS即可。如下：

QQ截图20190105141358.png

解决Creating Flutter Project慢得问题

QQ截图20190510143022.png

由于国内网络环境大家都懂的，所以需要进一步配置两个环境变量：

QQ截图20190510142900.png

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Flutter目录、文件认识

QQ截图20190105141553.png

• Android：Android原生开发目录
• images：存放图片资源文件夹，（需要自己手动创建）
• ios：iOS原生开发目录
• lib：Flutter开发目录，里面存放flutter的dart代码
• pubspec.yaml：Flutter的配置文件，如依赖配置、版本、资源文件等。