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.
1
-
1stackoverflow.com/a/57943257/2252830pskink– pskink2019-11-14 09:35:11 +00:00Commented Nov 14, 2019 at 9:35
Add a comment
|
2 Answers
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.
5 Comments
Panduranga Rao Sadhu
It works fine, but the only issue I see is that there is a small gap between the rectangle and this clipped element.
pskink
@Mysticmonk did you see the link I posted?
Panduranga Rao Sadhu
@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
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
but I think thats a different issue stackoverflow.com/questions/47114639/…
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;
}
