如何在Flutter中创建带有圆角的自定义模糊形状 [英] How to create a custom blured shape with rounded corners in Flutter

问题描述

我想绘制一个自定义形状，类似于下图所示的标记区域。有没有办法用模糊效果裁剪此自定义形状，然后指定拐角的半径？

I want to draw a custom shape similar to the marked area of below image. Is there a way to clip this custom shape with blur effect and then specify the radius for the corners?

推荐答案

这是
完整示例

< img src = https://i.stack.imgur.com/gMson.jpg alt =在此处输入图片描述 />

class Customclipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = new Path();
    path.lineTo(0.0, size.height - 20);
    path.quadraticBezierTo(0.0, size.height, 20.0, size.height);
    path.lineTo(size.width - 20.0, size.height);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height - 20);
    path.lineTo(size.width, 50.0);
    path.quadraticBezierTo(size.width, 30.0, size.width - 20.0, 30.0);
    path.lineTo(20.0, 5.0);
    path.quadraticBezierTo(0.0, 0.0, 0.0, 20.0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

1. 使用 quadraticBezierTo 创建所有圆角>


2. 在ClipPath中创建一个容器


3. 使用Colors.white70作为容器颜色

1. Created all the rounded corners using quadraticBezierTo
2. Created a Container inside a ClipPath
3. Used the Colors.white70 for the container color

这篇关于如何在Flutter中创建带有圆角的自定义模糊形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！