flutter_blur_shower

Description:

flutter blur shower

Language: English | 中文

flutter_blur_shower #
A Flutter package to apply Gaussian blur to the background of dialogs, popups, and modalBottomSheets.
Features #

Apply Gaussian blur to the background of dialogs.
Apply Gaussian blur to the background of modalBottomSheets.
Easy to use with simple API.

Installation #
Add flutter_blur_shower to your pubspec.yaml file:
dependencies:
flutter_blur_shower: ^0.1.0
copied to clipboard
Then, run flutter pub get to install the package.
Usage #
Initialization #
Before using the blur effects, initialize the FlutterBlurShower with your desired blur sigma and background color:
FlutterBlurShower.init(
sigma: 10.0,
backgroundColor: Colors.black.withOpacity(0.5),
);
copied to clipboard
Show Blur Dialog #
To show a dialog with a blurred background, use showBlurDialog:
import 'package:flutter/material.dart';
import 'package:flutter_blur_shower/flutter_blur_shower.dart';

void _showDialog(BuildContext context) {
showBlurDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Blur Dialog'),
content: Text('This is a dialog with a blurred background.'),
actions: <Widget>[
TextButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
copied to clipboard
Show Blur Modal Bottom Sheet #
To show a modal bottom sheet with a blurred background, use showBlurModalBottomSheet:
import 'package:flutter/material.dart';
import 'package:flutter_blur_shower/flutter_blur_shower.dart';

void _showModalBottomSheet(BuildContext context) {
showBlurModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Center(
child: Text('This is a modal bottom sheet with a blurred background.'),
),
);
},
);
}
copied to clipboard
API Reference #
FlutterBlurShower #


FlutterBlurShower.init({required double sigma, required Color backgroundColor})

Initializes the FlutterBlurShower with the given sigma (blur intensity) and backgroundColor.



FlutterBlurShower.instance

Singleton instance of FlutterBlurShower.



double get sigma

Returns the blur sigma value.



Color get backgroundColor

Returns the background color.



Example #
Here is a full example demonstrating how to use flutter_blur_shower:
import 'package:flutter/material.dart';
import 'package:flutter_blur_shower/flutter_blur_shower.dart';

void main() {
FlutterBlurShower.init(
sigma: 10.0,
backgroundColor: Colors.black.withOpacity(0.5),
);

runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Blur Shower Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
child: Text('Show Blur Dialog'),
onPressed: () => _showDialog(context),
),
ElevatedButton(
child: Text('Show Blur Modal Bottom Sheet'),
onPressed: () => _showModalBottomSheet(context),
),
],
),
),
),
);
}

void _showDialog(BuildContext context) {
showBlurDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Blur Dialog'),
content: Text('This is a dialog with a blurred background.'),
actions: <Widget>[
TextButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}

void _showModalBottomSheet(BuildContext context) {
showBlurModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Center(
child: Text('This is a modal bottom sheet with a blurred background.'),
),
);
},
);
}
}
copied to clipboard
Plans #

Add blur effects for other types of popups.
Provide more customization options.

License #
This project is licensed under the BSD-3-Clause License - see the LICENSE file for details.