Flutter图像模糊处理插件blurbox的使用

Introduction

BlurBox 是一个可以对其子组件应用模糊效果的Widget。它的工作方式类似于 Container 组件，并提供了 Container 的所有功能，不同之处在于这个容器是模糊的。

Installation

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

dependencies:
  blurbox: 0.0.4

或者使用命令行：

flutter pub add blurbox

然后在 Dart 文件中导入：

import 'package:blurbox/blurbox.dart';

Usage

BlurBox

BlurBox 组件可以对子组件应用模糊效果。你可以自定义模糊程度、背景颜色、阴影、内边距等样式选项。

BlurBox(
  blur: 5.0, // 调整模糊程度
  color: Colors.white.withOpacity(0.1), // 设置透明背景
  child: Text('This text is blurred!'),
)

Blur Background!

将整个背景模糊化：

BlurBox(
  width: double.infinity,
  height: double.infinity,
  blur: 5.0, 
  child: const Center(
    child: Text(
      'Blur Background!',
      style: TextStyle(fontSize: 24.0),
    ),
  ),
)

PresetBlurBox

使用预设的模糊样式：

PresetBlurBox(
  preset: BlurPreset.heavy,
  child: Center(
    child: Text(
      'Heavy Blur',
      style: TextStyle(fontSize: 24, color: Colors.white),
    ),
  ),
)

AnimatedBlurBox

提供动画过渡效果的模糊组件：

AnimatedBlurBox(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  borderRadius: BorderRadius.circular(20),
  child: Center(
    child: Text(
      'Blur Me!',
    ),
  ),
)

ThemedBlurBox

根据当前应用主题自动调整模糊和颜色：

ThemedBlurBox(
  child: Text('blur by surface color in the theme'),
)

.blurry ext

使用扩展方法快速应用模糊效果：

Text('BlurBox').blurry(
  blur: 10,
  color: Colors.blue.withOpacity(0.2),
  borderRadius: BorderRadius.circular(15),
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
)

Available Widgets

• BlurBox: 核心组件，用于应用模糊效果。
• AnimatedBlurBox: 提供平滑动画效果的模糊组件。
• ThemedBlurBox: 自动适应当前应用主题的模糊组件。
• PresetBlurBox: 提供预设模糊样式的组件。

Important

在可滚动视图中使用模糊效果时，如果遇到渲染问题，可以通过以下方式解决：

ListView(
  physics: const AlwaysScrollableScrollPhysics().applyTo(const BouncingScrollPhysics()),
  children: [...],
)

Features

• BlurBox: 主要组件，用于应用模糊效果，具有广泛的自定义选项。
• AnimatedBlurBox: 提供平滑动画效果的模糊组件。
• ThemedBlurBox: 根据当前应用主题自动调整模糊和颜色。
• PresetBlurBox: 提供预设模糊配置，方便快速设置。

Customization

探索 BlurBox 的各种属性以自定义其外观和行为：

• key: 组件的键。
• blur: 控制模糊强度（默认值：5.0）。
• color: 设置 BlurBox 的背景颜色（默认值：透明）。
• height 和 width: 定义 BlurBox 的大小。
• elevation: 应用阴影效果。
• padding: 添加子组件周围的内边距。
• margin: 添加 BlurBox 周围的外边距。
• alignment: 定位子组件在 BlurBox 中的位置。
• clipBehavior: 确定子组件如何被裁剪（默认值：Clip.none）。
• constraints: 应用子组件的约束。
• foregroundDecoration: 应用前景装饰。
• borderRadius: 设置 BlurBox 的圆角。
• border: 定义 BlurBox 的边框。
• backgroundBlendMode: 控制背景和子组件的混合模式。
• boxShadow: 创建 BlurBox 的阴影。
• gradient: 应用渐变背景。
• image: 设置 BlurBox 的背景图片。
• shape: 定义 BlurBox 的形状（默认值：BoxShape.rectangle）。

示例代码

import 'package:blurbox/blurbox.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BlurBox Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
            surface: const Color(0xff19191B),
            onSurface: const Color(0xffffffff),
            seedColor: const Color(0xff19191B)),
        scaffoldBackgroundColor: const Color(0xff19191B),
      ),
      home: const ExampleOne(
        title: 'BlurBox Example',
      ),
    );
  }
}

class ExampleOne extends StatelessWidget {
  final String title;
  const ExampleOne({
    super.key,
    required this.title,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'BlurBox Example',
        ),
      ),
      body: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  'assets/images/test.png',
                ),
              ),
            ),
          ),
          Positioned(
            right: 20,
            bottom: 250,
            child: PresetBlurBox(
              width: 200,
              height: 150,
              borderRadius: BorderRadius.circular(40),
              border: Border.all(
                color: const Color(0xff4d4d4d),
              ),
              child: const Center(
                child: Text(
                  'BlurBox!',
                  style: TextStyle(fontSize: 24.0),
                ),
              ),
            ),
          ),
          Positioned(
            left: 20,
            top: 175,
            child: BlurBox(
              width: 200,
              height: 150,
              color: Colors.white,
              borderRadius: BorderRadius.circular(40),
              border: Border.all(
                color: const Color(0xff4d4d4d),
              ),
              blur: 10, // 调整模糊程度
              gradient: const LinearGradient(
                colors: [
                  Color(0x30FBA91C),
                  Color(0x20E05688),
                ],
              ),
              child: const Center(
                child: Text(
                  'BlurBox!',
                  style: TextStyle(fontSize: 24.0),
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 50,
            right: 30,
            left: 30,
            child: ElevatedButton.icon(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const ExampleTwo(),
                  ),
                );
              },
              icon: const Icon(Icons.arrow_back_ios_rounded),
              label: const Text('Go to ExampleTwo'),
            ),
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('BlurBox Example'),
      ),
      body: Stack(children: [
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/test.png'),
            ),
          ),
        ),
        const AnimatedBlurBox(
          duration: Duration(milliseconds: 1000),
          child: Center(
            child: Text(
              'Blur Background!',
              style: TextStyle(fontSize: 24.0),
            ),
          ),
        ),
      ]),
    );
  }
}

以上代码展示了如何在 Flutter 应用中使用 blurbox 插件来实现图像模糊效果。希望这些示例对你有所帮助！