Flutter：我在网上看到了一个超炫的动画边框，于是我在 Flutter 里把它实现了出来

欢迎关注微信公众号：OpenFlutter，谢谢 Flutter 中的边框是很实用的------但我们得承认，它们通常扁平且缺乏新意。有一天晚上，我在网上看到一个动画，展示了一个围绕卡片脉动、令人惊叹的渐变动画边框。它瞬间让整个 UI 鲜活了起来。

受到启发，我立刻去 pub.dev 寻找能实现这一效果的包------但没有找到完全合适的。所以我决定自己动手实现。

在深入研究了 CustomPaint 、梯度着色器（gradient shaders ）、PathMetric 和动画调优之后，我创建了 zo_animated_border------这是一个 Flutter 包，让你能为任何 Widget、任何形状添加动画化、可定制的渐变边框，并且样板代码极少。

zo_animated_border 是什么？

一个强大且轻量级的 Flutter 包，它能为你的 Widget 带来渐变、动画化 和形状感知的边框------只需最少的样板代码。

将包添加到你的项目。

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  zo_animated_border: ^0.0.9

1. 渐变边框

"在 Firebase 控制台上看到的那个'尝试 Gemini'按钮是我的灵感火花。虽然它没有动画效果，但那流畅的渐变边框吸引了我的注意------我忍不住心想，如果它动起来会怎么样？ 于是我决定自己添加动画，看看效果如何。

这份好奇心促成了更进一步的成果：一个完全可定制、感知形状的动画边框。zo_animated_border 就是这样诞生的------它将一个静态的渐变想法，变成了一个动态的、引人注目的 UI 升级。"

dart 复制代码

ZoAnimatedGradientBorder(
  borderRadius: 100,
  borderThickness: 4,
  gradientColor: [
    Colors.yellow,
    Colors.orange,
  ],
  duration: Duration(seconds: 4),
  child: Container(
    width: 100,
    height: 100,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
    ),
    child: Text(
      "Circle",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

2. 多色边框

ZoMultiColorBorder 这个想法最初是在我随意浏览 Dribbble 设计时抓住我的眼球的------那种色彩斑斓、有动画效果的边框，非常抓人眼球。几天后，我注意到我的 Gmail 个人资料图片周围也有类似的感觉，这成了最后的灵感火花。经过一番深入研究，加上一些 StackOverflow 的魔法，以及大量的反复试验，我成功地在 Flutter 中将它变成了现实。

dart 复制代码

ZoMultiColorBorder(
  colors: [
    Colors.orange,
    Colors.white,
    Colors.green,
    Colors.indigo,
    Colors.pink,
  ],
  strokeWidth: 3,
  borderRadius: 75,
  child: Padding(
    padding: const EdgeInsets.all(3.0),
    child: Container(
      width: 150,
      height: 150,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: Text(
        "MultiColor Border",
        style: TextStyle(color: Colors.white),
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

3. 双重边框（Dual Border）

ZoDualBorder 的灵感直接来源于一个 YouTube 视频，视频中一位开发者正在解析一个很酷的 CSS 技巧：如何在 Web 上创建分层、动态的动画边框。那个技巧既简单又优雅，我就想------为什么不把它带到 Flutter 呢？于是我动手做了，并且加入了流畅的动画和完整的自定义功能。

dart 复制代码

ZoDualBorder(
  duration: Duration(seconds: 3),
  glowOpacity: 0.4,
  firstBorderColor: Colors.yellow,
  secondBorderColor: Colors.orange,
  trackBorderColor: Colors.transparent,
  borderWidth: 8,
  borderRadius: BorderRadius.circular(10),
  child: Container(
    width: 150,
    height: 150,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Text(
      "Dual Border",
      style: TextStyle(
        color: Colors.black,
      ),
    ),
  ),
);

但这仅仅是冰山一角------这个软件包能做的远不止这些！从会呼吸的边框到脉动效果，甚至还有动画蛇形效果（是的，确实如此），zo_animated_border 包含了许多引人注目的样式，可以瞬间提升你的 UI 品质。

好奇这一切在底层是如何运作的吗？

如果你想看一篇深入剖析构建这些动画边框所用到的概念和技术的文章，请在评论区留言告诉我！

一如既往，如果这篇文章对你有所帮助或启发，请分享给其他喜欢提升 Flutter 技能的开发者吧 ❤️。