Vikum Buttons 🎨

Beautiful Liquid Glass UI buttons for Flutter with stunning glassmorphism effects. Create modern, elegant buttons with blur, transparency, and smooth animations.

✨ Features

• 🌊 Liquid Glass Effect - Beautiful glassmorphic design with frosted glass appearance
• 🎭 Blur & Transparency - Customizable backdrop blur and opacity
• 🎨 Fully Customizable - Colors, gradients, borders, sizes, and more
• 🎬 Smooth Animations - Built-in press animations for better UX
• 💫 Shimmer Effect - Interactive shimmer on button press
• 🎯 Easy to Use - Simple API with sensible defaults
• 📱 Responsive - Works perfectly on all screen sizes
• 🎪 Icon Support - Add icons to your buttons effortlessly

📸 Preview

Check out the example app to see all the beautiful button variations in action!

🚀 Getting Started

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  vikum_buttons: ^0.1.0

Then run:

flutter pub get

Import

import 'package:vikum_buttons/vikum_buttons.dart';

📖 Usage

Basic Button

LiquidGlassButton(
  onPressed: () {
    print('Button pressed!');
  },
  text: 'Liquid Glass',
)

Custom Styled Button

LiquidGlassButton(
  onPressed: () => print('Custom button pressed'),
  text: 'Custom Style',
  width: 250,
  height: 70,
  backgroundColor: Colors.purple.withOpacity(0.3),
  borderColor: Colors.purpleAccent.withOpacity(0.5),
  borderRadius: 35,
  blurAmount: 15,
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
)

Button with Icon

LiquidGlassButton(
  onPressed: () => print('Icon button pressed'),
  text: 'With Icon',
  icon: Icons.favorite,
  iconSize: 28,
  width: 200,
  height: 65,
)

Gradient Button

LiquidGlassButton(
  onPressed: () => print('Gradient button pressed'),
  text: 'Gradient',
  gradient: LinearGradient(
    colors: [
      Colors.blue.withOpacity(0.3),
      Colors.purple.withOpacity(0.3),
    ],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  width: 220,
  height: 65,
)

🎨 Customization Options

Property	Type	Default	Description
onPressed	VoidCallback?	null	Callback when button is pressed
text	String	required	Text displayed on the button
width	double?	200	Width of the button
height	double?	60	Height of the button
backgroundColor	Color?	Colors.white.withOpacity(0.2)	Background color (use semi-transparent)
borderColor	Color?	Colors.white.withOpacity(0.4)	Border color
borderWidth	double	2.0	Width of the border
textStyle	TextStyle?	Default white style	Text style for button text
borderRadius	double	30.0	Border radius (pill shape by default)
blurAmount	double	10.0	Amount of backdrop blur
icon	IconData?	null	Optional icon before text
iconSize	double	24.0	Size of the icon
iconSpacing	double	8.0	Spacing between icon and text
gradient	Gradient?	null	Optional gradient overlay
elevation	double	5.0	Shadow intensity

💡 Tips for Best Results

1. Background: Use the buttons on gradient or image backgrounds for the best glass effect
2. Colors: Keep backgroundColor semi-transparent (opacity 0.1-0.3) for authentic glass look
3. Blur: Adjust blurAmount between 5-20 based on your design needs
4. Contrast: Ensure good contrast between button and background for readability

🎯 Example App

Check out the /example folder for a complete demo app showcasing various button styles and use cases.

To run the example:

cd example
flutter run

🛠️ Requirements

• Flutter SDK: >=3.0.0
• Dart SDK: >=3.0.0 <4.0.0

🤝 Contributing

Contributions are welcome! If you find a bug or want a feature, please open an issue or submit a pull request.

📄 License

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

👨‍💻 Author

Vikum Kalhara

• Website: vikumkalhara.shop
• Email: slmaster4567@gmail.com

🌟 Support

If you like this package, please give it a ⭐ on GitHub and a 👍 on pub.dev!

🔮 Upcoming Features

• More button variants (outlined, elevated, etc.)
• Animated gradient effects
• Ripple animations
• More customization options

---

Made with ❤️ by Vikum Kalhara