Weniner

extension 作为 dart 中重要的关键字之一, 主要用于扩展函数方法 我们在实际开发过程中, 可能会或多或少遇到一些问题. 例如在 List 数组中, 现在只提供了 List.first 的方法. 我们想去获取数组中第二个对象, 比方说 second 方法, 这个方法就没有. 这个时候往往大家会通过创建新方法的方式去获取数组中第二个对象. 1234dynamic getSecond(List list) { if (list.length < 2) return null; return list[1];} 这个方式的好处在于简单明了, 但是我们在开发过程中, 往往过程是不可预料的, 可能会写很多重复且丑陋都代码. 有没有一种方法, 在不修改源码为前提下, 可以基于原来的类作扩展呢? 答案就是 Extension . 用法我们可以通过 extensoin 关键字创建扩展方法, 并且通过 on 关键字指定在类中. 在使用的时候, 我们只需要把相应的 extension 引入包内即可调用相关方法. 以下我们通过几个示例来看看 extension ...

时光荏苒, 总有一些景色现在再也看不到. 就像夏触不到冬的雪, 冬捉不到夏的蝉. 除了珍惜现在的点滴, 我们也可以利用技术的手段试着还原重现那段时光~ 起源看过这么一张图, 一瞬间感觉很惊艳. 季节跨度作对比, 很难不去惊叹大自然的鬼斧神工. 由此, 也引申出了今天的主题-《Flutter 时光切换效果》.本次, 我们将通过Flutter作为介质. 通过增加怀旧滤镜的方式, 手动将图片还原到过去.然后可以通过时光调整去同时加载不同时光所属的图片. 实现简单来说, 我们需要完成一个如图所示的widget. 在左边是现在的景色, 右边是过去的景色. 而控制器呢~ 可以切换时间进度. 分割图片首先, 我们需要将图片分布在新旧的图层上. 这里我们可以通过Align 来实现, Align 是什么组件呢? 可能很多人都认为它只是一个用于控制内部对齐方式的一个组件, 实际上它还提供如widthFactor 、heightFactor 这些参数. 这些参数会根据父组件的约束改变子组件最大的可用空间, 这恰恰可以符合分割线的逻辑, 我们只要知道他们各占据多少空间,就可以正好拼接它们自己的部分还原成一 ...

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的用法,参数以及扩展.同时会加入对源码的阅读思考,做到知其然知其所以然. 适宜人群: 入门 以下教程基于: Flutter 版本: stable, 3.0.5 dart sdk 版本: >=2.15.0 <3.0.0 Container介绍接触过Flutter 的小伙伴应该都清楚, Container 作为基础控件. 应该是使用频率最高的控件之一, 本系列教程也是从Container 开始着手.Container 是一个StatelessWidget, 这里我们应该敏锐的意识到, Container 本身并不负责状态变化管理, 我们从它的build方法也可以看到, 它最终返回的Widget 是由本身参数来构建相应的widget. Container只作为一个容器去承载相应的widget. 给予相应的变化. 用法width\height 以及 constraintsconstraints 是一个约束属性, 而width\height 用于描述组件的 ...

highlight: agatetheme: qklhk-chocolate 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情 从上一次给大家介绍了自定义单组件布局之后,一直都想写一个关于使用单组件自定义动画的文章. 不过,因为一直没有好的题材,暂且搁置了.今天和对象聊天的时候偶尔发现一个很有意思的动画准备实现一下 起因这次想做的动画是和对象聊天的时候.对方发的一个表情相信这个表情很多人应该在wx中也发过, 小企鹅跑来跑去的非常有意思.今天我们就通过 CustomSingleChildLayout 来实现这个动画. 分析首先我们先分析一下这张图的一个构成.简单来说,就是一个 不规则的图形在来回上下的左右反复运动. 更深入来看, 小企鹅在 移动过程中手的方向也会随移动方向发生改变 . 但是仔细看, 你会发现, 这实际上是x轴反转的一个镜像. 知道这些基本点后, 我们就可以开始设计我们的动画了~ Coding准备 一张透明图片ps: 这次演示使用的是一张360*360的图片 前置教程如果你发现过程中感觉有些迷茫的话, 不妨静下心先阅读 ...

“everything is widget !” 似乎当我们刚接触Flutter的时候,便常常听过这句话.那么,除了官方提供的widget外. 你有没有尝试过自己去实现一个自定义布局的widget呢? 如果没有的话~不妨跟着本文一起动手写个自定义的布局吧 ! 介绍自定义单组件布局类似于Center、Sizebox、Align这些组件, 它们都有一些共同的特性.比如说: 只有一个child并且是继承于SingleChildRenderObjectWidget. 我们称这样的widget为 布局类的widget , 理由是它们可以去 定位子组件相对位置, 也可以给子组件布局限制.并且还可以对画布做一些操作.实际上,Flutter本身也提供了一个方便我们进行布局的一个组件.这也就是我们今天的主题 CustomSingleChildLayout. CustomSingleChildLayout说起 CustomSingleChildLayout,它可以控制子组件在内部约束中随意定位. 实际上在大部分场景中, 笔者认为都可以通过 Stack+Positioned|Align的方式去替代.那 ...

