How do we pass the size to CustomPaint?

Question

Column's child's CustomPainter's size become (0, 0).

1) When we just used CustomPaint and CustomPainter, the size we expected was passed to CustomPainter, which is rendered as expected.

2) When we used CustomPaint and CustomPainter as Stack's children, the size we expected was not passed to CustomPainter.

3) But when we used it as SizedBox.expand's children, the size we expected was passed to CustomPainter and it was rendered.

4) When we used CustomPaint and CustomPainter as Column's children, the size we expected was not passed to CustomPainter. We are investigating ways to solve it.

5) However, it is either 0.0 or infinite in height. We want it to just expand to a good size.

import 'package:flutter/material.dart';

class TestWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    // 1) OK Size(360.0, 640.0)
    // return CustomPaint(
    //   painter: TestPainter(),
    // );

    // 2) NG Size(0.0, 0.0)
    // return Stack(
    //   children: <Widget>[
    //     CustomPaint(
    //       painter: TestPainter(),
    //     ),
    //   ],
    // );

    // 3) OK Size(360.0, 640.0)
    // return Stack(
    //   children: <Widget>[
    //     SizedBox.expand(
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //   ],
    // );

    // 4)5) NG BoxConstraints forces an infinite height.
    // return Column(
    //   children: <Widget>[
    //     SizedBox.expand(
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //     Text('test'),
    //   ],
    // );

    // 4)5) NG Size(0.0, 0.0)
    // return Column(
    //   children: <Widget>[
    //     SizedBox(
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //     Text('test'),
    //   ],
    // );

    // 4)5) Size(360.0, 0.0)
    // return Column(
    //   children: <Widget>[
    //     SizedBox(
    //       width: double.infinity,
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //     Text('test'),
    //   ],
    // );
    }
}

class TestPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
    print(size);
    Paint p = Paint();
    p.color = Color.fromARGB(0xff, 0xff, 0x00, 0x00);
    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, p);
    }

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

We expect CustomPaint and CustomPainter to be expanded to the appropriate size and that size will be passed to CustomPainter.

Answer 1

Below is the constructor of CustomPaint():

const CustomPaint({
  Key key,
  this.painter,
  this.foregroundPainter,
  this.size = Size.zero,
  this.isComplex = false,
  this.willChange = false,
  Widget child,
}) : assert(size != null),
     assert(isComplex != null),
     assert(willChange != null),
     super(key: key, child: child);

The size is regarded as Size.zero (meaning Size(0.0, 0.0)) when it is omitted, so you need to pass your desired size to 'CustomPaint()`.

return CustomPaint(
  size: const Size(double.infinity, double.infinity),  // or whatever size you want it to be
  painter: TestPainter(),
);

As for expansion of a widget inside Column, use Expanded instead of SizedBox.expand.

Answer 2

To pass the desired argument in flutter class you can pass it easily from its instance and use it in class using constructor

For example:

class TestPainter extends CustomPainter {
    int size;

    // Constructor
    TestPainter({this.size});
}

And you can pass size as an argument to this TestPainter class

TestPainter(size: 10);

Answer 3

Create a constructor inside TestPainter class and accepts the argument from there.

e.g:

var size;
TestPainter(this.size);

Now while calling this class , pass the size value to the constructor

TestPainter(20.0);

And use it inside paint method as :

widget.size.width