[Flutter] How can I use two custom painters in Flutter?

I made 2 custom painters

1.

class DrawTriangle1 extends CustomPainter {
DrawTriangle1() {
painter = Paint()
..shader =
LinearGradient(colors: [Colors.red, Colors.white]).createShader(rect)
..style = PaintingStyle.fill;
}

@override
void paint(Canvas canvas, Size size) {
var path = Path();

path.moveTo(0, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height / 2);
path.close();
canvas.drawPath(path, painter);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}


class DrawTriangle2 extends CustomPainter {
DrawTriangle2() {
painter = Paint()
..shader = LinearGradient(colors: [
Color(0xfffff),
Color(0xff076585),
]).createShader(rect)
..style = PaintingStyle.fill;
}

@override
void paint(Canvas canvas, Size size) {
var path = Path();
path.lineTo(size.width / 2, size.height / 4);
path.lineTo(0, size.height / 2);
path.close();

canvas.drawPath(path, painter);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}


If I use custom painter to make a single shape. The painter paints it from the start of the page.

ListView(
children: <Widget>[
CustomPaint(
painter: DrawTriangle1(),
size: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height), ,
)
],
)


but if I add another one to the listview like this. The second triangle starts at the bottom of the first screen.

ListView(
children: <Widget>[
CustomPaint(
painter: DrawTriangle1(),
size: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height),
),
CustomPaint(
painter: DrawTriangle2(),
size: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height),
)
],
),


How do I make both of them have the same starting point?

Continue reading...