How to make custom paint like eaten portion in flutter? - flutter

Question

I want to get with custom painter something just like this. How I can draw it? For me not problem borders, gradients. I couldn't draw left part of my assets card. Please, help!

Answer 1

You can use shader on Paint to have gradient effect.
Paint paint = Paint()
..shader = const LinearGradient(
colors: [
Color.fromARGB(255, 141, 23, 15),
Colors.red,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(
Rect.fromLTRB(0, 0, size.width, size.height),
)
Run on dartPad
The shape class
class EatenShape extends CustomPainter {
final double gap = 4.0;
final double radius;
final Radius _border;
final Color canvasColor;
EatenShape({
this.radius = 40,
required this.canvasColor,
}) : _border = Radius.circular(radius);
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..shader = const LinearGradient(
colors: [
Color.fromARGB(255, 141, 23, 15),
Colors.red,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(
Rect.fromLTRB(0, 0, size.width, size.height),
)
..style = PaintingStyle.fill;
final _rect = Rect.fromLTRB(
0,
gap,
size.height - gap * 2,
size.height - gap,
);
///left Circle
Path fullPath = Path()
..addOval(_rect)
///eaten shape
..addRRect(
RRect.fromLTRBAndCorners(
size.height * .5,
0,
size.width,
size.height,
bottomLeft: _border,
topLeft: _border,
bottomRight: _border,
topRight: _border,
),
);
Path drawPath = Path()..addPath(fullPath, Offset.zero);
canvas.drawPath(drawPath, paint);
Paint holoPaint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = gap
..color = canvasColor;
canvas.drawOval(_rect, holoPaint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
I've tried with Path's fillType, not sure about the issue I've faced there. Another thing can be done just using Container with decoration without using CustomPaint.
You can use this paint as
SizedBox(
width: 300,
height: 70,
child: Stack(
children: [
Positioned.fill(
child: CustomPaint(
painter: EatenShape(
canvasColor: Theme.of(context).scaffoldBackgroundColor,
),
),
),
],
),
),