Ratio Box

A Ratio Box is a layout component that maintains a fixed aspect ratio for its child content.

Use Ratio Boxes to ensure consistent proportions across screen sizes—ideal for media, cards, and responsive containers.

Common alternative names:
Ratio Box

---

Variants

Square (1:1)

Preview

Code

RatioBox(
  ratio: 1,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '1:1',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Landscape (3:2)

Preview

Code

RatioBox(
  ratio: 3 / 2,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '3:2',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Landscape (4:3)

Preview

Code

RatioBox(
  ratio: 4 / 3,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '4:3',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Landscape (5:4)

Preview

Code

RatioBox(
  ratio: 5 / 4,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '5:4',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Landscape (16:9)

Preview

Code

RatioBox(
  ratio: 16 / 9,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '16:9',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Portrait (2:3)

Preview

Code

RatioBox(
  ratio: 2 / 3,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '2:3',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Portrait (3:4)

Preview

Code

RatioBox(
  ratio: 3 / 4,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '3:4',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Portrait (4:5)

Preview

Code

RatioBox(
  ratio: 4 / 5,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '4:5',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Portrait (9:16)

Preview

Code

RatioBox(
  ratio: 9 / 16,
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '9:16',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

With Rounded Corners

Preview

Code

RatioBox(
  ratio: 16 / 9,
  clipBehavior: Clip.antiAlias,
  borderRadius: BorderRadius.circular(12),
  child: Container(
    alignment: Alignment.center,
    color: context.color.accentModerate,
    child: Text(
      '16:9 rounded',
      style: AppFonts.regular14.copyWith(
        color: context.color.accentOnAccent,
      ),
    ),
  ),
)

---

Properties

Property	Type	Description
ratio	double	The aspect ratio to enforce (width / height)
child	Widget	The widget to size according to the specified aspect ratio
clipBehavior	Clip	How to clip the child content
borderRadius	BorderRadiusGeometry?	The border radius to apply to the widget