Aspect Ratio

A component that maintains a specific aspect ratio for its child content.

The RatioBox widget ensures consistent proportional dimensions regardless of screen size. This is particularly useful for media content, cards, and responsive layouts.

• Responsive: Maintains proportions across screen sizes
• Customizable: Supports any ratio value and border radius
• Flexible: Works with any child widget
• Clipping: Supports custom clipping behavior

---

Variants

Square (1:1)

Perfect for profile pictures, album covers, or square content.

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)

Common in photography, particularly for DSLR cameras.

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,
      ),
    ),
  ),
)

---

Standard (4:3)

Traditional display format, common for slides and older media.

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,
      ),
    ),
  ),
)

---

Photo (5:4)

Common in photography and print formats.

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,
      ),
    ),
  ),
)

---

Widescreen (16:9)

Common format for videos, modern displays, and presentations.

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)

Standard for portrait photography and many printed materials.

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)

Vertical orientation of the classic 4:3 format.

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)

Common for vertical photos and UI elements.

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)

Ideal for mobile-oriented content and vertical videos.

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

Using rounded corners with the aspect ratio container.

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