Flutter图像边框模糊处理插件border_blur的使用

border_blur

创建一个带有模糊边框且不包含中心区域的图像效果。

参数

• Border Radius（圆角半径）
• Padding（内边距）
• Blur value（模糊值）

使用方法

Container(
  width: 500,
  height: 300,
  child: BorderBlur(
    blur: 2.0,       // 模糊值
    padding: 30.0,   // 内边距
    radius: radius,  // 圆角半径
  ),
)

示例代码

以下是一个完整的示例代码，展示如何在Flutter中使用border_blur插件来实现图像边框模糊效果。

import 'package:border_blur/border_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 const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final double height = 500.0;   // 容器高度
  final double width = 300.0;    // 容器宽度
  final double radius = 16.0;    // 圆角半径

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white, // 背景颜色
      body: SizedBox.expand(         // 展开屏幕大小
        child: Stack(
          alignment: Alignment.center, // 子组件居中对齐
          children: [
            // 图像容器
            Center(
              child: Container(
                width: width,
                height: height,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(radius), // 设置圆角
                  child: Image.asset(
                    "images/image.jpeg", // 图像资源路径
                    fit: BoxFit.cover,     // 图像填充方式
                  ),
                ),
              ),
            ),

            // 边框模糊容器
            Center(
              child: Container(
                width: width,
                height: height,
                child: BorderBlur(
                  blur: 2.0,           // 模糊值
                  padding: 30.0,       // 内边距
                  radius: radius,      // 圆角半径
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 示例圆形渐变球
class GradientBall extends StatelessWidget {
  final List<Color> colors;   // 渐变颜色列表
  final Size size;            // 球体尺寸

  const GradientBall({
    Key? key,
    required this.colors,
    this.size = const Size.square(150),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size.height,
      width: size.width,
      decoration: BoxDecoration(
        shape: BoxShape.circle, // 圆形形状
        gradient: LinearGradient(
          colors: colors,       // 渐变颜色
        ),
      ),
    );
  }
}

效果图

通过上述代码和配置，您可以轻松实现带有模糊边框的图像效果。请确保已将border_blur插件添加到您的pubspec.yaml文件中：

dependencies:
  border_blur: ^0.1.0