I've created a circular button which in this case is RawMaterialButton
and I'm trying to use CustomPaint
to create a triangle shape in the centre of it, but it's saying ShapesPainter
is not defined for the class ClearButton'. I tried other buttons but couldn't get any of them to accept
ShapesPainter`.
RawMaterialButton(
child: CustomPaint(
painter: ShapesPainter(),
child: Container(
height: 40,
),
),
onPressed: onPressed,
constraints: BoxConstraints.tightFor(
width: 90.0,
height: 90.0,
),
shape: RoundedRectangleBorder(),
fillColor: Colors.transparent,
)
Which button type should be used with ShapesPainter
or how can I otherwise create a circular button with a triangle or another shape in the centre?
This is the button I was trying to create which as you can see is basically a circular button with a triangle.
create CustomClipper
class CustomTriangleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height);
path.lineTo(0, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
and then Usage :
ClipPath(
clipper: CustomTriangleClipper(),
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [Color(0xffF25D50), Color(0xffF2BB77)],
),
),
),
);
You can do it by creating your own custom painter implementation.
Triangle Painter
class TrianglePainter extends CustomPainter {
final Color strokeColor;
final PaintingStyle paintingStyle;
final double strokeWidth;
TrianglePainter({this.strokeColor = Colors.black, this.strokeWidth = 3, this.paintingStyle = PaintingStyle.stroke});
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = strokeColor
..strokeWidth = strokeWidth
..style = paintingStyle;
canvas.drawPath(getTrianglePath(size.width, size.height), paint);
}
Path getTrianglePath(double x, double y) {
return Path()
..moveTo(0, y)
..lineTo(x / 2, 0)
..lineTo(x, y)
..lineTo(0, y);
}
@override
bool shouldRepaint(TrianglePainter oldDelegate) {
return oldDelegate.strokeColor != strokeColor ||
oldDelegate.paintingStyle != paintingStyle ||
oldDelegate.strokeWidth != strokeWidth;
}
}
USAGE
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RawMaterialButton(
onPressed: () {},
child: CustomPaint(
painter: TrianglePainter(
strokeColor: Colors.blue,
strokeWidth: 10,
paintingStyle: PaintingStyle.fill,
),
child: Container(
height: 180,
width: 200,
),
),
),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With