本文主要分析了RendererBinding 的作用和内部一些重要的类. 希望此文能给你带来收获. 分析RendererBinding 的作用是负责render tree 和flutter engine之间的连接. 我们在启动App的时候,首先会创建 PiplineOwner ,然后通过platformDispatcher去监听屏幕分辨率变化、系统文字大小变化、亮度、语义等等.最后去初始化RenderView,根据平台去处理如帧回调、鼠标、web之类的信息. 1234567891011121314151617181920212223void initInstances() { super.initInstances(); _instance = this; _pipelineOwner = PipelineOwner( onNeedVisualUpdate: ensureVisualUpdate, onSemanticsOwnerCreated: _handleSemanticsOwnerCreated, onSemanticsOwne ...

说起canvas,可能很多人都有过了解和使用. 本文主要意指详解canvas的能力. 准备工作如果你正准备学习flutter的canvas, 那么不妨和笔者一样打开idea. 然后紧跟着内容自己也敲一遍.ps: 友情提醒,自己敲一遍, 影响更深刻哦~ 首先创建一个widget,在其中返回一个CustomPaint 123456Widget build(BuildContext context) { return CustomPaint( size: const Size(100, 100), painter: _DemoPainter(), );} 其次,我们需要准备好画笔. 正所谓工欲善其事,必先利其器. 123456789101112131415/// 创建画画的载体class _DemoPainter extends CustomPainter { // 创建画布 final Paint _paint = Paint()..color = Colors.blue; @override void paint(Canvas c ...

题记: 童话说雨后会有一道彩虹,却不曾说过它也会转瞬成空.想要把绚烂紧紧握在手中… —虹之间 闲暇时,又听到了这首歌. 抑郁质性格的人难免会惆怅,美好的东西转瞬即逝.不过谁叫咱们是程序员呢~ 这就安排上.整上一个想看就看的彩虹! 玩转彩虹彩虹，是气象中的一种光学现象，当太阳光照射到半空中的水滴，光线被折射及反射，在天空上形成拱形的七彩光谱，由外圈至内圈呈红、橙、黄、绿、蓝、靛蓝、蓝紫七种颜色. 相信小伙伴们在大雨过后的不经意间都见过吧! 接下来,我们就自己手动绘制一下.一般这种, 我们都会分析一下绘制的步骤. 分析步骤彩虹实际上就是7道拱桥型状的颜色堆积,绘制彩虹第一步我们不如先绘制一道拱桥形状的颜色块.也就是说, 本质上我们绘制一个半圆环即可解决问题. 绘制半圆环在Flutter中, 半圆环都绘制有很多方法. 比如canvas中,有drawOval(rect,paint) 的方法,这种方法可以绘制出一整个圆环, 我们可以对它作切割即可. 不过这种方法不便利的是它控制不了圆环的进度, 有没有一种方法可以让我们自己去控制圆环绘制的进度呢? 答案就是Path, 好多伙伴们应该都对Pa ...

跑马灯被运用在很多领域, 例如商场的电子条幅、大楼的宣传广告位、地铁的广告位.不过毫无疑问的是它们都是为了解决文字过长的问题而应景给出的一种解决方案. 今天我们来说一下flutter 怎么通过绘制来实现跑马灯效果!等不及想看源码的兄弟们,请走这里:github.com/weniner/flutter_demo 分析实现我们都知道跑马灯是不停的往前跑. 在给定的区域里,如果是最小的绘制区域,我们也至少绘制出它左边刚出头,右边刚出尾的所有子项.同时我们也需要一个东西来驱动它去前行. 同时,文字也会有很多情况.它可能很短,也可能和给定的的区域相等,也可能远超我们给定的区域.在这种情况下,我们应该首先获取文字的宽度.然后确定每秒它会移动多少.并且还需要一个驱动器来驱动它去做这些变化. 测量文字如果大家写过Flutter, 一定用过Text Widget. 既然Text Widget 可以根据文字大小来展示,说明Flutter中是有一个api可以测量文字长宽的.这里直接给出答案: 123456789101112131415// 我们最终绘制的文字final String ...

设计: 嗯? 这个图片点击跳转进详情再返回图片怎么变白闪一下呢?产品: 是啊是啊! 一定是个bug开发: 囧囧囧 在开发过程中, 也许你也遇到过这样一个场景. 进入一个页面后,前一个页面的图片都会闪白一下. 或者在列表中,加载很多列表项后,之前列表中的图片都需要重新加载.你有没有想过这一切的原因是什么呢? 没错! 它就是我们今天介绍的主人公 — ImageCache 可能有些人对ImageCache还有些陌生, 我们在之前的章节有说过启动流程时Flutter runApp到渲染上屏,有介绍过其中PaintingBinding这个mixin类.带着探索的心我们先去看看PaintingBinding都做了 一些什么操作呢? PaintingBindingPaintingBinding在构造函数中,除了构建自身的实例.同时也构建了图片缓存的管理实例.也包括了着色器预热. 123456{ _instance = this; // 创建了图片缓存管理 _imageCache = createImageCache(); shaderWarmUp?.execu ...