如何在 Flutter 中拥有动态大小的 CustomPainter？

Question

考虑 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),
      ),
    ),
  ),
)

我不想要文本小部件。

我不希望 CustomPaint 小部件被子小部件遮挡。

此外，我希望 CustomPaint 小部件能够填充任何可用的 space。

我认为解决方案是用 Expanded 之类的 BLANK 小部件替换 Text 小部件。

但是，我尝试了各种组合的 Expanded、Container、Spacer 和 Space 小部件，但总是出现错误或大小为零。

谢谢！

Answer 1

您可以使用 MediaQuery 获取屏幕的高度和宽度并使用它们

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),
          ),
        ),
      ),
    );

Answer 2

操作方法如下：

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

  ),
),

如何在 Flutter 中拥有动态大小的 CustomPainter？

How to have a dynamically sized CustomPainter in Flutter?

layout

widget

custom-painting

flutter

custom-painter