How to draw a line with a pointed triangle in Flutter?

Question

I am looking at implementing the following design.

How do I achieve the triangular bump on the line as in the image above? I am new to flutter and am clueless on how to get started on this.

https://stackoverflow.com/a/57943257/2252830 – pskink Nov 14 '19 at 09:35 — pskink, Nov 14 '19 at 09:35

score 12 · Accepted Answer · answered Nov 14 '19 at 09:47

Its easy, just you need to understand how to use clippers.

Here is how :

u need to use ClipPath


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightGreen,
      appBar: AppBar(
        title: Text("test"),
        backgroundColor: Colors.deepOrange,
      ),
      body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.red,
            child: Center(
              child: Text("Download"),
            ),
          ),
          ClipPath(
            clipper: TriangleClipper(),
            child: Container(
              color: Colors.red,
              height: 10,
              width: 20,
            ),
          )
        ],
      )),
    );
  }

And add your custom clipper :

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width / 2, size.height);
    path.close();
    return path;
  }

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

Thats it you will get the same result.

It works fine, but the only issue I see is that there is a small gap between the rectangle and this clipped element. — Panduranga Rao Sadhu, Nov 14 '19 at 10:30
@pskink, I just saw. I think that is a much cleaner way of doing it. I was able to get it to work with ShapeBorder. Thank you! — Panduranga Rao Sadhu, Nov 15 '19 at 00:01
now with the ShapeBorder I see a double line added to any Text I put as a child. I am looking to see if there is any configuration to do remove that, couldnt find any — Panduranga Rao Sadhu, Nov 15 '19 at 00:09
but I think thats a different issue https://stackoverflow.com/questions/47114639/yellow-lines-under-text-widgets-in-flutter — Panduranga Rao Sadhu, Nov 15 '19 at 00:28

score 2 · Answer 2 · answered Nov 14 '19 at 10:22

That's it

   ClipPath(
                clipper: ClipperStack(),
                child: Container(
                  height: 100,
                  color: Colors.pink,
                  child: Center(child: Text("DOWNLOAD")),
                ),
              ),

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

    path.moveTo(0.0, 0.0);
    path.lineTo(0.0, size.height-10);
    path.lineTo((size.width / 2 )-5, size.height-10);


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


    path.lineTo((size.width / 2)+5, size.height-10);
    path.lineTo(size.width, size.height-10);


    path.lineTo(size.width, 0.0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

How to draw a line with a pointed triangle in Flutter?

2 Answers2

Linked