Skip to content

Instantly share code, notes, and snippets.

@Hiteshpatel10
Created February 27, 2024 16:54
Show Gist options
  • Save Hiteshpatel10/be3d01897b79af78ba53d7873c315dc6 to your computer and use it in GitHub Desktop.
Save Hiteshpatel10/be3d01897b79af78ba53d7873c315dc6 to your computer and use it in GitHub Desktop.
# BlurContainer Widget A reusable Flutter widget that wraps its child with a blurred container. It provides customizable properties such as blur level, elevation, padding, color, and border radius, allowing for flexible usage in creating visually appealing UI elements. ### Features: - Applies a blur effect to its child within a container. - Adju…
import 'dart:ui';
import 'package:flutter/material.dart';
class BlurContainer extends StatelessWidget {
final Widget child;
final double? height;
final double? width;
final double elevation;
final double blur;
final EdgeInsetsGeometry padding;
final Color color;
final BorderRadius borderRadius;
const BlurContainer({
Key? key,
required this.child,
this.height,
this.width,
this.blur = 5,
this.elevation = 0,
this.padding = const EdgeInsets.all(8),
this.color = Colors.transparent,
this.borderRadius = const BorderRadius.all(Radius.circular(20)),
}) : super(key: key);
const BlurContainer.square({
Key? key,
required this.child,
double? dimension,
this.blur = 5,
this.elevation = 0,
this.padding = const EdgeInsets.all(8),
this.color = Colors.transparent,
this.borderRadius = const BorderRadius.all(Radius.circular(20)),
}) : width = dimension,
height = dimension,
super(key: key);
const BlurContainer.expand({
Key? key,
required this.child,
this.blur = 5,
this.elevation = 0,
this.padding = const EdgeInsets.all(8),
this.color = Colors.transparent,
this.borderRadius = BorderRadius.zero,
}) : width = double.infinity,
height = double.infinity,
super(key: key);
@override
Widget build(BuildContext context) {
return Material(
elevation: elevation,
color: Colors.transparent,
borderRadius: borderRadius,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
child: Container(
height: height,
width: width,
padding: padding,
color: color,
child: child,
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment