🌈 Animated Border Card

animated_border_card is a beautiful and customizable Flutter widget that displays a sleek rotating sweep gradient border around a tappable card. Perfect for onboarding flows, referral banners, premium callouts, and more.

Pub Version Pub Points Likes Flutter

✨ Features

✅ Elegant rotating gradient border
✅ Fully customizable:

  • Gradient colors
  • Border animation speed & repeat control
  • Font family and text styles
  • Zoom-in animation toggle

✅ Simple tap handling
✅ Lightweight and easy to integrate

📸 Preview

(Insert GIF or screenshot of the animated card here)

🚀 Installation

Add this to your pubspec.yaml:

dependencies:
  animated_border_card: ^1.0.0

Then run:

flutter pub get

🧩 Usage Example

import 'package:animated_border_card/animated_border_card.dart';

AnimatedGradientBorderCard(
  onTap: () {
    // handle tap
  },
  title: "Refer & Earn",
  subtitle: "Invite your friends and earn rewards!",
  icon: Icons.card_giftcard,
  gradientColors: [Colors.purple, Colors.orange, Colors.pink],
  animationDuration: Duration(seconds: 5),
  repeatAnimation: true,
  enableZoomEffect: true,
  fontFamily: 'Roboto',
  titleTextStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  subtitleTextStyle: TextStyle(fontSize: 14, color: Colors.grey),
)

🎛️ Parameters

Parameter Type Description
onTap VoidCallback Function called when card is tapped
title String Title text
subtitle String Subtitle text
icon IconData Leading icon inside a circle
primaryColor Color Primary color for icon, border, and title
backgroundColor Color Background color of the card
gradientColors List<Color>? Custom gradient color list for border
fontFamily String? Optional font family to apply to text
titleTextStyle TextStyle? Optional override for title styling
subtitleTextStyle TextStyle? Optional override for subtitle styling
animationDuration Duration? Duration of gradient rotation
repeatAnimation bool If true, border animation loops
enableZoomEffect bool If true, zoom animation on build

💡 When to Use

  • Call-to-action cards
  • Referral programs
  • Premium feature highlight
  • Animated list tiles
  • Gamified reward UIs

🔧 Example App

Want to try it live? Check out the example folder for a working Flutter demo.

📄 License

This package is released under the MIT License.

🙌 Author

Srikanth
Made with ❤️ for Flutter devs who love stunning UI.

⭐️ Show Some Love

If you find this widget useful, please consider:

  • 🌟 Starring it on GitHub
  • 👍 Liking it on pub.dev
  • 💬 Sharing it with your Flutter community

Flutter UI should be fun, elegant, and expressive — and animated_border_card helps you do just that!

Libraries

animated_border_card