Basic layout operations: Centering components 

var container = Container( // grey box
  child:  Center(
    child:  Text(
      "Lorem ipsum",
      style: bold24Roboto,
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);
<div class="greybox">
  Lorem ipsum
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center; 
}

A Center widget centers its child both horizontally and vertically.

Related concepts

→
Centering components

Basic layout operations: Centering components — Structure map

Clickable & Draggable!

Basic layout operations: Centering components — Related pages:

Flutter for web developers