✨ Glow Kit

A powerful, customizable, and high-performance Flutter glow animation package supporting 20+ shapes.

Glow Kit provides a flexible GlowEffect widget that adds smooth, animated glow effects to any widget with full customization and optimized rendering using CustomPainter.


πŸš€ Why Glow Kit?

βœ” Smooth & modern glow animations
βœ” 20+ built-in shapes
βœ” Highly customizable
βœ” Optimized for performance
βœ” Easy to use
βœ” Null-safe
βœ” Flutter 3+ compatible


πŸ“¦ Installation

Add this to your pubspec.yaml:

dependencies:
  glow_kit: ^1.0.0

Then run:

flutter pub get

πŸ“₯ Import

import 'package:glow_kit/glow_kit.dart';

⚑ Quick Start

The simplest way to use GlowEffect:

GlowEffect(
  glowColor: Colors.blue,
  child: const Icon(
    Icons.star,
    size: 60,
    color: Colors.white,
  ),
)

That’s it! πŸŽ‰


🧩 Complete Example

Below is a full runnable example:

import 'package:flutter/material.dart';
import 'package:glow_kit/glow_kit.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GlowDemoPage(),
    );
  }
}

class GlowDemoPage extends StatefulWidget {
  const GlowDemoPage({super.key});

  @override
  State<GlowDemoPage> createState() => _GlowDemoPageState();
}

class _GlowDemoPageState extends State<GlowDemoPage> {
  bool _animate = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: GlowEffect(
          glowColor: Colors.purple,
          glowCount: 3,
          duration: const Duration(seconds: 2),
          startDelay: const Duration(milliseconds: 500),
          repeatPauseDuration: const Duration(milliseconds: 300),
          glowRadiusFactor: 0.8,
          animate: _animate,
          repeat: true,
          curve: Curves.easeInOut,
          shape: GlowShape.hexagon,
          child: const Icon(
            Icons.favorite,
            size: 80,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

🎨 Supported Shapes

Glow Kit supports more than 20 shapes:

πŸ”· Basic Shapes

  • Rectangle
  • RoundedRectangle
  • Circle
  • Square
  • Oval
  • Stadium
  • Capsule

πŸ”Ί Polygon Shapes

  • Triangle
  • Diamond
  • Pentagon
  • Hexagon
  • Octagon

⭐ Star Shapes

  • StarFive
  • StarSix

πŸ’– Decorative Shapes

  • Heart
  • Cloud
  • Bubble
  • Badge
  • Shield

🧩 Modern UI Shapes

  • CutCorner
  • BeveledRect
  • Ticket
  • Ribbon

βš™οΈ Properties

Property Type Description
glowColor Color Color of the glow
glowCount int Number of glow layers
glowRadiusFactor double Controls glow expansion scale
endGlowRadius double? Explicit final glow radius
duration Duration Animation duration
startDelay Duration Delay before animation starts
repeatPauseDuration Duration Pause between animation loops
animate bool Start or stop animation
repeat bool Repeat animation
curve Curve Animation curve
shape GlowShape Select glow shape

πŸ›  Advanced Usage Example

GlowEffect(
  glowColor: Colors.cyan,
  glowCount: 4,
  glowRadiusFactor: 1.0,
  duration: const Duration(seconds: 3),
  curve: Curves.elasticOut,
  repeat: true,
  shape: GlowShape.starFive,
  child: Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Text(
      "Glow Kit",
      style: TextStyle(
        color: Colors.white,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

🎯 Best Practices

  • Use darker backgrounds for better glow visibility.
  • Keep glowCount between 2–4 for optimal performance.
  • Adjust glowRadiusFactor carefully to avoid excessive blur.
  • Use animate: false for static glow effects.

πŸ“Œ Performance Notes

Glow Kit is optimized using CustomPainter to ensure:

  • Minimal rebuilds
  • Smooth animations
  • High FPS performance
  • Efficient glow rendering

🀝 Contributing

Contributions are welcome!

If you find bugs or want to request features:

  • Open an issue
  • Submit a pull request

πŸ“„ License

This project is licensed under the MIT License.


πŸ’™ Support

If you like this package, consider giving it a ⭐ on pub.dev and GitHub.


Glow beautifully. Animate smoothly. Build professionally. ✨

Libraries

glow_kit