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

Question

I am trying to create a color box with fixed width and height in a flutter. How to achieve this?

Answer 1

Wrap any widget in a SizedBox to force it to match a fixed size.

As for background colors or border, use DecoratedBox.

You can then combine both, which leads to

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

You may as well use Container which is a composition of many widgets including those two from above. Which leads to :

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

I tend to prefer the first option. Because Container prevents the use of 'const' constructor. But both works and do the same.

Answer 2

Taking forward the issue arising in @Rémi Rousselet answer

Flutter’s layout engine has a few important limitations:

• A widget can decide its own size only within the constraints given to it by its parent. This means a widget usually can’t have any size it wants.

• A widget can’t know and doesn’t decide its own position in the screen, since it’s the widget’s parent who decides the position of the widget.

• Since the parent’s size and position, in its turn, also depends on its own parent, it’s impossible to precisely define the size and position of any widget without taking into consideration the tree as a whole.

• If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored. Be specific when defining alignment.

The examples are explained in the following sections.

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

The red Container wants to be 100 × 100, but it can’t, because the screen forces it to be exactly the same size as the screen.

So the Container fills the screen.

Solution

wrapped your fixed-sized box with Center

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

The screen forces the Center to be exactly the same size as the screen, so the Center fills the screen.

The Center tells the Container that it can be any size it wants, but not bigger than the screen. Now the Container can indeed be 100 × 100.