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

Flutter中，blur插件提供了一种简单而有效的方法来为你的应用添加模糊效果。无论是简单的文本、图片还是复杂的布局，blur都能帮助你实现类似iOS毛玻璃的效果，提升用户体验。

开始使用

添加依赖

在开始之前，你需要将blur包添加到项目的pubspec.yaml文件中作为依赖项：

dependencies:
  blur: ^4.0.0

然后运行flutter pub get以下载并安装该包。

导入库

接下来，在需要使用模糊效果的Dart文件顶部导入blur库：

import 'package:blur/blur.dart';

使用示例

下面是一个完整的示例代码，展示了如何在Flutter应用中使用blur插件创建不同类型的模糊效果。此示例包括了基本的模糊、图片模糊以及带有叠加层的模糊效果。

完整示例代码

import 'package:blur/blur.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: 'Blur Wrapper widget',
      theme: ThemeData(
        primaryColor: Colors.blueAccent,
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Blur Wrapper widget'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double blurValue = 0;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: [
                Expanded(
                  child: Image.asset('assets/cat.png').blurred(
                    blur: blurValue,
                    blurColor: theme.primaryColor,
                    borderRadius: const BorderRadius.horizontal(left: Radius.circular(20)),
                  ),
                ),
                const SizedBox(width: 20.0),
                Expanded(
                  child: Image.asset('assets/cat.png').blurred(
                    colorOpacity: 0.2,
                    borderRadius: const BorderRadius.horizontal(
                      right: Radius.circular(20),
                    ),
                    blur: blurValue,
                    overlay: Text(
                      'Cat',
                      style: theme.textTheme.displayMedium?.copyWith(
                        color: theme.scaffoldBackgroundColor,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Image.asset(
                      'assets/cat.png',
                      scale: 3.5,
                    ),
                    Column(
                      children: [
                        const Icon(Icons.image),
                        Text(
                          'Frost',
                          style: theme.textTheme.headlineMedium,
                        ),
                      ],
                    ).frosted(
                      blur: blurValue,
                      borderRadius: BorderRadius.circular(20),
                      padding: const EdgeInsets.all(8),
                    )
                  ],
                ),
                Blur(
                  blur: blurValue,
                  blurColor: theme.primaryColor,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Blur',
                      style: theme.textTheme.displaySmall,
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              alignment: Alignment.center,
              children: [
                Image.asset(
                  'assets/cat.png',
                  width: MediaQuery.of(context).size.width - 40,
                  height: 200,
                  fit: BoxFit.fill,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'Frost text',
                      style: theme.textTheme.displaySmall,
                    ).frosted(
                      blur: blurValue,
                      padding: const EdgeInsets.all(8),
                    ),
                    const SizedBox(width: 20),
                    const Icon(Icons.image).frosted(
                      padding: const EdgeInsets.all(8),
                      blur: blurValue,
                    ),
                  ],
                ),
              ],
            ),
            Slider(
              value: blurValue,
              max: 20,
              onChanged: (double value) {
                setState(() {
                  blurValue = value;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个包含多个部分的应用界面：

• 第一行：两个扩展的图像，左边是简单的模糊效果，右边则是带有文本覆盖的模糊。
• 第二行：一个居中的图标和文字，使用了“霜”（Frost）效果，并旁边有一个普通文本的模糊框。
• 第三部分：一张全屏宽度的图片上覆盖着模糊的文字和图标。
• 最后：一个滑块用来动态调整所有模糊元素的强度。

通过这个例子，你可以看到blur插件是多么容易集成到你的项目中，并且能够快速地为你的应用添加美观且实用的视觉效果。