Flutter 仿闲鱼底部NavigationBar凸起

c777f84bf5fde7a1b8a75862d3bf113d.jpeg

这个圆的两侧圆弧边框明显是做了处理的，可能是ui给的一个整体图
我在想能否用代码实现，于是乎分析了一下

闲鱼.png

看箭头处，明显是有了两个不规则三角圆弧，这个怎么实现呢 ？
我第一个想法就是画一个三角形，然后斜线使用贝赛曲线来实现，似乎就是圆角的效果？

image.png

image.png

image.png

，
然后放到闲鱼的图比较一下，似乎可以

image.png

image.png

实现代码，首先是CustomPainter，曲线使用quadraticBezierTo实现，这里原本是

quadraticBezierTo( size.width * 0.5, size.height*0.5, size.width,0)，后面发现高度不需要改变，改成如下
quadraticBezierTo( size.width * 0.5, size.height, size.width,0)

import 'package:flutter/material.dart';

class SPainter extends CustomPainter {
  final Color fillColor;

  SPainter({
    this.fillColor = Colors.blue,
  });

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

    final path = Path()
      ..moveTo(0, size.height) // 起点：左下角
      ..quadraticBezierTo(
        size.width * 0.5, // 控制点 x（可调整）
        size.height, // 控制点 y（可调整）
        size.width, // 终点：右上角
        0,
      )
     // 原本底部长度是整个 宽度 ..lineTo(size.width, size.height) ，后面改成一半
      ..lineTo(size.width/2, size.height) // 底线：右下角
      ..close(); // 闭合路径（回到左下角）

    canvas.drawPath(path, paint);
  }

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

预览

Center(
          child: CustomPaint(
            size: Size(80, 25), // 自定义大小
            painter: SPainter(fillColor: Colors.blue),
          ),
        ),

看看对比图，上方是没有加自定义圆弧的，过度得不是很自然，下方就是类似闲鱼的效果，图片截图被压缩了，看起来有点模糊，实际运行起来是没有问题的

image.png

完整代码，待续...