Flutter教程开坑篇，由简至难教你胡辣汤的31种作法...

Flutter = 胡辣汤

写在开坑以前

18年前我是一名设计师，作FLASH动画的。当时有一个FLASH编程的入门课程对我影响很大，直接致使了我后来“沦落为”一名程序员。那个入门课程做者叫ayychina，第一课叫《点不到的按钮》。在这个课程里，我掌握了入门任何新UI框架的武功秘籍，记得那会儿还用3.5寸软盘给我“梦情”作了个点不到的爱心...技术肥宅的浪漫真是很难get到吧...

那个年代的FLASH能够作出不少酷炫的UI，是当时数一数二的“跨端”技术，固然那会儿的尚未“跨端”这个概念，咱们都被叫作多媒体设计师....直到FLASH犯下几个致命的错误，又被乔帮主判处死刑...

• 不管什么框架，咱前端用起来不外乎就作几件事

1. 建立显示对象，好比button，text，image等等...
2. 弄明白显示对象的层级关系...容器，层级 3. 设置显示对象的属性，宽高大小颜色等等... 4. 显示对象的事件系统，click，mousemove等等... 5. 绘制/渲染系统...重绘机制等等... 复制代码

• 在开始以前，咱们先来了解下Flutter的架构和渲染机制

能够看到Flutter的架构主要分为三层:Framework，Engine和Embedder。

1.Framework使用dart实现，包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets，文本/图片/按钮等基础Widgets，渲染，动画，手势等。此部分的核心代码是:flutter仓库下的flutter package，以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。

2.Engine使用C++实现，主要包括:Skia,Dart和Text。Skia是开源的二维图形库，提供了适用于多种软硬件平台的通用API。

3.Embedder是一个嵌入层，即把Flutter嵌入到各个平台上去，这里作的主要工做包括渲染Surface设置,线程设置，以及插件等。从这里能够看出，Flutter的平台相关层很低，平台(如iOS)只是提供一个画布，剩余的全部渲染相关的逻辑都在Flutter内部，这就使得它具备了很好的跨端一致性。

• 从网上摘了一段，也是Flutter标志本身彻底不一样于RN类框架或其余Hybrid跨端框架的核心要素

我试着用一句话讲明白flutter为何能够跨端+高性能的原理

这货就是个跨端“游戏”引擎呀（打了引号）

一块画布（SGL），使用Dart语言编写Framework制定的API，由Framework调用Engine层实现绘制，Embedder层负责跨端运行和渲染。

再想一想那些能跨平台的游戏引擎unreal，unity3d，你想一想是否是都是这么回事呀？

---

建立一个Flutter应用

原理就聊到这里，回到咱们的课程，快速的让你们先来上个手《点不到的按钮》

• 安装Flutter看这里：安装Flutter

1. flutter create myapp
2. “myapp”是你应用的名称
3. 完成后用vscode打开这个目录

先搞清楚在哪里写代码

lib/main.dart就是我们新建的这个应用的入口代码

先不说别的，run一下（按F5），第一次很慢，以后会快不少

你能够选择使用苹果模拟器或是安卓模拟器来调试

随便改改代码试试看调试模式下的热重载

好比找到这一行代码
primarySwatch: Colors.blue, 改成 primarySwatch: Colors.red, 保存 复制代码

此次不须要通过编译，模拟器里的UI就实时改变了。因此热重载是一个很是高效的调试方式。 （这样的特性还用跟Web前端开发者说嘛？是否是太out了）

回到咱们的课程案例上，需求是

在界面里放置一个按钮，按钮上文字显示”点我呀“，点击以后按钮就跑到另一个坐标。这就是点不到的按钮...其实本来课程里是mouseover后移动到另外一个坐标，但移动端没有mouseover这个事儿啊...

需求拆解：

step1

在放按钮以前，咱们须要一个承载按钮的布局容器

这个按钮点了以后要随机变换位置，因此确定得用自由布局的组件

查看全部布局组件

总之看完全部布局组件的文档，咱们知道要用到这个组合
Stack，一个能够随意堆放子元素的布局 Positioned，一个绝对定位组件，改变top，left参数就能够跑来跑去啦 复制代码

step2

咱们要在这个容器里放一个按钮，按钮上文字显示”点我呀“

RaisedButton(
 onPressed: (){  },  color: Colors.red,//红色背景  child:Text(  'click me',//文本内容  style: TextStyle(  color: Colors.white,//文字白色  fontSize: 12//文字字号  )  ) ) 复制代码

step3

按钮点击以后要更改其坐标

在实现这个以前，咱们先要了解，在Flutter中万物皆Widget，而Widget又分无状态组件（StatelessWidget）和有状态组件（StatefulWidget）。简单点说，组件在建立后，是否容许更改状态，一但状态更改，其UI就会从新渲染。

这里显然咱们要用有状态组件，接下来的代码是在组件建立时，就给与按钮一个随机屏幕坐标，那么以后只要改变状态，就会从新渲染

RaisedButton(
 onPressed: (){  setState((){});//关键是这一句  },  color: Colors.red,  child:Text(  'click me',  style: TextStyle(  color: Colors.white,  fontSize: 12  )  ) ) 复制代码

//得到当前设备屏幕尺寸，须要import 'dart:ui'
var s = window.physicalSize/window.devicePixelRatio; //新建一个随机对象，import 'dart:math'; var rng = new Random(); //随机生成按钮的坐标 double btnTop = rng.nextDouble()*(s.height-40); double btnLeft = rng.nextDouble()*(s.width-100);  return Container(  color: Colors.white,  child:Stack(  children: [  Positioned(  top: btnTop,  left: btnLeft,  width: 100,  height: 40,  )  )  ]  ) ); 复制代码

• 那么本课关键代码就齐全了

源码下载

• 没整明白的请前往著名的交友社区查看源码 github.com/ezshine/flu…

关注大帅搞全栈

---

感谢分享点赞评论三连，跟我一块儿学作胡辣汤(Flutter)吧~

本文使用 mdnice 排版