How can I use two custom painters in Flutter?

Question

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?

score 1 · Answer 1 · answered Apr 18 '20 at 05:29

ListView build each and every it's child one after another, so it is expected behaviour if you want to do some work at same place the stack widget is handy. it will allow you to draw both custom painter at same place.

So replace you ListView widget with stack Widget will solve you issue.

Stack( //change 
          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),
            )
          ],
        ),

score 1 · Answer 2 · answered Jun 28 '21 at 01:13

Use a Stack.

@override
  Widget build(BuildContext context) {
    return Stack(children: [
            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 can I use two custom painters in Flutter?

2 Answers2