Eu vi uma borda animada incrível na internet — então eu a criei no Flutter.

As bordas no Flutter são funcionais — mas vamos encarar a realidade, elas costumam ser planas e esquecíveis. Certa noite, vi uma animação na internet mostrando uma borda de gradiente animada deslumbrante pulsando ao redor de um card. Aquilo instantaneamente deu vida à interface.

Inspirado, fui ao pub.dev procurar um pacote para replicar o efeito — nada se encaixava perfeitamente. Então, eu mesmo construí.

Após mergulhar fundo em CustomPaint, gradient shaders, PathMetric e ajustes de animação, criei o zo_animated_border — um pacote Flutter que permite adicionar bordas de gradiente animadas e personalizáveis a qualquer widget, em qualquer formato.

O que é o zo_animated_border?

Um pacote Flutter poderoso e leve que traz bordas com gradiente, animadas e cientes do formato (shape-aware) para os seus widgets — com o mínimo de código repetitivo (boilerplate).

Adicione o pacote ao seu projeto.

dependencies:
  flutter:
    sdk: flutter
  zo_animated_border: ^0.0.9

1. Borda com Gradiente

Aquele botão “Experimentar o Gemini” no console do Firebase foi a faísca inicial. Embora ele não seja animado, o gradiente elegante me chamou a atenção — e eu não pude deixar de me perguntar: e se ele fosse animado? Então, eu mesmo adicionei a animação, só para ver como ficaria.

Essa curiosidade levou a algo mais: uma borda animada totalmente personalizável e ciente do formato (shape-aware). E foi assim que nasceu o ZoAnimatedGradientBorder — pegando uma ideia de gradiente estático e transformando-a em uma atualização de interface dinâmica e chamativa.

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. Borda Multicolorida

A ideia para o ZoMultiColorBorder me chamou a atenção pela primeira vez enquanto eu navegava casualmente pelo Dribbble — uma daquelas bordas coloridas e animadas que simplesmente saltam aos olhos. Poucos dias depois, notei uma vibe semelhante ao redor da minha foto de perfil do Gmail, e esse foi o estalo final. Com um pouco de pesquisa, um toque de “mágica” do StackOverflow e muita tentativa e erro, consegui dar vida a esse efeito no Flutter.

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. Borda Dupla (Dual Border)

A inspiração para o ZoDualBorder veio diretamente de um vídeo no YouTube, onde um desenvolvedor estava explicando um truque de CSS sensacional para criar bordas animadas em camadas na web. Era simples, elegante, e eu pensei: por que não trazer isso para o Flutter? Então eu trouxe, com animações suaves e total personalização integradas.

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

Mas isso é apenas a ponta do iceberg — este pacote pode fazer muito mais! De bordas pulsantes a efeitos de respiração e até ‘cobras’ animadas (sim, é sério), o zo_animated_border está repleto de estilos chamativos que podem elevar instantaneamente o nível da sua interface.