Building an Interactive Custom Chart Widget
Combine CustomPainter with gesture detection to render a touch-responsive data chart.
Why an Interactive Custom Chart?
Flutter ships with no built-in chart widget. When you need a touch-responsive bar or line chart that exactly matches your design, you combine two primitives:
- CustomPainter — draws the chart onto a
Canvas. - GestureDetector — captures taps and drags so the user can highlight or inspect data points.
In this lesson we build a bar chart that highlights the bar the user touches and reports its value. The key idea: the painter is a pure function of state, and gestures change that state.
The Data Model
Start with a plain immutable model. Keeping it framework-free makes it easy to test and reason about. Each bar has a label and a value.
This snippet is pure Dart with no Flutter imports, so it runs standalone.
class Bar {
final String label;
final double value;
const Bar(this.label, this.value);
}
void main() {
final data = <Bar>[
const Bar('Mon', 12),
const Bar('Tue', 30),
const Bar('Wed', 8),
const Bar('Thu', 22),
];
final maxValue = data.map((b) => b.value).reduce((a, b) => a > b ? a : b);
print('Bars: ${data.length}, max value: $maxValue');
for (final b in data) {
final ratio = (b.value / maxValue * 100).toStringAsFixed(0);
print('${b.label}: $ratio% of tallest');
}
}All lessons in this course
- The Canvas API: Paths, Paints, and Shaders
- Building an Interactive Custom Chart Widget
- Clipping, Blend Modes, and Layer Compositing
- Hit Testing and Repaint Optimization