Search code examples
flutterdartpie-chartcustom-painter

Why does my Flutter CustomPainter class not paint anything on the screen when using the canvas..drawArc() function with a sweepAngle less than 2*pi?


For some reason, my CustomPainter does not draw anything to the screen. I'm trying to build a Pie-Chart but the painter only works when I set the sweepAngle to 2*pi.

The Widget where CustomPaint is called has the following structure:

class PieChart extends StatelessWidget {
  const PieChart({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 160,
      width: 210,
      child: CustomPaint(
        painter: PieChartPainter(categories: dataset, width: 10),
      ),
    );
  }
}

This is my CustomPainter class:

class PieChartPainter extends CustomPainter {
  PieChartPainter({
    required this.categories,
    required this.width,
  });

  final List<Category> categories;
  final double width;

  @override
  void paint(Canvas canvas, Size size) {
    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);

    double total = 0;
    // Calculate total amount from each category
    for (var expense in categories) {
      total += expense.amount;
    }

    // The angle/radian at 12 o'clock
    double startRadian = -pi / 2;
    for (var index = 0; index < categories.length; index++) {
      final currentCategory = categories.elementAt(index);
      final sweepRadian = currentCategory.amount / total * 2 * pi;
      final paint = Paint()
        ..style = PaintingStyle.fill
        ..strokeWidth = width
        ..color = categoryColors.elementAt(index % categories.length);
      final rect = Rect.fromCenter(
          center: center, width: radius * 2, height: radius * 2);
      canvas.drawArc(
        rect,
        startRadian,
        2 * pi, // should really be "sweepRadian"
        false,
        paint,
      );
      startRadian += sweepRadian;
    }
  }

  @override
  bool shouldRepaint(PieChartPainter oldDelegate) {
    return true;
  }
}

I can almost certainly say that the problem has nothing to do with the data and colors that I provide, because whenever I log the current elements to the console, it gives the correct output. Here, you can see my Widget structure: Here, you can see my Widget structure

And here is an image of the component itself: (Notice that only the last category-color is shown for the entire circle, because whenever I use a sweepAngle that is less than 2*pi, the entire widget doesn't show colors.) The component itself

This is the component when I set a sweepAngle that is less than 2*pi: Component with sweepAngle less than 2*pi

I really cannot figure out what might be causing this issue. Does anyone have an Idea what else is influenced by the sweepAngle parameter? I also have no idea why the colored circles to the left of the individual categories are not visible, because they're rendered in an entirely different Widget-branch... If you have any idea on how to solve this, I would be more than happy to provide more information but as long as I don't know where to look, I don't want to spam this issue with unnecessary information.


Solution

  • For anyone wondering: The problem had to do with the "--enable-software-rendering" argument. Once I ran flutter with flutter run --enable-software-rendering, it all worked as expected.