如何在Flutter中创建固定宽度和高度的彩色框？

Question

我正在尝试在Flutter中创建一个具有固定宽度和高度的颜色框，如何实现？

- Tree

Answer 1

使用SizedBox包裹任何小部件以强制其匹配固定大小。

至于背景颜色或边框，请使用DecoratedBox。

然后您可以将两者结合起来，这将导致

const SizedBox(
  width: 42.0,
  height: 42.0,
  child: const DecoratedBox(
    decoration: const BoxDecoration(
      color: Colors.red
    ),
  ),
),

你可以使用Container，它是包含上述两个组件的多个部件的组合。这将导致：

new Container(
  height: 42.0,
  width: 42.0,
  color: Colors.red,
)

我倾向于选择第一种选项。因为Container会阻止使用“const”构造函数。但两者都可以工作且效果相同。

- Rémi Rousselet

---

无法正常工作，它总是获取屏幕的高度和宽度。 - Aman Jain

Linter 2提示避免使用“const”。 - markhorrocks

不必使用具有相同值的高度和宽度的SizedBox，我们可以使用SizedBox.square，并且仅使用特定的值。 - Felipe Sales

Answer 2

您可以使用以下内容：

FractionalTranslation(
    translation: Offset(0, 0),
        child: Container(
        width: 100,
        height: 100,
        child: SizedBox(
            height:  1,
            width: 1,
            child: const ColoredBox(color: Colors.amber),
        )
    ),
),

- Shoden Battousai