What is the purpose of the FittedBox widget in Flutter?

Overview

FittedBox

BoxFit

Basic Usage

dartCopy
Container(
  width: 100,
  height: 50,
  child: FittedBox(
    fit: BoxFit.contain,
    child: Text('Large Text That Would Overflow'),
  ),
)
// Text scales down to fit in the 100x50 container

BoxFit Options

contain

cover

fill

fitWidth

fitHeight

none

scaleDown

contain

Use Case 1: Fit Text to Container

dartCopy
Container(
  width: 80,
  height: 30,
  color: Colors.blue,
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
      'Hello Flutter!',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
)

Use Case 2: Scale Icon to Fill

dartCopy
SizedBox(
  width: 50,
  height: 50,
  child: FittedBox(
    fit: BoxFit.fill,
    child: Icon(Icons.star),
  ),
)

Use Case 3: Responsive Number Display

dartCopy
// Number that scales to whatever space is available
FittedBox(
  fit: BoxFit.scaleDown,
  child: Text(
    '1,234,567',
    style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
  ),
)

With alignment

dartCopy
FittedBox(
  fit: BoxFit.contain,
  alignment: Alignment.centerLeft, // Position within the box
  child: Text('Left aligned'),
)

Best Use Case: Use

textCopy

FittedBox

when you have a widget that may be larger than its container and you need it to scale down automatically — especially useful for dynamic text, icons, or widgets in responsive layouts.