I am developing a Flutter app that visualizes audio data on a timeline. Each node on the timeline corresponds to a specific position and duration of the audio. These nodes contain text and interactive buttons.
Rebuild-Based Approach
Transform-Based Approach
AnimatedBuilder
CustomPaint
CustomPaint is faster but makes implementing user interactions (e.g., button clicks, drag-and-drop) very challenging.I chose Flutter for its cross-platform support and a rich set of pre-built widgets that accelerate development. However, I am struggling to find an efficient solution to this problem.
CustomPaint, how can user interactions (e.g., clicks, drags) be implemented efficiently for each node?I would greatly appreciate any advice, suggestions, or alternative approaches. Thank you!
I am developing a Flutter app that visualizes audio data on a timeline. Each node on the timeline corresponds to a specific position and duration of the audio. These nodes contain text and interactive buttons.
Rebuild-Based Approach
Transform-Based Approach
AnimatedBuilder
CustomPaint
CustomPaint is faster but makes implementing user interactions (e.g., button clicks, drag-and-drop) very challenging.I chose Flutter for its cross-platform support and a rich set of pre-built widgets that accelerate development. However, I am struggling to find an efficient solution to this problem.
CustomPaint, how can user interactions (e.g., clicks, drags) be implemented efficiently for each node?I would greatly appreciate any advice, suggestions, or alternative approaches. Thank you!
Consider using the Flow Widget. It is much faster than CustomPaint. It is basically a MultiChildRenderObjectWidget. From the Documentation,
"The [Flow] widget recomputes its children's positions during the paint phase rather than during the layout phase."
Therefore, it has a significant improvement on the performance of laying out a lot of items being animated on screen. I had a similar use, where I was bubbling 150 nodes, in reaction to a moving cursor on Flutter web. The flow widget sped up this animation. You may still need some level of optimization as 10k realtime nodes is a lot more than 150 nodes.
Sample code.
Flow(delegate: PositionItemsFlowDelegate(animation: animation),
children: List.generate(items.length,(index) => Container()),),
And the Delegate is the most important Class here. This is just a sample and doesn't highlight the beauty of Flow being used to draw a lot of nodes. The animation can be used to determine the position of items in the flow widget.
class PositionItemsFlowDelegate extends FlowDelegate {
PositionItemsFlowDelegate({required this.animation})
: super(repaint: animation);
final Animation<double> animation;
@override
bool shouldRepaint(PositionItemsFlowDelegate oldDelegate) {
return animation != oldDelegate.animation;
}
///Just a sample that positions Items on Screen in circular fashion.
@override
void paintChildren(FlowPaintingContext context) {
for (int i = 0; i < context.childCount; i++) {
int numOfItems = context.childCount;
int currentIndex = i;
if (currentIndex > 0 && currentIndex < 8) {
numOfItems = (context.childCount ~/ 5);
} else if (currentIndex > 7 && currentIndex <= 18) {
numOfItems = context.childCount ~/ 10;
}
double angle = (2 * pi / numOfItems) * currentIndex;
double radius = min(300, currentIndex * 60);
switch (currentIndex) {
case 1:
radius = 1;
case 2:
radius = 60;
case 3:
radius = 60;
angle = angle + 0.5;
case 4:
radius = 60;
angle = angle + 1;
case 5:
radius = 60;
angle = angle + 1.5;
case 0:
radius = 240;
angle += 3.64;
}
double dx = (radius * animation.value) * cos(angle);
double dy = (radius * animation.value) * sin(angle);
context.paintChild(
i,
transform: Matrix4.translationValues(dx, dy, 0),
);
}
}
@override
Size getSize(BoxConstraints constraints) {
return const Size.fromRadius(300);
}
@override
BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
return BoxConstraints.tight(const Size.fromRadius(300));
}
}