How to scale a widget using the Transform widget

Scaling a widget in Flutter allows us to resize widgets uniformly along the X and Y axes while maintaining its aspect ratio. The Transform widget provides a new Transform.scale widget offers a convenient way to apply scaling transformations to a child widget. In this Answer, we'll walk through the process of scaling a widget using the Transform.scale widget, providing us with step-by-step instructions and code examples.

Constructor and parameters

The Transform.scale widget provides a constructor with various parameters to customize its behavior and layout.

Transform.scale({
  Key? key,
  double? scale,
  double? scaleX,
  double? scaleY,
  Offset? origin,
  AlignmentGeometry? alignment = 
  Alignment.center,
  bool transformHitTests = true,
  FilterQuality? filterQuality,
  Widget? child
})

Let's take a closer look at each parameter and its purpose.

key: An optional key to uniquely identify the widget.
scale: The scaling factor to apply uniformly to both X and Y axes.
scaleX: The scaling factor to apply to the X-axis.
scaleY: The scaling factor to apply to the Y-axis.
origin: The pivot point for scaling relative to the unscaled widget.
alignment: The alignment of the scaled widget within its layout box.
transformHitTests: Determines if hit tests consider the original or scaled widget layout.
filterQuality: The quality of image filtering applied during scaling.
child: The widget to which the scaling transformation is applied.

Implementation

We can follow the instructions given below to add a Transform.scale widget in UI.

Import the necessary packages

To use the Transform.scale widget, we need to import the necessary packages in our Dart file.

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Transform Widget Example',
      home: TransformExample(),
    );
  }
}

class TransformExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Educative Scaling Answer')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Rotating a Widget
            Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(child: Text('Non Scaled')),
              ),
           
            
            SizedBox(height: 40),
            
            // Scaling a Widget
            Transform.scale(
              scale: 1.5,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
                child: Center(child: Text('Scaled')),
              ),
            ),      
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}