如何在Flutter中实现目标样式按钮，用CustomPainter完成路径颜色填充

修改方案 #

1. 路径填充实现

你当前代码中paint.style设置为PaintingStyle.stroke为仅描边模式，要实现内部填充需要调整为PaintingStyle.fill，同时需要补全路径点形成封闭区域，才能正确填充目标范围。

2. Row布局合理性

你采用Row划分左侧固定文本区、右侧自适应绘制区的实现方式是合理的，符合需求场景，仅需移除右侧Flexible容器中多余的蓝色背景配置即可。

完整修改代码

Widget部分：

Container(
  height: 10.0.h,
  padding: const EdgeInsets.only(left: 20),
  color: const Color.fromRGBO(211, 237, 241, 1),
  child: Row(
    children: [
      SizedBox(
        width: 70.0.w,
        child: Text(
          "Create an Event",
          textAlign: TextAlign.left,
          style: TextStyle(fontSize: 22.0.sp),
        ),
      ),
      const Flexible(
        child: CustomPaint(
          painter: CurvedPainter(),
          child: SizedBox.expand(),
        ),
      )
    ],
  ),
)

CurvedPainter部分：

class CurvedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.white // 可替换为你需要的填充色
      ..style = PaintingStyle.fill;

    var path = Path();
    path.moveTo(0, 0);
    path.arcToPoint(Offset(-20, size.height * 0.5),
        radius: const Radius.circular(100), clockwise: false);
    path.arcToPoint(Offset(-30, size.height),
        radius: const Radius.circular(70), clockwise: true);
    // 补全路径形成闭合区域
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();

    canvas.drawPath(path, paint);

    // 如需同时保留描边，可新增下方代码
    // var strokePaint = Paint()
    //   ..color = Colors.red
    //   ..style = PaintingStyle.stroke
    //   ..strokeWidth = 2.0;
    // canvas.drawPath(path, strokePaint);
  }

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

内容的提问来源于stack exchange，提问作者Temp use