很懵逼地实现了Flutter一个异形高斯效果

老规矩先上图

UI设计了一个异形的高斯效果，这个需求看似很合理，但是一开始把我难住了，Flutter实现高斯不难，实现异形也不难，但是高斯加异形。。。what should i do ??

不管了，先撸代码试试看吧。

代码

先实现一个异形

CustomPainter实现一个异形还是很easy的，这里用Path画出相应的轨迹即可

class BottomBarPainter extends CustomPainter {

  //圆弧的半径
  double radius = 40;
  //圆弧两侧圆角半径
  double subRadius = 10;

  @override
  void paint(Canvas canvas, Size size) {
  
    final paint = Paint();
    paint.color = Colors.white.withOpacity(0.3);
    paint.style = PaintingStyle.fill;

    final path = Path();
    //画笔开始的锚点
    path.moveTo(radius, 0);
    //画线至中间圆弧
    path.lineTo((size.width - radius * 2)/2 - 10, 0);
    //画出圆弧左边的第一个圆角
    path.arcTo(Rect.fromCircle(center: Offset((size.width - radius * 2)/2 - subRadius, subRadius), radius: subRadius), -pi * 0.5, pi * 0.5, false);
    //画中间圆弧
    path.arcTo(Rect.fromCircle(center: Offset(size.width/2, 5), radius: radius), -pi, -pi, false);
    //画出圆弧右边的第二个圆角
    path.arcTo(Rect.fromCircle(center: Offset(size.width/2 + radius + subRadius, subRadius), radius: subRadius), pi * .5, pi * 1, false);
    //画出圆弧右侧的直线
    path.lineTo((size.width - radius * 2), 0);
    //画出右侧圆弧
    path.arcTo(Rect.fromCircle(center: Offset(size.width - radius, size.height/2), radius: radius), pi * 1.5, pi, false);
    //画出底部直线
    path.lineTo(radius, size.height);
    //画出左侧圆弧
    path.arcTo(Rect.fromCircle(center: Offset(radius, size.height/2), radius: radius), pi * 0.5, pi * 1, true);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
 }

现在已经实现了异形，并用Colors.white.withOpacity(0.3)做了颜色填充，布局展示代码如下

  Widget _buildBottomBar() {
    return SizedBox(
      height: 80,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: CustomPaint(
          painter: BottomBarPainter(),
        ),
      ),
    );
  }
}

尝试高斯

首先做的尝试就是用BackdropFilter包裹CustomPaint,但是并没有效果

Widget _buildBottomBar() {
  return SizedBox(
      height: 80,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: CustomPaint(
          painter: BottomBarPainter(),
        ),
      ),
  );
}

所以我就开始奇奇怪怪的尝试啦。。。一顿操作之后发现效果竟然实现了，而且代码也是奇奇怪怪的，用自定义的CustomPaint二次包裹！！！（这里有懂哥解释一下为啥吗，我很懵逼。。）

Widget _buildBottomBar() {
  return CustomPaint(
    painter: BottomBarPainter(),
    child: SizedBox(
      height: 80,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: CustomPaint(
          painter: BottomBarPainter(),
        ),
      ),
    ),
  );
}