Description:

blurbox

BlurBox #

Introduction #
A widget that applies a blur effect to its child widget. #
It works like the Container widget and gives you all the features that the container has,
with the difference that this container is BlurBox
Installation #
dependencies:
blurbox: 0.0.4
copied to clipboard
or
flutter pub add blurbox
copied to clipboard
import 'package:blurbox/blurbox.dart';
copied to clipboard
Usage #
The BlurBox widget takes a child widget and applies a blur effect to it.
You can customize the blur amount, color, elevation, padding, and various other styling options.
BlurBox #
BlurBox(
blur: 5.0, // Adjust the blur amount
color: Colors.white.withOpacity(0.1), // Set a transparent background
child: Text('This text is blurred!'),
)
copied to clipboard
Blur Background! #
BlurBox(
width: double.infinity,
height:double.infinity,
blur: 5.0,
child: const Center(
child: Text(
'Blur Background!',
style: TextStyle(fontSize: 24.0),
),
),
),
copied to clipboard
PresetBlurBox ! #
PresetBlurBox(
preset: BlurPreset.heavy,
child: Center(
child: Text(
'Heavy Blur',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
)
copied to clipboard
AnimatedBlurBox #
AnimatedBlurBox(
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
borderRadius: BorderRadius.circular(20),
child:Center(
child: Text(
'Blur Me!',
),
),
)
copied to clipboard
ThemedBlurBox #
ThemedBlurBox(
child: Text('blur by surface color in the theme'),
)
copied to clipboard
.blurry ext #
Text('BlurBox').blurry(
blur: 10,
color: Colors.blue.withOpacity(0.2),
borderRadius: BorderRadius.circular(15),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
copied to clipboard
Available Widgets #
BlurBox #
The core widget that applies a blur effect to its child.
AnimatedBlurBox #
A widget that provides animated transitions when changing blur values.
ThemedBlurBox #
Automatically adapts the blur box's colors to match the current app theme.
PresetBlurBox #
Offers predefined blur styles (soft, heavy, subtleShadow) for quick and easy use.

Important
When you use blur in a scrollable view and have a problem with rendering, write the physics of your scroll view in the following way to solve your problem.

ListView(
physics: const AlwaysScrollableScrollPhysics()
.applyTo(const BouncingScrollPhysics()
),
children: [...]
)
copied to clipboard
Features #

BlurBox: The main widget for applying blur effects with extensive customization options.
AnimatedBlurBox: Provides smooth animations for changing blur values.
ThemedBlurBox: Automatically adjusts blur and colors based on the current theme of the application.
PresetBlurBox: Offers predefined blur configurations for quick setup.

Customization #
Explore the various properties of BlurBox to customize its appearance and behavior:

keyy:The key of the widget.
blur: Controls the blur intensity (default: 5.0).
color: Sets the background color of the BlurBox (default: transparent).
height and width: Define the size of the BlurBox.
elevation: Applies a shadow effect to the BlurBox.
padding: Adds padding around the child widget.
margin: Adds margin around the BlurBox.
alignment: Positions the child widget within the BlurBox.
clipBehavior: Determines how the child widget is clipped (default:Clip.none).
constraints: Applies constraints to the child widget.
foregroundDecoration: Applies decoration to the foreground of the BlurBox.
borderRadius: Sets the border radius of the BlurBox.
border: Defines a border for the BlurBox.
backgroundBlendMode: Controls how the background and child are blended.
boxShadow: Creates shadows on the BlurBox.
gradient: Applies a gradient to the background of the BlurBox.
image: Sets an image as the background of the BlurBox.
shape: Defines the shape of the BlurBox (default: BoxShape.rectangle).

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter