Basic layout operations: Scaling components

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()
        ..scale(1.5),
     ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);
  • To scale a widget up or down, nest it in a Transform widget.
  • For a simple scaling operation along the x-axis, create a new Matrix4 identity object and use its scale() method to specify the scaling factor.
  • When you scale a parent widget, its child widgets are scaled accordingly.

Related concepts

Scaling components

Basic layout operations: Scaling components — Structure map

Clickable & Draggable!

Basic layout operations: Scaling components — Related pages: