AspectRatioBox#

child 를 고정 width:height 비율(ratio)로 제약하는 컨테이너입니다. Flutter AspectRatio 위젯과 동일하며, Web 에서는 padding-top 퍼센트 트릭 + position: relative + 절대 배치 콘텐츠 레이어로 같은 의미를 재현합니다. 이미지·미디어 임베드를 반응형으로 유지할 때 씁니다.

Live Preview#

class AspectRatioBoxDefaultExample extends StatelessComponent {
  const AspectRatioBoxDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      styles: Styles(raw: {'width': '280px'}),
      [
        AspectRatioBox(
          ratio: 16 / 9,
          child: Card(
            child: div(
              classes: 'flex items-center justify-center w-full h-full',
              [Text('16 : 9').titleMedium],
            ),
          ),
        ),
      ],
    );
  }
}

class AspectRatioBoxDefaultExample extends StatelessWidget {
  const AspectRatioBoxDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 280,
      child: AspectRatioBox(
        ratio: 16 / 9,
        child: Card(
          child: Center(child: Text('16 : 9').titleMedium),
        ),
      ),
    );
  }
}

사용법#

// Flutter / Web 동일
AspectRatioBox(
  ratio: 16 / 9,
  child: Card(child: Center(child: Text('16 : 9').titleMedium)),
)

Props#

너비는 부모가 정합니다 — AspectRatioBox 는 그 너비에서 ratio 에 맞는 높이를 산출합니다(또는 그 반대). 위 프리뷰는 280px 너비 안에서 16:9 박스를 보여줍니다.