How to have a dynamically sized CustomPainter in Flutter?

Question

Consider the following code from the Flutter docs:

CustomPaint(
  painter: Sky(),
  child: const Center(
    child: Text(
      'Once upon a time...',
      style: TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.w900,
        color: Color(0xFFFFFFFF),
      ),
    ),
  ),
)

I don't want a text widget.

I don't want the CustomPaint widget to be obscured by a child widget.

Also I want the CustomPaint widget to fill whatever space is available to it.

I presume the solution is to replace the Text widget with a BLANK widget like Expanded.

But, I've tried the Expanded, Container, Spacer, and Space widgets in various combinations but always either get an error or a zero size.

Thanks!

you want to set dynamic size according to your custom drawing? or cover up whole screen? — Diwyansh, Nov 16 '21 at 05:02
Thanks for your effort. I updated the question. Hopefully that explains. — Nerdy Bunz, Nov 16 '21 at 16:42

score 1 · Accepted Answer · answered Nov 17 '21 at 16:24

1

Here how you do it:

Expanded(
  child: CustomPaint(
    painter: MyCustomPainter(),
    size: Size.infinite,

  ),
),

answered Nov 17 '21 at 16:24

Nerdy Bunz

6,040
10
41
100

score -2 · Answer 2 · answered Nov 15 '21 at 20:36

You can get height and width of the screen by using MediaQuery and use them

final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    return CustomPaint(
      size: Size(width,height),
      painter: Sky(),
      child: const Center(
        child: Text(
          'Once upon a time...',
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.w900,
            color: Color(0xFFFFFFFF),
          ),
        ),
      ),
    );

How to have a dynamically sized CustomPainter in Flutter?

2 Answers2