I Saw a Slick Animated Border on the Internet — So I Made It in Flutter

Animated borders in Flutter can significantly enhance the user interface, making it more engaging and visually appealing. This article explores the creation of the zo_animated_border package, which allows developers to add customizable gradient borders to any widget. Discover how CustomPaint, gradient shaders, PathMetric, and animation tuning were used to bring this vision to life.

Introduction

Borders in Flutter are functional but often lack visual appeal. Inspired by a stunning animated gradient border pulsing around a card, I decided to create a Flutter package to replicate this effect. The result is zo_animated_border, a lightweight package that adds gradient, animated, and shape-aware borders to your widgets with minimal boilerplate.

Key Features of zo_animated_border

• Gradient Borders: Add sleek gradient borders inspired by modern UI designs.
• Multi-Color Borders: Create vibrant, eye-catching borders with multiple colors.
• Dual Borders: Implement layered, animated borders for a unique visual effect.
• Customizable Animations: Fine-tune animation parameters to achieve the desired look and feel.

Code Examples

Here are some code examples demonstrating how to use the zo_animated_border package.

Gradient Border

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),
    ),
  ),
);

Multi Color Border

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,
      ),
    ),
  ),
)

Dual Border

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,
      ),
    ),
  ),
);

Conclusion

The zo_animated_border package offers a powerful and lightweight solution for adding animated gradient borders to Flutter widgets. By leveraging CustomPaint, gradient shaders, and animation techniques, developers can create visually stunning and engaging user interfaces. Explore the package further and elevate your Flutter development projects. www.example.com