Flutter图像模糊效果插件flutter_blur_shower的使用

flutter_blur_shower

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

特性

• 对对话框背景应用高斯模糊。
• 对模态底部面板背景应用高斯模糊。
• 简单易用的API。

安装

在 pubspec.yaml 文件中添加 flutter_blur_shower 依赖：

dependencies:
  flutter_blur_shower: ^0.1.0

然后运行 flutter pub get 来安装包。

使用

初始化

在使用模糊效果之前，使用 FlutterBlurShower 进行初始化，设置所需的模糊强度和背景颜色：

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

显示模糊对话框

要显示一个带有模糊背景的对话框，可以使用 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: [
          TextButton(
            child: Text('Close'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

显示模糊模态底部面板

要显示一个带有模糊背景的模态底部面板，可以使用 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.'),
        ),
      );
    },
  );
}

API 参考

FlutterBlurShower

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

  使用给定的 sigma（模糊强度）和 backgroundColor 初始化 FlutterBlurShower。

• FlutterBlurShower.instance

  FlutterBlurShower 的单例实例。

• double get sigma

  返回模糊强度值。

• Color get backgroundColor

  返回背景颜色。

示例

以下是一个完整的示例，演示如何使用 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(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  void _showModalBottomSheet(BuildContext context) {
    showBlurModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return const SizedBox(
          height: 200,
          child: Center(
            child: Text('This is a modal bottom sheet with a blurred background.'),
          ),
        );
      },
    );
  }
}