“flutter入门与实战教程，这一篇效率文案就够了”

本篇文章5805字，读完约15分钟

让我们来看看现在的一点跨平台方案。 从前端渲染的角度来分类的话，大致分为以下几种方案。

网页渲染

这个方案很好理解，现在很多项目嵌在h5的网页里。 是开发javascript等前端技术，在客户端用webview进行渲染。 微信小程序现在采用了这样的方案。

其优点很明显，采用成熟的前端技术进行开发，学习价格低，开发效率高，同时支持动态发布代码。

但是缺点也很明显，在性能体验方面与原生有很大的差距。

渲染本机控件

由于webview的性能不够好，有使用本机控件进行渲染的方案。 该方案也是使用javascript开发的。 但是，最终将通过调用本机控件进行渲染。 该方案的代表是脸书的react native。

通过使用本机控件进行渲染，性能体验也变得更接近本机。 但是，只是更近一点，和原生还有差距。 此通信效率相对较低，因为需要经常在javascript和原始设备之间进行通信。

另外，由于需要适应各个平台的控制，有可能发生这种情况，系统控制没有更新，框架本身没有更新，所以产生了一点问题。 换言之，这个方案受到了本机控制的限制。

绘制引擎的渲染

下一个是主角。

在前端，完全避免本机控制后，可以通过系统的绘制api绘制客户界面。 从这个角度出发，可以在各个平台上使用统一接口的绘制引擎进行接口绘制，这个引擎最终调用系统的api绘制。 这样，可以在不同的平台上统一ui，而不受本机控制的限制。

flutter就是这样的开发框架。

跨平台ui处理方案

flutter是谷歌开发的跨平台ui处理方案。 换言之，基本上只是ui的问题。 如果涉及平台本身的功能，例如调用蓝牙或摄像头，则通常需要本机代码。 但是，为了处理这些问题，也有一些第三方库。

绘图引擎skia

flutter采用skia作为绘图引擎。 skia已经被谷歌收购，现在很多谷歌旗下的产品都是用包括安卓在内的skia绘制的。

安卓内置了skia，但ios没有，所以打ios安装包的时候，一起放入skia。 结果，用相同的flutter代码打包后，ios的包比安卓的包稍大。

开发语言dart

flutter采用的开发语言被称为dart。 dart也是谷歌独有的，是面向对象的语言，然后可以看到一些其他开发语言的影子。 学习并不难。

前面说跨平台方案的时候，其他方案基本上都是以javascript为开发语言，为什么不用flutter呢？ 是因为dart是谷歌的家吗？ 这个问题先留着，我们后再说。

这里我简单拿来了，具体的构建流程可以在官网上看到。

/ S2/]闪存- io /文档/获取-开始/安装

的构建步骤如下

下载闪存模块

下载官方网站:

/ S2/] flutter.dev/docs /开发/工具/ SDK /发布

由于国内访问可能会受到限制，官方为中国开发者构建了镜像。

flutter.dev /通信/中国

更新环境变量

解压后，将flutterin的完整路径添加到环境变量path中。

安装开发工具

理论上，任何文案都可以用于开发flutter应用程序，但推荐的开发工具是android studio、intellij、VS代码。 因为这些开发工具可以安装官方的flutter和dart插件，从而获得更好的开发体验。 复印采用的是安卓studio。

开发ios应用程序时，还需要安装xcode。

插件的安装

使用开发工具的插件设置安装上述flutter和dart插件。 flutter插件用于支持flutter的运行、调试、热负载等功能，而dart插件提供代码输入检查、代码完成等功能。

万物始于hello world。 让我们先创建一个显示hello world的flutter项目。

在android studio的起始页上，选择“/ S2 /”startanewflutterproject ，或使用菜单栏上的“/ S2 /”文件& gt。 新闻与新闻； 选择new flutter项目以创建新的flutter项目。

创建的项目包含两个文件夹:安卓和ios。 这些是标准的安卓和ios项目。 我们的flutter代码存储在lib文件夹中。 创建项目后，默认情况下会附加计数器示例。 将main.dart的代码更改为hello world。

启动模拟器或连接到实际机器，点击run执行后，将显示这样的界面。

具体代码最好先看起来眼熟，具体后再说明。

写flutter之前，先简单介绍一下dart的语法。 如果有java和javascript的开发经验，或者有面向对象的编程思想的话，学习起来会很快。

可以在test文件夹下创建dart文件，以写入测试代码。

变量宣言

指定类型

与java一样，可以如下声明整形变量

var

也可以像javascript一样使用var进行声明。

但是，与javascript不同，以下代码在javascript中不会出现错误，但在dart中会出现错误。

在dart中用var声明变量后，根据第一次赋值估计变量的类型，然后不能更改类型。 也就是说，javascript是弱语言，dart是强语言。

对象

如果必须这样写的话，那样就可以了。 如果将var更改为object，则不会发生错误。

与java一样，object是所有对象的基类。 但是，如果尝试打印num的字符串长度，将会出错。

因为length属于string，但只知道num是对象，不知道是string。

达美

如果必须这样写的话，那也行。 dart有自己的关键字dynamic，如果将对象更改为dynamic，就不会发生错误。

如果运行该文件，控制台将看到字符串的长度打印正确。

动态意义上，如果使用它进行声明，系统将找到并调用可用的属性和函数。 但是，这个写法其实不太安全。 因为即使弄错属性名，编译器也不会出错，直到执行时才会出错。

函数

达美

在dart中，函数也可以不写返回型，不写的话就作为dynamic被解决。 这样，函数的类型是返回的类型，如果没有返回，则是语音类型。 例如，可以这样做。

执行后，将正确打印字符串长度。

用于宣传

由于dart的函数也是对象，因此可以将以下函数作为参数进行传播

可选参数

dart的函数参数有一个可选参数的概念。 如果文本是内容控件text，则源代码中将显示text的构造函数。

首先，参数有data。 这是要显示的副本。 必须的。 data后面的一堆参数放在大括号中。 这些参数被称为可选参数，这意味着这些参数不会被传递。

要显示长于时间的副本，并限制最多显示两行，请创建文本。

可选参数在flutter中使用得非常多。

非同步

未来

dart使用future来解决异步任务。 例如，现在延迟一秒钟打印666。 代码如下所示。

future的语法与promise非常相似。 如果任务执行成功，则调用then，如果执行失败，则调用catcherror，无论成功还是失败，都调用whencomplete。

同步/等待

如果不喜欢上面的写法，或者想将异步转换为同步，可以用async和await两个关键字进行转换。

转换上面的代码，写getstring方法。 返回的类型为future，返回字符串会很慢。 在main函数之后添加await，在async关键字getstring ( )之前添加await，代码将如下所示:

开车一看，发现文字列印正常延迟1秒。 其中，getstring ( )返回future，await getstring ( )是在返回延迟后返回的字符串。 await只能用async的函数来采用。

async和await其实是语法糖，最终转换为future调用链的形式执行。

然后返回flutter。 flutter中最重要的概念之一是小部件(下一个翻译是控件)。

在母语开发中，我们可能通过界面进行区分。 这是视图，这是布局，这是视图控制器。 但是，在flutter中，这些都属于统一的模型小部件。 在flutter界面上，可以说一切都是小部件。

以前学习面向对象的时候，我们听过一句话，把所有东西都叫做对象。 在这里应用。 在flutter中，所有的东西都受到控制。

有具体的控制。 做了简单的分类。

路由控制

所有控件都属于/ S2 /统计构件或/ S2/]统计构件。 这些不同之处在于，Stateful小部件具有状态state，而在Stateless小部件中不存在。

状态小部件

如果一个控件是可变的，则使用Stateful小部件进行生成。 Stateful小部件本身不是可变的，但拥有的状态state是可变的。

状态小部件

如果一个控件的状态是固定不变的，则可以使用状态构件。 前面写的hello world采用了状态构件。

集装箱控制

容器类控件通常会影响其子控件的某些属性或配置，如控件的宽度高度、背景和位置。

常用的容器控件有容器、中心、填充等。

布局控制

布局控制与本机开发的layout类似。 通常，它具有children属性，可以接受控件的数组，并对这些控件进行特定的合成。

常用的布局控制有row、column、堆栈、flex等。

基本控制

基本控件是常用的拷贝、按钮、照片等的控件。

常用的基本控件有文本、文本字段、按钮、图像等。

功能控制

flutter还提供不影响ui布局的控件，但具有特定功能，如页面跳转、事务拦截和主题定义。 这样的控制称为功能控制。

常用的功能控件有导航器、通知监听器、theme等。

我开始写flutter代码。我不记得flutter项目创建后附带了计数器demo。 现在，我们用自己的代码实现一次。 代码更改如下:

执行后，将显示这样的界面。

每次单击按钮，数字都会增加一个。 让我们分解这段代码，看看里面使用的小部件。

状态小部件

由于页面中的数字跟踪状态的变化，因此该页面将使用Stateful小部件代替。 stateful小部件不直接返回小部件，而是返回到状态state，在状态中返回小部件。

scaffold

scaffold是标准的材质设计页面，包括标题栏、浮动按钮、侧滑菜单和底部导航栏等结构。 标题栏appbar、页面副本body、浮动按钮floatingactionbutton到了。

亚太区

appbar是标题栏，通过查看控件的构建方法可以知道可配置的属性。

appbar的可选参数除了标题title以外，还可以构成标题前的副本leading、右侧的操作按钮anctions、控制垂直高度elevation等。 我们只给了title。 其他属性使用默认值。

中心

center是容器类的控件，其功能是将子控件显示在中心。

浮动连接

安卓开发的应该对这个控件很熟悉。 位于页面右下角的特定格式的button。 参数中的onpressed是必需的，传递单击后的回调函数。

以此为基础，介绍flutter的两个重要特征。

点击button后，将num变量加1，利用setstate通知状态发生了变化，flutter根据新的状态更新ui。 如果接触过小程序的开发，则setstate与小程序的setdata相似。

在flutter中，不需要用set方法更新ui。 可变控件绑定到状态。 这就是flutter的响应式ui编程。

安卓q和ios 13中有黑暗模式。 我们也换个黑暗主题玩吧。 材料应用程序具有“热”属性。 试着构成吧。

在这次更改结束后，请不要单击run。 单击闪电图标闪存热重新加载时，界面将发生变化。

这就是flutter的热负荷，写完代码后马上就能在热负荷下看到设备上的写入结果，可以大幅提高开发效率。

下面是在flutter中常见的一些操作。

在flutter中，使用导航器管理页面跳转。 例如，要跳转到newpage，可以编写以下内容:

堆栈采用推式，堆栈为pop。

使用materialpageroute可以模拟android中页面跳转的过渡效果。

让我们看看如何显示本地图像。

在根目录中新建一个包含图像(如images )的文件夹，然后将图像picture.png放入其中。

找到根目录下的pubspec.yaml文件。 这就是flutter依赖配置文件。 这里需要构成刚才的图像。

现在可以使用image控件显示这张照片。

和节点的npm和安卓的j中心一样，flutter也有公共仓库pub.dev。 pub.dev是谷歌官方的dart仓库，可以找到所需的包和插件。

flutter本身没有toast 我们访问一个。 用pub.dev搜索后，决定采用fluttertoast。

根据证书，在pubspec.yaml文件的从属项下配置。

单击android studio右上角的软件包获取同步，可以执行以下操作

我们上面采用了material design的控制。 它们都在flutter/material.dart软件包中。 如果要使用ios样式的控件，请使用flutter/cupertino.dart包。

ios风格的控制基本上以cupertino开始。 让我们替换计时器页面上的控件。

效果如下。

代码的部分到此为止。 接下来我想谈谈编译方法。 编程语言的编译方法有两种。

至于哪个更好，取决于从哪个立场着手。 对于jit，其一大优点是支持动态公共代码，即支持热更新。 但是，从性能的角度考虑，aot会更好。 因为在运行时不进行编译操作也能提高运行效率。

回到我们最初留下的问题。 为什么其他跨平台的方案必须用javascript开发，而flutter必须用dart开发？ javascript的编译方法为jit，不支持aot。 dart支持jit和aot。

flutter在开发阶段采用了jit，增加了热负荷，提高了开发效率。 打包时变更为aot，保证了正式版应用的性能。

最后说一下大家在意的事情吧。 flutter支持热更新吗？ 因为dart说支持jit，所以技术上支持。 但是，目前不支持。 官方计划文件表明:。

关于原因，官方在这里已经证明了。 总而言之，因为从政策的限制，以及性能和安全性的角度来看，暂时还没有得到支持。