Flutter软边缘模糊效果插件soft_edge_blur的使用

简介

SoftEdgeBlur 是一个Flutter包，它为小部件提供可定制的软渐进模糊效果。通过这个插件，开发者可以轻松地在应用中实现柔和的边缘模糊效果，增强UI的视觉吸引力。

使用方法

导入包

首先，在您的Dart代码中导入 soft_edge_blur 包：

import 'package:soft_edge_blur/soft_edge_blur.dart';

应用软边缘模糊效果

要为任何小部件应用模糊效果，只需将其包装在 SoftEdgeBlur 小部件中，并配置相应的属性。下面是一个简单的例子：

return SoftEdgeBlur(
  edges: [
    EdgeBlur(
      type: EdgeType.topEdge,
      size: 100, // 模糊区域大小
      sigma: 30, // 模糊强度
      controlPoints: [
        ControlPoint(
          position: 0.5,
          type: ControlPointType.visible,
        ),
        ControlPoint(
          position: 1,
          type: ControlPointType.transparent,
        )
      ],
    )
  ],
  child: YourWidget(),
);

自定义选项

您可以根据需要调整以下属性来定制模糊效果：

• Edge Type: 指定要应用模糊效果的边缘类型（顶部、底部、左侧或右侧），也可以同时应用于多个边缘。

  • EdgeType.topEdge
  • EdgeType.bottomEdge
  • EdgeType.leftEdge
  • EdgeType.rightEdge

• Edge Size: 设置模糊区域的大小，决定了模糊效果从边缘延伸的距离。

• Blur Sigma: 调整模糊效果的强度。

• Tint Color: 在模糊区域上添加颜色覆盖。

• Control Points: 定义控制点以调节沿边缘的模糊渐变。每个控制点有两个属性：

  • position: 0.0到1.0之间的值，表示沿边缘的位置。
  • type: 控制点的类型，如可见(ControlPointType.visible)或透明(ControlPointType.transparent)。

示例代码

下面是一个完整的示例应用程序，展示了如何使用 SoftEdgeBlur 创建不同的UI场景：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SoftEdgeBlur Demo',
      theme: ThemeData.dark(),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SoftEdgeBlur Examples'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ExampleScreen()),
                );
              },
              child: const Text('View Example'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example Screen'),
      ),
      body: Center(
        child: SoftEdgeBlur(
          edges: [
            EdgeBlur(
              type: EdgeType.topEdge,
              size: 100,
              sigma: 30,
              controlPoints: [
                ControlPoint(
                  position: 0.5,
                  type: ControlPointType.visible,
                ),
                ControlPoint(
                  position: 1,
                  type: ControlPointType.transparent,
                )
              ],
            )
          ],
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Blurred Edge!',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

此示例创建了一个包含按钮的应用程序，点击按钮后会导航到一个新的页面，在该页面上展示了一个带有顶部软边缘模糊效果的蓝色方块。您可以通过修改 edges 参数来自定义模糊效果的具体设置，例如改变模糊的方向、范围和强度等。

实时体验

如果您想立即查看效果而无需安装环境，可以访问 在线演示 页面进行尝试。

希望这些信息对您有所帮助！如果有任何问题或者需要进一步的帮助，请随时提问。