flutter: CustomPaint widget turned blank when put in a Column

Question

I've got something super bizarre:

The following code paints a rectangle with CustomPaint. This version works fine

import 'package:flutter/material.dart';


class MyApp extends StatefulWidget {
  @override
  _ MyAppState createState() => _ MyAppState();
}

class _MyAppState extends State<MyApp> {
  EmbeddedPainter _painter;

  @override
  void initState() {
    super.initState();
    _painter = EmbeddedPainter();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ClipRect(
          child: CustomPaint(
            painter: _painter
          ),
        ),
    );
  }

}

Then as soon as I place this CustomPaint into a Column widget, I no longer see the painted rectangle.

import 'package:flutter/material.dart';


class MyApp extends StatefulWidget {
  @override
  _ MyAppState createState() => _ MyAppState();
}

class _MyAppState extends State<MyApp> {
  EmbeddedPainter _painter;

  @override
  void initState() {
    super.initState();
    _painter = EmbeddedPainter();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
          children: <Widget>[
              ClipRect(
                child: CustomPaint(
                    painter: _painter
                ),
              ),
          ],
        )
    );
  }

}

The painter looks like this

class EmbeddedPainter extends CustomPainter with ChangeNotifier {
  var _paint = Paint()
    ..strokeJoin = StrokeJoin.miter
    ..strokeWidth = 1.0
    ..color = Colors.green
    ..style = PaintingStyle.fill;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Rect.fromLTWH(50, 50, 100, 100), _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

  void update(Color color0, Color color1) {

    // draw
    notifyListeners();
  }
}

maybe give it a `Size size` inside `CustomPaint`. – Doc Jul 28 '20 at 12:55 — Doc, Jul 28 '20 at 12:55

score 0 · Answer 1 · answered Jul 28 '20 at 13:06

Solved it myself:

The ClipRect must be wrapped with a container with size, e.g., a SizedBox.


 @override
  Widget build(BuildContext context) {

    return Container(
          child: Column(
            children: <Widget>[
              SizedBox(
                width: 500,
                height: 300,
                child: ClipRect(
                  child: CustomPaint(
                      painter: _painter
                  ),
                ),
              )

            ],
          )
      );
  }

flutter: CustomPaint widget turned blank when put in a Column

1 Answers1