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.