zo_animated_border

A package that provides a modern way to create gradient borders with animation in Flutter

Getting started

First, add zo_animated_border as a dependency in your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  zo_animated_border : ^[version]

Import the package

import 'package:zo_animated_border/zo_animated_border.dart';

Usage

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

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

For Dotted border

ZoDottedBorder(
  child: Container(
    height: 100,
    width: 100,
    color: Colors.red,
    alignment: Alignment.center,
    child: Text(
      "MonoChrome",
      style: TextStyle(fontSize: 14, color: Colors.white),
    ),
  ),
  animate: true,
  borderRadius: 10,
  dashLength: 10,
  gapLength: 5,
  strokeWidth: 3,
  color: Colors.blue,
  animationDuration: Duration(seconds: 4),
  borderStyle: BorderStyleType.monochrome,
);

For Breathing border

ZoBreathingBorder(
  borderWidth: 3.0,
  borderRadius: BorderRadius.circular(75),
  colors: [
    Colors.blue,
    Colors.purple,
    Colors.red,
    Colors.orange,
  ],
  duration: const Duration(seconds: 4),
  child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(75),
    ),
    alignment: Alignment.center,
    child: const Text(
      'Breathing Border',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

For Snake Border

ZoSnakeBorder(
  duration: 3,
  glowOpacity: 0,
  snakeHeadColor: Colors.red,
  snakeTailColor: Colors.blue,
  snakeTrackColor: Colors.blueGrey,
  borderWidth: 5,
  borderRadius: BorderRadius.circular(10),
  child: Container(
    width: 150,
    height: 45,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Text(
      "Snake Border",
      style: TextStyle(color: Colors.black),
    ),
  ),
);

For Pulsating border

ZoPulsatingBorder(
  type: ZoPulsatingBorderType.pulse,
  borderRadius: BorderRadius.circular(100),
  pulseColor: Colors.blue,
  child: Container(
    alignment: Alignment.center,
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(50),
    ),
    child: Text(
      "Radar Pulse",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

For MonoChrome border

ZoMonoCromeBorder(
  trackBorderColor: Colors.white,
  cornerRadius: 50.0,
  borderStyle: ZoMonoCromeBorderStyle.mirror,
  borderWidth: 5.5,
  child: Container(
    width: 100,
    height: 100,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.red,
      shape: BoxShape.circle,
    ),
    child: Text(
      "Mirror",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

Feel free to post a feature requests or report a bug here.

My Other packages

• connectivity_watcher: A Flutter package to monitor internet connectivity with subsecond response times, even on mobile networks.
• ultimate_extension: Enhances Dart collections and objects with utilities for advanced data manipulation and simpler coding.
• theme_manager_plus: Allows customization of your app's theme with your own theme class, eliminating the need for traditional
• date_util_plus: A powerful Dart API designed to augment and simplify date and time handling in your Dart projects.
• pick_color: A Flutter package that allows you to extract colors and hex codes from images with a simple touch.

Libraries

clipper/border_cut_clipper

painter/zo_breathing_border_painter

painter/zo_dotted_painter

painter/zo_dual_border_painter

painter/zo_gradient_border_painter

painter/zo_snake_border_painter

painter/zo_track_painter

widget/size_provider_widget

widget/zo_breathing_border

widget/zo_dotted_border

widget/zo_dual_border

widget/zo_pulsating_border

widget/zo_snake_border

widget/zo_track_border

zo_animated_border