Changing colour of CustomPaint changes for all previous points Changing colour of CustomPaint changes for all previous points dart dart

Changing colour of CustomPaint changes for all previous points


I think, for different colors you have to use different Paints. I've added small changes to your code, it works.

class DrawPageState extends State<DrawPage> with TickerProviderStateMixin {  ...  List<Painter> painterList = [];  @override  Widget build(BuildContext context) {    ...          child: CustomPaint(            painter: Painter(                points: points, color: color, strokeCap: strokeCap, strokeWidth: strokeWidth, painters: painterList),            size: Size.infinite,          ),    ...                onPressed: () async {                  Color temp;                  temp = await showDialog(                      context: context,                      builder: (context) => ColorDialog());                  if (temp != null) {                    setState(() {                      painterList                          .add(Painter(points: points.toList(), color: color, strokeCap: strokeCap, strokeWidth: strokeWidth));                      points.clear();                      strokeCap = StrokeCap.round;                      strokeWidth = 5.0;                      color = temp;                    });                  }    ...  }}class Painter extends CustomPainter {  List<Offset> points;  Color color;  StrokeCap strokeCap;  double strokeWidth;  List<Painter> painters;  Painter({this.points, this.color, this.strokeCap, this.strokeWidth, this.painters = const []});  @override  void paint(Canvas canvas, Size size) {    for (Painter painter in painters) {      painter.paint(canvas, size);    }    Paint paint = new Paint()      ..color = color      ..strokeCap = strokeCap      ..strokeWidth = strokeWidth;    for (int i = 0; i < points.length - 1; i++) {      if (points[i] != null && points[i + 1] != null) {        canvas.drawLine(points[i], points[i + 1], paint);      }    }  }  @override  bool shouldRepaint(Painter oldDelegate) => oldDelegate.points != points;}


2020, I have a nice solution for this, because the actually chosen doesn't work for me and I see some redundant calls.

So, I start creating a small class:

class _GroupPoints {  Offset offset;  Color color;  _GroupPoints({this.offset, this.color});}

next, i declare my CustomPainter like this:

class Signature extends CustomPainter {  List<_GroupPoints> points;  Color color;  Signature({    this.color,    this.points,  });  @override  void paint(Canvas canvas, Size size) {    Paint paint = new Paint()       // if you need this next params as dynamic, you can move it inside the for part      ..strokeCap = StrokeCap.round      ..strokeWidth = 5.0;    for (int i = 0; i < newPoints.length - 1; i++) {      paint.color = points[i].color;      if (points[i].offset != null && points[i + 1].offset != null) {        canvas.drawLine(points[i].offset, points[i + 1].offset, paint);      }      canvas.clipRect(Offset.zero & size);    }  }  @override  bool shouldRepaint(Signature oldDelegate) => true;}

And on my widget:

...class _MyPageState extends State<MyPage> {  ...  List<_GroupPoints> points = [];  ...                           Container(                                  height: 500,                                  width: double.infinity,                                  child: GestureDetector(                                    onPanUpdate: (DragUpdateDetails details) {                                      setState(() {                                        points = new List.from(points)                                          ..add(                                            new _GroupPoints(                                              offset: details.localPosition,                                              color: myDynamicColor,                                            ),                                          );                                      });                                    },                                    onPanEnd: (DragEndDetails details) {                                      points.add(                                        _GroupPoints(                                            color: myDynamicColor,                                            offset: null),                                      );                                    },                                    child: CustomPaint(                                      painter: Signature(                                        newPoints: points,                                        color: myDynamicColor,                                      ),                                    ),                                  ),                                ),                              }

On this way we can use multiple draws of points with their respective color. Hope this can help anybody.