Flutter减速带（Speed Humps）UI设计求助：完成半圆弧及侧边线条

直接用CustomPaint就能搞定这种自定义UI，下面是完整的实现代码，包含你要的两种样式（斜线横线形态+半圆弧形态）：

import 'package:flutter/material.dart';

class SpeedHumpWidget extends StatelessWidget {
  final double width;
  final double height;
  final Color color;

  const SpeedHumpWidget({
    super.key,
    this.width = 200,
    this.height = 40,
    this.color = Colors.grey,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: CustomPaint(
        painter: SpeedHumpPainter(color: color),
      ),
    );
  }
}

class SpeedHumpPainter extends CustomPainter {
  final Color color;

  SpeedHumpPainter({required this.color});

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

    final path = Path();

    // ====== 样式1：类似 `/----------_ __` 的斜线横线形态 ======
    path.moveTo(0, size.height);
    path.lineTo(size.width * 0.1, 0); // 左侧斜线
    path.lineTo(size.width * 0.9, 0); // 顶部横线
    path.lineTo(size.width, size.height); // 右侧斜线
    path.lineTo(0, size.height); // 闭合路径

    // ====== 样式2：半圆弧版本（取消注释即可切换） ======
    // path.moveTo(0, size.height);
    // path.lineTo(size.width * 0.2, size.height); // 左侧底部横线
    // // 左侧半圆弧
    // path.arcToPoint(
    //   Offset(size.width * 0.3, 0),
    //   radius: Radius.circular(size.height),
    //   clockwise: false,
    // );
    // path.lineTo(size.width * 0.7, 0); // 顶部横线
    // // 右侧半圆弧
    // path.arcToPoint(
    //   Offset(size.width * 0.8, size.height),
    //   radius: Radius.circular(size.height),
    //   clockwise: false,
    // );
    // path.lineTo(size.width, size.height); // 右侧底部横线
    // path.lineTo(0, size.height); // 闭合路径

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return (oldDelegate as SpeedHumpPainter).color != color;
  }
}

使用说明 #

• 直接在页面中调用 SpeedHumpWidget(width: 250, height: 50, color: Colors.orange) 即可。
• 修改width/height可以调整减速带的尺寸，color可以自定义颜色。
• 切换样式只需要注释/取消注释对应的Path代码块就行。

内容的提问来源于stack exchange，提问作者Sheth Deniyal