如何在颤动中创建具有固定宽度和高度的颜色框？

Question

我想在 flutter 中创建一个固定宽度和高度的颜色框。如何实现？

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' 构造函数。但是两者都有效并且做同样的事情。

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

Answer 3

处理@Rémi Rousselet 回答中出现的问题

Flutter 的布局引擎有几个重要的限制：

小部件只能在其父级给定的约束范围内决定自己的大小。这意味着小部件通常 不能有任何它想要的大小 。
小部件无法知道也不决定自己在屏幕中的位置，因为决定小部件位置的是小部件的父级.
由于父级的大小和位置反过来也取决于它自己的父级，因此如果不考虑整个树，就不可能精确定义任何小部件的大小和位置。
如果子项想要与父项不同的尺寸，而父项没有足够的信息来对齐它，那么子项的尺寸可能会被忽略。定义对齐方式时要具体。

示例将在以下部分进行说明。

Container(width: 100, height: 100, color: Colors.red)

红色的Container想要100×100，但是做不到，因为屏幕强制它和屏幕大小完全一样

因此 Container 填满了屏幕。

解决方案

用 Center

包装了固定尺寸的盒子

Center(
   child: Container(width: 100, height: 100, color: Colors.red)
)

屏幕强制 Center 与屏幕大小完全相同，因此 Center 填满了屏幕。

中心告诉 Container 它可以是它想要的任何大小，但不能大于屏幕。现在 Container 确实可以是 100 × 100.

如何在颤动中创建具有固定宽度和高度的颜色框？

How to create colour box with fixed width and height in flutter?

flutter

dart

flutter-layout

flutter-widget