一波Flutter酷炫特效来袭，持续更新(2)

最新推荐文章于 2026-06-16 09:17:50 发布

原创最新推荐文章于 2026-06-16 09:17:50 发布 · 644 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

程序员专栏收录该内容

185 篇文章

订阅专栏

本文介绍了Flutter中的多种动态UI组件，如LineBorderText、RainbowText、ExplosionWidget等，展示了如何使用动画和特效增强界面。同时提到后续的优化计划，包括性能提升和API改进，并强调阅读源码对于开发者的重要性。文中还提及了完整的Android开发学习资源，旨在帮助开发者提升技能。

LineBorderText(
child: Text(
“Border Effect”,
style: TextStyle(fontSize: 20),
),
autoAnim: true)

LineBorderText支持任意widget作为child，参数autoAnim控制创建时是否自动执行一遍动画；

彩虹字体

RainbowText(colors: [
Color(0xFFFF2B22),
Color(0xFFFF7F22),
Color(0xFFEDFF22),
Color(0xFF22FF22),
Color(0xFF22F4FF),
Color(0xFF5400F7),
], text: “Welcome to BBT”, loop: true)

RainbowText暂时支持文字的颜色变换，参数loop控制是否循环执行动画；

粒子爆炸

ExplosionWidget(
tag: “Explosion Text”,
child: Container(
alignment: Alignment.center,
color: Colors.blueAccent,
child: Text(
“Explosion Text”,
style: TextStyle(
fontSize: 20,
color: Colors.red,
fontWeight: FontWeight.bold),
)))

ExplosionWidget支持任意类型的widget作为child，注意参数tag表示child的唯一性，如果改变了child一定要改变tag，否则rebuild不会执行爆炸效果；

狠狠砸地

AnvilEffectWidget(child: Text(
“👉AnvilEffect👈”,
style: TextStyle(color: Colors.white, fontSize: 20),
)

AnvilEffectWidget支持任意类型的widget作为child;

刮刮卡

ScratchCardWidget(
strokeWidth: 20,
threshold: 0.5,
foreground: (canvas, size, offset) {
if (_image != null) {
double scale;
double dx = 0;
double dy = 0;
if (_image.width * size.height >
size.width * _image.height) {
scale = size.height / _image.height;
dx = (size.width - _image.width * scale) / 2;
} else {
scale = size.width / _image.width;
dy = (size.height - _image.height * scale) / 2;
}
canvas.save();
canvas.translate(dx, dy);
canvas.scale(scale, scale);
canvas.drawImage(_image, Offset(0, 0), new Paint());
canvas.restore();
} else {
canvas.drawRect(
Rect.fromLTWH(0, 0, size.width, size.height),
Paint()
…color = Colors.grey);
}
},
child: Container(
color: Colors.blueAccent,
alignment: Alignment.center,
child: Image.asset(
“assets/images/icon_sm_sigin_status_three.png”,
fit: BoxFit.scaleDown, height: 20,),
))

ScratchCardWidget参数较多，一个一个看：

strokeWidth : 手触的宽度；
threshold : 触发清除前景覆盖物的临界值，代码逻辑是计算全透明像素的比例；
foreground : 这个是Function类型，目的是绘制前景覆盖物，也就是刮刮卡的涂层；
child : 这个是刮刮卡的内容，支持任意widget作为child;
(canvas, size, offset){}： foreground对应的Function类型，支持用canvas绘制前景涂层；

下一步计划

优化现有功能：当前功能我用一周的业余时间赶出来的，难免有不当之处，事不在多而在于精，优化性能和api调用可能是比较重要的;
提交到dart pub：提交到pub肯定是便于使用的，在此之前还要对模块进行新的划分，可能要拆分成多个包提交；
事件的引入：当前用rebuild的形式触发动画不算是巧妙的方式；
引入更多功能：有好的效果，我愿一试；
致谢：
===
本项目实施过程中，部分灵感来自原生代码实现：
Android粒子爆炸效果：github.com/tyrantgit/E…
Android酷炫TextView：github.com/hanks-zyh/H…
感谢上述项目作者hanks和tyrantgit，致谢！