frosted_glass_effect

Description:

frosted glass effect

This package gives a frosted glassy effect to the widgets, images and simple containers.
Features #

Simple Frosted Glass Effect.
Frosted Glass Effect with Image Background.
Any child widget can be used, similar to Container (Use it with no Background Color).
Effect with Background Color.






Getting started #
Add the dependency under the dependencies in pubspec.yaml file:
dependencies:
frosted_glass_effect: ^0.0.1
copied to clipboard
Usage #
Import the package using the code below.
import 'package:frosted_glass_effect/frosted_glass_effect.dart';
copied to clipboard
The Class has the following attributes
GlassContainer({
Widget widget,
double? radius,
double? height,
double? width,
String? backgroundImage,
Color? backgroundColor,
})
copied to clipboard
Remember

Any Custom widget can be passed to this Glass Container. The widget will appear on top of the backgound image or color.
Keep the widget transparent if you are using the background color or image.
The width is automatically expanded restrict the width according to your need.

Example Widgets
GlassContainer(
radius: 20,
// backgroundImage: "assets/bg.jpg",
backgroundColor: Colors.red,
widget: Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
`child: const Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("\$16/mo", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("PRO", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.normal),),
Text("On Sale Now!", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),)
],
)
],)
],),`
),
),
),
copied to clipboard
Use background image from the assets.
Additional information #
You can play with the blurness of the widget by adjusting the SigmaX and SigmaY in the source code of this package.
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
....
),
copied to clipboard
Contribute to the package on https://github.com/SaadTanveer14/frosted_glass_effect
You can open issues and pull requests for contributions.