Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图,这无疑能为用户提供良好的体验。
Flutter与用于构建移动应用程序的其它大多数框架不同,因为Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。 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安装包小的主要原因。
这是一个纯 Dart实现的 SDK,它实现了一套基础库,自底向上,我们来简单介绍一下:
底下两层(Foundation和Animation、Painting、Gestures)在Google的一些视频中被合并为一个dart UI层,对应的是Flutter中的dart:ui包,它是Flutter引擎暴露的底层UI库,提供动画、手势及绘制能力。
Rendering层,这一层是一个抽象的布局层,它依赖于dart UI层,Rendering层会构建一个UI树,当UI树有变化时,会计算出有变化的部分,然后更新UI树,最终将UI树绘制到屏幕上,这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分,它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
Widgets层是Flutter提供的的一套基础组件库,在基础组件库之上,Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景,只是和这两层打交道。
这是一个纯 C++实现的 SDK,其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时,调用最终会走到Engine层,然后实现真正的绘制逻辑。
下面以Windows搭建Flutter环境为例。 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,我们需要先将以下环境变量加入到用户环境变量中。
PUB_HOSTED_URL : https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn
可在官方下载最新的SDK稳定版或测试版本,也可以通过git从Flutter仓库获取相应的版本。 官方下载地址:https://flutter.cn/docs/development/tools/sdk/releases#windows
Git命令:git clone -b beta https://github.com/flutter/flutter.git
将下载或者通过git命令获取的文件夹转移到需要放置的目录中,如 D:\ProgramFiles\Android\Flutter 将该目录中flutter文件夹中带bin的目录如:D:\ProgramFiles\Android\Flutter\flutter\bin 添加至path环境变量中
在环境变量更新完后打开CMD或Windows Power Shell 运行 flutter doctor 命令,如果可以运行那么表示安装完毕。 上述命令会检查你的现有环境,然后把检测结果以报告形式呈现出来。仔细阅读它显示的内容,检查是否有尚未安装的软件或是有其他的步骤需要完成。
搭建Flutter环境,Android Studio需要有3.0或以后的版本。
打开Android Studio>Settings>Plugins 搜索Flutter,点击Install,同时Dart插件也会自动安装,如果未自动安装可搜索Dart来进行 PS:安装完成后需要重启Android Studio来加载插件
创建Flutter项目完毕
选择设备后就可以点击运行按钮。 可点击上图中闪电图标与旁边的按钮来进行热更新或重加载场景 当然也可以在Android Studio 的Terminal中输入flutter run命令运行。。 PS: 如果你是通过命令行运行的项目,你可以在命令行输入r或者大写R进行热更新或重加载场景
首先安装VS Code 安装完毕后点击左侧扩展面板 快捷键: ctrl+shift+x 搜索Flutter和Dart进行安装。 插件安装完毕后重启VS Code。