🌈 Prism Gradients Toolkit #

A beautiful Flutter package that provides stunning, customizable gradient UI components with smooth animations. Transform your app's interface with vibrant gradient buttons, avatars, text fields, containers, and text widgets that bring your design to life!

📱 Screenshots #

Beautiful gradient components in action - see how they transform your app's interface!

✨ Features #

• 🎨 5 Beautiful Gradient Components:

  • AnimatedGradientButton - Interactive buttons with smooth color transitions
  • AnimatedGradientAvatar - Circular avatars with animated gradient borders
  • AnimatedGradientTextField - Text fields with animated gradient borders
  • AnimatedGradientContainer - Containers with customizable gradient backgrounds
  • GradientShaderText - Text with animated gradient effects

• 🚀 Smooth Animations - All components feature buttery-smooth color transitions

• 🎯 Easy to Use - Simple, intuitive API that's plug-and-play ready

• 🎨 Fully Customizable - Control colors, durations, sizes, and more

• 📱 Modern Design - Perfect for contemporary app interfaces

• ⚡ Performance Optimized - Efficient animations that won't slow down your app

See it in action! Check out the screenshots above to see how these beautiful gradient components can transform your app's interface.

🚀 Getting Started #

Add this package to your pubspec.yaml:

dependencies:
  prism_gradients_toolkit: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:prism_gradients_toolkit/prism_gradients_toolkit.dart';

📖 Usage #

🔘 Animated Gradient Button #

AnimatedGradientButton(
  text: 'Click Me!',
  onPressed: () {
    print('Button pressed!');
  },
  width: 200,
  height: 50,
  color1Begin: Colors.purple,
  color1End: Colors.blue,
  color2Begin: Colors.pink,
  color2End: Colors.orange,
)

👤 Animated Gradient Avatar #

AnimatedGradientAvatar(
  radius: 50,
  beginColor1: Colors.purple,
  endColor1: Colors.blue,
  beginColor2: Colors.pink,
  endColor2: Colors.orange,
  duration: Duration(seconds: 3),
  child: Icon(Icons.person, size: 50, color: Colors.white),
)

📝 Animated Gradient TextField #

AnimatedGradientTextField(
  beginColor: Colors.purple,
  endColor: Colors.blue,
  hintText: 'Enter your text...',
)

📦 Animated Gradient Container #

AnimatedGradientContainer(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  startColors: [Colors.purple, Colors.blue],
  endColors: [Colors.pink, Colors.orange],
  duration: Duration(seconds: 4),
  borderRadius: 16.0,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text(
      'Beautiful Container!',
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
)

🎨 Gradient Shader Text #

GradientShaderText(
  text: 'Gradient Text!',
  fontSize: 32,
  fontWeight: FontWeight.bold,
  colors: [Colors.purple, Colors.blue, Colors.pink],
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  duration: Duration(seconds: 2),
)

🎯 Complete Example #

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Prism Gradients Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // Gradient Text
            GradientShaderText(
              text: 'Welcome!',
              fontSize: 32,
              fontWeight: FontWeight.bold,
              colors: [Colors.purple, Colors.blue, Colors.pink],
            ),
            
            // Gradient Avatar
            AnimatedGradientAvatar(
              radius: 50,
              beginColor1: Colors.purple,
              endColor1: Colors.blue,
              beginColor2: Colors.pink,
              endColor2: Colors.orange,
              child: Icon(Icons.person, size: 50, color: Colors.white),
            ),
            
            // Gradient TextField
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: AnimatedGradientTextField(
                beginColor: Colors.purple,
                endColor: Colors.blue,
                hintText: 'Type something...',
              ),
            ),
            
            // Gradient Button
            AnimatedGradientButton(
              text: 'Tap Me!',
              onPressed: () => print('Hello World!'),
              width: 200,
              height: 50,
            ),
          ],
        ),
      ),
    );
  }
}

🎨 Customization Options #

Each component offers extensive customization:

• Colors: Define start and end colors for smooth transitions
• Duration: Control animation speed (default: 2-6 seconds)
• Alignment: Set gradient direction (topLeft, bottomRight, etc.)
• Sizes: Customize dimensions for buttons, avatars, and containers
• Border Radius: Adjust corner rounding for containers and buttons

📱 Platform Support #

• ✅ Android
• ✅ iOS
• ✅ Web
• ✅ macOS
• ✅ Windows
• ✅ Linux

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Issues #

Found a bug or have a feature request? Please file an issue on our GitHub Issues page.

👨‍💻 Author #

Shujan Khawani

• GitHub: @shujan-khawani

⭐ Show Your Support #

Give a ⭐️ if this project helped you!

Made with ❤️ for the Flutter community