awesome_glass_ui 0.0.1

A beautiful and customizable Flutter package for creating glassmorphism (frosted glass) UI effects with ease.

Awesome Glass UI

Features

✨ Easy to Use - Simple API with sensible defaults
🎨 Highly Customizable - Control blur, opacity, borders, shadows, and more
🌈 Gradient Support - Use gradients for even more stunning effects
📱 Responsive - Works seamlessly across all screen sizes
⚡ Performance Optimized - Efficient rendering with Flutter's BackdropFilter
🎯 Well Documented - Comprehensive documentation and examples

Installation

Add awesome_glass_ui to your pubspec.yaml:

dependencies:
  awesome_glass_ui: ^0.0.1

Then run:

flutter pub get

Quick Start

import 'package:awesome_glass_ui/awesome_glass_ui.dart';

GlassContainer(
  width: 300,
  height: 200,
  child: Text('Hello, Glass!'),
)

Usage Examples

Basic Usage

GlassContainer(
  child: Column(
    children: [
      Text('Title', style: TextStyle(color: Colors.white)),
      Text('Subtitle', style: TextStyle(color: Colors.white70)),
    ],
  ),
)

Custom Blur and Opacity

GlassContainer(
  blur: 20.0,
  opacity: 0.2,
  child: Text('High blur effect'),
)

Custom Border and Shadow

GlassContainer(
  borderRadius: 25.0,
  borderWidth: 2.0,
  borderColor: Colors.white.withOpacity(0.3),
  shadowBlurRadius: 30.0,
  child: Text('Custom styling'),
)

With Gradient Background

GlassContainer(
  blur: 15.0,
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white.withOpacity(0.2),
      Colors.white.withOpacity(0.1),
    ],
  ),
  child: Text('Gradient glass'),
)

Full-Width Container

GlassContainer(
  width: double.infinity,
  padding: EdgeInsets.all(20),
  child: YourContent(),
)

Glass Buttons

GlassContainer(
  borderRadius: 30.0,
  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  child: Text('Glass Button', style: TextStyle(color: Colors.white)),
)

API Reference

GlassContainer

A customizable container widget that creates a glassmorphism effect.

Properties

Property	Type	Default	Description
child	Widget?	null	The child widget to display inside the container
width	double?	null	The width of the container
height	double?	null	The height of the container
blur	double	10.0	The blur intensity (sigmaX and sigmaY)
opacity	double	0.1	The opacity of the background (0.0 - 1.0)
borderRadius	double	15.0	The border radius of the container
borderWidth	double	1.5	The border width
borderColor	Color	Color.fromRGBO(255, 255, 255, 0.2)	The border color
backgroundColor	Color?	null	Custom background color (overrides default)
gradient	Gradient?	null	Gradient for background (overrides backgroundColor)
shadowColor	Color	Color.fromRGBO(0, 0, 0, 0.1)	The shadow color
shadowOffset	Offset	Offset(0, 4)	The shadow offset
shadowBlurRadius	double	20.0	The shadow blur radius
shadowSpreadRadius	double	0.0	The shadow spread radius
padding	EdgeInsetsGeometry	EdgeInsets.all(20.0)	The padding inside the container
margin	EdgeInsetsGeometry	EdgeInsets.zero	The margin around the container

Best Practices

1. Background Matters: Glassmorphism works best over colorful or textured backgrounds. Use gradients or images for best results.

2. Contrast: Ensure text inside glass containers has sufficient contrast. Use white or light-colored text on dark backgrounds.

3. Performance: Higher blur values can impact performance. Use values between 5-20 for optimal balance.

4. Layering: Combine multiple glass containers with different opacities for depth.

5. Accessibility: Ensure your glass effects don't compromise readability and accessibility.

Example App

Check out the example/ directory for a complete demo app showcasing various glass container configurations.

Run the example:

cd example
flutter run

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Acknowledgments

• Inspired by modern glassmorphism design trends
• Built with Flutter's powerful BackdropFilter widget

---

Made with ❤️ for the Flutter community