Flutter CustomPaint performance - flutter

Question

I'm currently building an App that has a lot of vector lines that I want to animate.
I have tried using flutter_svg but ultimatly wasn't able to make individual lines tapable because only the top svg inside the stack is changed.
The new solution was to use this tool: https://fluttershapemaker.com/ which is recommended by flutter_svg to use.
This converted my SVG to about 4000 lines of geometry data.
I started to add an animation that lets all lines glow up and then go back to darkness.
But the performance is quite terrible.
It starts with about 10 fps and after a minute or so goes down to 0.5fps and lower.
This is mainly due to the rendering engine.
This is the code I'm working on currently:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'svgtemp.dart';
import 'dart:math';
import 'dart:ui';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: Picture(),
);
}
}
class Picture extends StatefulWidget {
const Picture({Key? key}) : super(key: key);
#override
State<Picture> createState() => _PictureState();
}
class _PictureState extends State<Picture> with SingleTickerProviderStateMixin {
late Size size_;
final Random rng = Random();
static const double pictureScalar = 1.0;
static const double backgroundScalar = 1.00;
Color color_ = Colors.black;
late AnimationController _controller;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 1500),
vsync: this,
)..repeat(reverse: true);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
size_ = Size(
MediaQuery.of(context).size.width, MediaQuery.of(context).size.height);
final pictureElements = <Widget>[];
for (var i = 0; i < svgdata.length; i++) {
pictureElements.add(createPicturePart(i, context));
}
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Material(
child: Stack(
alignment: Alignment.center,
children: backgroundElements + pictureElements),
color: Colors.black,
)
],
);
}
Widget createPicturePart(int id, BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
color_ = Color.fromARGB(
0xFF, rng.nextInt(255), rng.nextInt(255), rng.nextInt(255));
});
},
child: CustomPaint(
willChange: true,
size: Size(
(pictureScalar * size_.width),
(pictureScalar * size_.width * 1.4142756349952963)
.toDouble()),
painter: RPSCustomPainter(id, color_,
CurvedAnimation(parent: _controller, curve: Curves.easeInOut))),
);
}
}
class RPSCustomPainter extends CustomPainter {
final double maxval = 0.4;
final int id_;
final Color color_;
final Animation<double> animation_;
final Path path_ = Path();
RPSCustomPainter(this.id_, this.color_, this.animation_)
: super(repaint: animation_);
#override
void paint(Canvas canvas, Size size) {
path_.moveTo(
size.width * svgdata[id_][0][0], size.height * svgdata[id_][0][1]);
for (var i = 1; i < svgdata[id_].length; i++) {
path_.cubicTo(
size.width * svgdata[id_][i][0],
size.height * svgdata[id_][i][1],
size.width * svgdata[id_][i][2],
size.height * svgdata[id_][i][3],
size.width * svgdata[id_][i][4],
size.height * svgdata[id_][i][5]);
}
path_.close();
Paint paint0Fill = Paint()..style = PaintingStyle.fill;
int colorvalue = (animation_.value * maxval * 255).toInt();
paint0Fill.color =
Color.fromARGB(0xFF, colorvalue, colorvalue, colorvalue);
canvas.drawPath(path_, paint0Fill);
}
#override
bool shouldRepaint(RPSCustomPainter oldDelegate) {
return animation_ != oldDelegate.animation_;
}
#override
bool hitTest(Offset position) {
return path_.contains(position);
}
}
I've also read the flutter performance articles but they are pretty broad and I couldn't find anything to apply here.
Maybe you have any idea?
Thanks in advance!
P.S. I can add the svgtemp.dart if you need it. (~4000 lines)