Flutter Question posted in
The official Flutter documentation can be found here.

Flutter CustomPaint and CustomPainter creating widget of incorrect size

I have a program that creates a Pie-Chart using CustomPainter and CustomPaint that uses a SizedBox as the Canvas and is the Widget returned. However, the width of the SizedBox is being set to the Screen Width and not the width specified of “300”. This means that I cannot use the Widget created because it is the incorrect size. I created a test program that does virtually the same and it functions correctly. Both programs create a SizedBox of 300×300 however the problem program is setting the width to the screen width of 411. I have previously painted a completely different widget using similar details without any problems.

Perhaps someone can show me what I have done wrong because I cannot find it.

Details of the problem program and the test program are as follows:

Problem Program

import 'dart:math' as math;
import 'package:flutter/material.dart';
//
import '../classes/ClassPieChartParams.dart';

class PieChartComponent extends SizedBox {
  final double width;
  final double height;
  PieChartComponent(
      {required this.width,
      required this.height,
      required ClassPieChartParams clsPieChartParams})
      : super(
            child: CustomPaint(
                painter: PieChartPainter(
          clsPieChartParams: clsPieChartParams,
        )));
}

class PieChartPainter extends CustomPainter {
  final ClassPieChartParams clsPieChartParams;
  PieChartPainter({required this.clsPieChartParams});
  @override
  void paint(Canvas canvas, Size size) {
    //
    debugPrint(
        "nn****** At 44: paint: size.width = ${size.width}, size.height = ${size.height}n");

This is called via the following:

      return PieChartComponent(
          clsPieChartParams: clsPieChartParams, width: 300, height: 300);

The debug output is as follows:

“****** At 44: paint: size.width = 411.42857142857144, size.height = 300.0”
The width shown is the screen width.

Flutter Doctor

Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.22631.3296] • No issues found!

Test Program

I created a small test program that does virtually the same up to that point, and its debug output is:

Test Program Debug Output

****** At 27: Canvas01: sTest = Test String, paint: size.width = 300.0, size.height = 300.0

I can easily fix the size of what is painted, but the main problem is that the widget created is not the correct size and in any case I need to know what is causing the problem.

The test program is as follows:

class Canvas01 extends SizedBox {
  final double width;
  final double height;
  final String sTest;
  Canvas01({required this.width, required this.height, required this.sTest})
      : super(child: CustomPaint(painter: CanvasPainter(sTest)));
}

class CanvasPainter extends CustomPainter {
  final String sTest;
  CanvasPainter(this.sTest);
  //
  final wPainter1 = Paint()
    ..color = Colors.red
    ..strokeWidth = 2
    ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    debugPrint('''nn****** At 27: Canvas01: sTest = $sTest, paint:'''
        ''' size.width = ${size.width}, size.height = ${size.height}n''');
    canvas.drawOval(Rect.fromLTWH(0, 0, size.width, size.height), wPainter1);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // DOES NOT CHANGE
  }
}

This is called via:

return Canvas01(width: 300, height: 300, sTest: 'Test String');

The widget for the test program is the correct size.

Tags:

2

Answers


  1. 0

    maybe you should check the constraint of child widget,which parent widget provider for

    Login or Signup to reply.
  2. 0

    Thank you for providing the code. From what you’ve shared, it seems like the PieChartComponent class is subclassing SizedBox and not utilizing its parameters properly. The SizedBox widget itself doesn’t respect its own width and height parameters if it’s a subclass. Instead, you should use those parameters to set the size of its child.

    To fix the issue, you should set the width and height parameters of the SizedBox‘s child, which in this case is the CustomPaint widget. Here’s how you can adjust your PieChartComponent class:

        class PieChartComponent extends StatelessWidget {
  final double width;
  final double height;
  final ClassPieChartParams clsPieChartParams;

  PieChartComponent({
    required this.width,
    required this.height,
    required this.clsPieChartParams,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: CustomPaint(
        size: Size(width, height), // Set size of CustomPaint
        painter: PieChartPainter(
          clsPieChartParams: clsPieChartParams,
        ),
      ),
    );
  }
}

    In this modified version:

    • PieChartComponent is now a StatelessWidget instead of subclassing SizedBox.
    • The width and height parameters are passed to both the SizedBox and the CustomPaint.
    • Inside the SizedBox, the CustomPaint widget’s size property is explicitly set to Size(width, height).

    With this change, the CustomPaint will respect the specified width and height parameters, ensuring that your pie chart is drawn within a 300×300 area.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search