一、Flutter的初识和环境搭建

(一)学习大纲

一、Flutter的初识和环境搭建_第1张图片
Flutter的学习之路

(二)Flutter是什么?

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

(二)Flutter的优势在哪里?

1、美观
Flutter内置的Material DesignCupertino 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的初识和环境搭建_第2张图片
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 检查当前电脑环境是否有缺失的配置
  • 如果出现下面的图 就说明已经配置完毕!


    一、Flutter的初识和环境搭建_第3张图片
    image.png

(七)Flutter开发工具的选择

官方推荐:VSCodeAndroid studio

day 01 Flutter初识

你可能感兴趣的:(一、Flutter的初识和环境搭建)