flutter - drawing app using CustomPainter has low framerate, how to optimize

Question

I'm creating a simple drawing app but it gets laggy when there are a lot of drawings. I'm using CustomPainter to render the points that were tapped.This what happens.

Is my way of rendering the points into a paint correct? Or there is a optimize way of doing it. I'm currently a beginner and flutter is my first mobile development

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: TestDrawBoard(),
        ),
      ),
    );
  }
}


class TestDrawBoard extends StatefulWidget {
  @override
  _TestDrawBoardState createState() => _TestDrawBoardState();
}

class _TestDrawBoardState extends State<TestDrawBoard> {

  final _drawPoints = <Offset>[];

  _drawAction(panDetails){
    final location = panDetails.localPosition;
    setState(() {
      _drawPoints.add(location);
    });
  }

  @override
  Widget build(BuildContext context) {

    final size = MediaQuery.of(context).size;
    return GestureDetector(
        onPanStart: (details){
          _drawAction(details);
        },
        onPanUpdate: (details){
          _drawAction(details);
        },
        onPanEnd: (details){
          setState(() {
            _drawPoints.add(null);
          });
        },
        child: CustomPaint(
          painter: TestPainter(drawPoints: _drawPoints),
          child: Container(
           height: size.height,
            width: size.width,
          ),
        ),
      );
  }
}



class TestPainter extends CustomPainter {
  final List<Offset> drawPoints;

  TestPainter({@required this.drawPoints,}) : super();

  final  myPaint = Paint()
    ..isAntiAlias = true
    ..strokeWidth = 5.0
    ..strokeCap = StrokeCap.round
    ..color = Colors.red;

  @override
  void paint(Canvas canvas, Size size) {
    for (var i = 0; i < drawPoints.length; i++) {
      if (shouldDrawLine(i)) {
        canvas.drawLine(drawPoints[i], drawPoints[i + 1], myPaint);
      } else if (shouldDrawPoint(i)) {
        canvas.drawPoints(PointMode.points, [drawPoints[i]], myPaint);
      }
    }
  }
  bool shouldDrawPoint(int i) => drawPoints[i] != null && i + 1 < drawPoints.length && drawPoints[i + 1] == null;
  bool shouldDrawLine(int i) =>
      drawPoints[i] != null && i + 1 < drawPoints.length && drawPoints[i + 1] != null;

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

question from:https://stackoverflow.com/questions/65895936/drawing-app-using-custompainter-has-low-framerate-how-to-optimize

Answer 1

Waitting for answers