Ein interaktives eigenes Chart-Widget erstellen

Why an Interactive Custom Chart?

The Data Model

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');
  }
}

Skeleton of a CustomPainter

class BarChartPainter extends CustomPainter {
  final List<Bar> bars;
  final int? highlightedIndex;

  BarChartPainter({required this.bars, this.highlightedIndex});

  @override
  void paint(Canvas canvas, Size size) {
    // drawing logic goes here
  }

  @override
  bool shouldRepaint(covariant BarChartPainter old) {
    return old.bars != bars || old.highlightedIndex != highlightedIndex;
  }
}

Computing Bar Geometry

List<Rect> computeBarRects(List<Bar> bars, Size size) {
  final maxValue = bars.map((b) => b.value).reduce((a, b) => a > b ? a : b);
  final slotWidth = size.width / bars.length;
  const barFraction = 0.6; // bars take 60% of their slot
  final rects = <Rect>[];
  for (var i = 0; i < bars.length; i++) {
    final barWidth = slotWidth * barFraction;
    final left = i * slotWidth + (slotWidth - barWidth) / 2;
    final height = (bars[i].value / maxValue) * size.height;
    final top = size.height - height;
    rects.add(Rect.fromLTWH(left, top, barWidth, height));
  }
  return rects;
}

Drawing the Bars

@override
void paint(Canvas canvas, Size size) {
  final rects = computeBarRects(bars, size);
  final paint = Paint()..style = PaintingStyle.fill;
  for (var i = 0; i < rects.length; i++) {
    paint.color = (i == highlightedIndex)
        ? const Color(0xFFFF7043) // highlighted
        : const Color(0xFF42A5F5); // default
    final rounded = RRect.fromRectAndRadius(
      rects[i],
      const Radius.circular(4),
    );
    canvas.drawRRect(rounded, paint);
  }
}

Drawing Labels with TextPainter

void drawLabel(Canvas canvas, String text, Offset center) {
  final tp = TextPainter(
    text: TextSpan(
      text: text,
      style: const TextStyle(color: Color(0xFF333333), fontSize: 12),
    ),
    textDirection: TextDirection.ltr,
  )..layout();
  final offset = Offset(center.dx - tp.width / 2, center.dy);
  tp.paint(canvas, offset);
}

Hosting the Painter in a Widget

class BarChart extends StatefulWidget {
  final List<Bar> bars;
  const BarChart({super.key, required this.bars});
  @override
  State<BarChart> createState() => _BarChartState();
}

class _BarChartState extends State<BarChart> {
  int? _highlightedIndex;

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(double.infinity, 200),
      painter: BarChartPainter(
        bars: widget.bars,
        highlightedIndex: _highlightedIndex,
      ),
    );
  }
}

Hit-Testing a Tap

class Box {
  final double left, top, width, height;
  const Box(this.left, this.top, this.width, this.height);
  bool contains(double x, double y) =>
      x >= left && x <= left + width && y >= top && y <= top + height;
}

int? hitTest(List<Box> boxes, double x, double y) {
  for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].contains(x, y)) return i;
  }
  return null;
}

void main() {
  final boxes = [
    const Box(0, 100, 40, 100),
    const Box(60, 50, 40, 150),
    const Box(120, 120, 40, 80),
  ];
  print(hitTest(boxes, 70, 90));   // 1
  print(hitTest(boxes, 200, 10));  // null
}

Wiring Up GestureDetector

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTapDown: (details) {
      final size = context.size!;
      final rects = computeBarRects(widget.bars, size);
      final p = details.localPosition;
      int? hit;
      for (var i = 0; i < rects.length; i++) {
        if (rects[i].contains(p)) { hit = i; break; }
      }
      setState(() => _highlightedIndex = hit);
    },
    child: CustomPaint(
      size: const Size(double.infinity, 200),
      painter: BarChartPainter(
        bars: widget.bars,
        highlightedIndex: _highlightedIndex,
      ),
    ),
  );
}

Responding to Drags

void _updateHighlight(Offset local) {
  final size = context.size!;
  final rects = computeBarRects(widget.bars, size);
  int? hit;
  for (var i = 0; i < rects.length; i++) {
    if (rects[i].contains(local)) { hit = i; break; }
  }
  if (hit != _highlightedIndex) {
    setState(() => _highlightedIndex = hit);
  }
}

// in build():
// onTapDown: (d) => _updateHighlight(d.localPosition),
// onPanUpdate: (d) => _updateHighlight(d.localPosition),

Showing the Selected Value

Widget _selectionLabel() {
  if (_highlightedIndex == null) {
    return const Text('Tap a bar to inspect');
  }
  final bar = widget.bars[_highlightedIndex!];
  return Text('${bar.label}: ${bar.value.toStringAsFixed(1)}',
      style: const TextStyle(fontWeight: FontWeight.bold));
}

Quick Check

Recap