一、Flutter的初识和环境搭建

(一)学习大纲

Flutter的学习之路

(二)Flutter是什么？

Flutter是一个UI SDK（Software Development Kit），可以对移动端、Web端、桌面的开发，完美的跨平台解决方案。具有一统大前端的野心，正在侵蚀iOS、Android等原生开发。

(二)Flutter的优势在哪里？

1、美观
Flutter内置的Material Design 和Cupertino widget、丰富的motion API、平滑自然的滑动效果和用户体验
2、快速
Flutter的渲染性能很好。Flutter将代码编译成机器码执行，充分利用GPU的图形加速能力。即使低性能手机也能实现60FPS的渲染速度
Flutter引擎使用C++编写，高效的Skia 2D渲染引擎，Dart 运行时和文本渲染库
3、高效
Hot Reload（热重载）
4、开放
Flutter是开源项目

(三)Flutter绘制原理

• GPU将信号同步到UI线程
• UI线程用Dart来构建图层树
• 图层树在GPU线程进行合成
• 将合成后的视图数据提供给Skia引擎，Skia引擎通过OPenGL(或Vulkan)将显示内容提供给GPU

Flutter绘制原理

(四)什么是Skia渲染引擎

Skia是一个Flutter向GPU提供数据的途径
Skia（Skia Graphics Library）是一个由C++编写的开源图形库
对于iOS平台，Skia是跨平台的，替代了iOS的Core Graphics/ Core Animation/ Core Text ,所以iOS包会比Android要大很多（Skia作为Flutter iOS渲染引擎嵌入到Flutter的iOS SDK）。

(五)大前端学不动系列

每一样新技术的出现都是为了解决之前技术的某些痛点的，要学会拥抱这种变化

如何学习Flutter？

• Dart语言学习
• Flutter实战学习
• Flutter底层技术、 源码阅读

以上都是对Flutter相关知识的理解，下面是对Flutter环境的搭建：

(六)Flutter环境搭建

前往Flutter中文文档有相应的流程

• 下载Flutter SDK 、解压将flutter文件夹移动到自己想安装的路径
• 配置环境变量 vim ~/.bash_profile
  下面的三条地址分别是：配置flutter全局路径(~/Documents为flutter当前存放地址)、配置pub镜像地址、配置flutter镜像地址

export PATH=~/Documents/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 保存完毕后 调用source ~/.bash_profile 使之生效
• 检查环境 配置好后调用flutter doctor 检查当前电脑环境是否有缺失的配置

• 如果出现下面的图 就说明已经配置完毕！

  
  
  

  image.png

(七)Flutter开发工具的选择

官方推荐：VSCode 和 Android studio

day 01 Flutter初识