frosted_glass_effect 0.0.1 frosted_glass_effect: ^0.0.1 copied to clipboard
This package gives a frosted glassy effect to the widgets, images and simple containers.
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
Usage #
Import the package using the code below.
import 'package:frosted_glass_effect/frosted_glass_effect.dart';
The Class has the following attributes
GlassContainer({
Widget widget,
double? radius,
double? height,
double? width,
String? backgroundImage,
Color? backgroundColor,
})
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),)
],
)
],)
],),`
),
),
),
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),
....
),
Contribute to the package on https://github.com/SaadTanveer14/frosted_glass_effect You can open issues and pull requests for contributions.