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';

Basic syntax of the Transform.scale widget

Use the Transform.scale method to scale a widget. Specify the X and Y scaling factors or provide a single scale value that will uniformly scale it on both axes.

// A Simple Container without scaling
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(child: Text('Non Scaled')),
),
SizedBox(height: 40),
// A container which is scaled using Transform.scale
Transform.scale(
  scale: 1.5,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
    child: Center(child: Text('Scaled')),
  ),
),

After running the above code, we can see the following output:

Scaled and Un-scaled containers using Transform.scale widget
Scaled and Un-scaled containers using Transform.scale widget

Code example

We get the following output by putting together the code explained above.

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),
          ],
        ),
      ),
    );
  }
}

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved