0Pricing
Flutter Mobile Development · Lección

Construcción de un widget de gráfico personalizado interactivo

Combine CustomPainter con la detección de gestos para representar un gráfico de datos que responda al tacto.

Construcción de un widget de gráfico personalizado interactivo es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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

Skeleton of a CustomPainter

A CustomPainter implements two methods:

  • paint(Canvas canvas, Size size) — where you draw.
  • shouldRepaint(old) — return true when inputs changed so Flutter repaints.

Pass your data and any interaction state (like the highlighted index) into the painter's constructor as final fields.

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

Before drawing, map each data value to pixel coordinates. Given the canvas size, divide the width into equal slots and scale heights against the maximum value.

Storing each bar's Rect lets you reuse the exact same geometry later for hit-testing — drawing and gestures must agree.

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

Inside paint, build a Paint object and call canvas.drawRect for each bar. Use the highlightedIndex to give the touched bar a distinct color.

Tip: create paints once outside the loop when their properties don't change, and only swap the color per bar.

@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

Canvas cannot draw text directly — you use a TextPainter. Lay out the text, then paint it at the position you want. Center each label under its bar.

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

Wrap your painter in a CustomPaint widget. Give it a size (or let it expand) so it has bounds to draw within.

Because the highlight is interaction state, the host is a StatefulWidget that holds _highlightedIndex and rebuilds when it changes.

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

To know which bar was touched, recompute the same rects and test which one contains the touch point. A pure helper keeps this logic testable and identical to what the painter drew.

This snippet is standalone Dart — it models a rectangle and the same hit-test math the widget uses.

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

Wrap the CustomPaint in a GestureDetector. Use onTapDown to read the local touch position, run the hit-test, and call setState to update the highlight.

Use details.localPosition (already relative to the widget), not the global position.

@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

For a scrubbing experience (drag a finger across bars to inspect each), handle onPanUpdate in addition to onTapDown. The same hit-test runs continuously as the finger moves.

Wrap the highlight update in a helper so tap and drag share one code path.

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

Now surface feedback. Below the chart, render a Text that reflects the highlighted bar, or draw a tooltip on the canvas above the selected bar.

  • Keep the painter stateless about UI text — pass it the highlighted index only.
  • Avoid heavy work in paint; precompute geometry and reuse it for both drawing and hit-testing.
  • Make shouldRepaint precise so you don't repaint on every frame.
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

Test your understanding of how drawing and gesture handling stay consistent.

Recap

You built a touch-responsive chart by separating concerns:

  • Data model — plain, immutable, testable.
  • Geometry helper — one function maps values to Rects, shared by drawing and hit-testing.
  • CustomPainter — draws bars and labels from data plus the highlighted index, with a precise shouldRepaint.
  • StatefulWidget — holds interaction state and calls setState.
  • GestureDetector — onTapDown and onPanUpdate run the shared hit-test on localPosition.

The golden rule: keep the painter a pure function of state, and let gestures be the only thing that mutates that state.

Preguntas frecuentes

¿La lección «Construcción de un widget de gráfico personalizado interactivo» es gratis?

Sí — el texto completo de «Construcción de un widget de gráfico personalizado interactivo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.

¿Qué aprenderé en «Construcción de un widget de gráfico personalizado interactivo»?

Combine CustomPainter con la detección de gestos para representar un gráfico de datos que responda al tacto. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Flutter Mobile Development?

No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Construcción de un widget de gráfico personalizado interactivo»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?

Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. La API Canvas: rutas, pinturas y shaders
  2. Construcción de un widget de gráfico personalizado interactivo
  3. Recorte, modos de mezcla y composición de capas
  4. Detección de impactos y optimización del repintado
← Volver a Flutter Mobile Development