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 #

💡 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.flutter-io.cn!

🔮 Upcoming Features #

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

Made with ❤️ by Vikum Kalhara