Manipulating position and size

The following examples show how to perform more complex operations on widget position, size, and background.

Var container = Container( // grey box
  child: Stack(
    children: [
      Positioned( // red box
        child:  Container(
          child: Text(
            "Lorem ipsum",
            style: bold24Roboto,
          ),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          padding: EdgeInsets.all(16),
        ),
        left: 24,
        top: 24,
      ),
    ],
  ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  position: relative; 
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  position: absolute;
  top: 24px;
  left: 24px; 
}

By default, widgets are positioned relative to their parent.

Var container = Container( // gray box
  child: Center(
    child:  Transform(
      child:  Container( // red box
        child: Text(
          "Lorem ipsum",
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        padding: EdgeInsets.all(16),
      ),
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..rotateZ(15 * 3.1415927 / 180),
    ), 
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  transform: rotate(15deg); 
}

To rotate a widget, nest it in a Transform widget.

Use the Transform widget’s alignment and origin properties to specify the transform origin (fulcrum) in relative and absolute terms, respectively.

• To apply a linear gradient to a widget’s background, nest it in a Container widget.
• Then use the Container widget’s decoration property to create a BoxDecoration object, and use BoxDecoration’s gradient property to transform the background fill.
• Vertical gradient.

  Var container = Container( // grey box
    child: Center(
      child: Container( // red box
        child: Text(
          "Lorem ipsum",
          style: bold24Roboto,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: const Alignment(0.0, -1.0),
            end: const Alignment(0.0, 0.6),
            colors: <Color>[
              const Color(0xffef5350),
              const Color(0x00ef5350)
            ],
          ),
        ), 
        padding: EdgeInsets.all(16),
      ),
    ),
    width: 320,
    height: 240,
    color: Colors.grey[300],
  );

• Horizontal gradient.

  Var container = Container( // grey box
    child: Center(
      child: Container( // red box
        child: Text(
          "Lorem ipsum",
          style: bold24Roboto,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: const Alignment(-1.0, 0.0),
            end: const Alignment(0.6, 0.0),
            colors: <Color>[
              const Color(0xffef5350),
              const Color(0x00ef5350)
            ],
          ),
        ), 
        padding: EdgeInsets.all(16),
      ),
    ),
    width: 320,
    height: 240,
    color: Colors.grey[300],
  );