Flutter - Using Transform.scale Examples

This tutorial is about how to use Flutter's Transform.scale named constructor.

In Flutter, if you want to scale up or scale down the size of a widget, you can do it easily using Transform.scale. Below are some examples of how to use the named constructor.

Using Transform.scale

This is the named constructor you need to use.

  Transform.scale({
    Key key,
    @required double scale,
    this.origin,
    this.alignment = Alignment.center,
    this.transformHitTests = true,
    Widget child,
  })

There is a required parameter scale whose type is double. Below is the basic usage example.

  Transform.scale(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    scale: 2,
  )

Output:

Flutter - Transform.scale - Basic

 

Setting Alignment

By default, the alignment of the origin is center. To change it, you can pass alignment argument whose type is AlignmentGeometry.

  Transform.scale(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    scale: 2,
    alignment: Alignment.topLeft,
  )

Output:

Flutter - Transform.scale - Aligment

 

Setting Origin Offset

To change the origin of the coordinate system, you need to pass origin argument which is of type Offset.

  Transform.scale(
    child: Text(
        'Woolha.com',
        style: TextStyle(color: Colors.teal, fontSize: 20)
    ),
    scale: 2,
    origin: const Offset(50, 0),
  )

Output:

Flutter - Transform.scale - Offset

 

You can also read about: