如何制作特定的矩形 flutter

Question

I want to make shape like the one below and write on it in my flutter app

How can I make it?

Answer 1

you can use ClipPath

 class _BottomBarState extends State<BottomBar> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ClipPath(
        clipper: MyCustomClipper(),
        child: Container(
          width: 300,
          height: 50,
          color: Colors.red,
          alignment: Alignment.center,
          child:const Text("Your Text"),
        ),
      ),
    ));
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    path.lineTo(size.width, 0);
    path.lineTo(size.width - 50, 25);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    return path;
  }

  @override
  bool shouldReclip(MyCustomClipper oldClipper) => false;
}

Answer 2

You should make a CustomPainter like this:

class MyCustomRectangle extends CustomPainter {
  final Color color;

  const MyCustomRectangle({
    this.color = Colors.red,
  });

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

    var path = Path();

    path.lineTo(size.width, 0);
    path.lineTo(size.width - (size.height / 2), size.height / 2);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => oldDelegate != this;
}

then use it like this:

CustomPaint(
          painter: MyCustomRectangle(),
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 36.0,
              vertical: 8.0,
            ),
            child: Text(
              "Free Home Delivery 30 min",
              style: TextStyle(
                color: Colors.white,
                fontSize: 23.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )

the output: