ResponsiveContainer

최대 너비 제약과 수평 중앙 정렬을 제공하는 반응형 컨테이너

ResponsiveContainer#

CoResponsiveContainer는 자식 콘텐츠에 최대 너비 제약 + 수평 중앙 정렬 + 기본 수평 패딩을 적용하는 레이아웃 래퍼입니다. Tailwind의 container 유틸리티, Flutter의 ConstrainedBox + Center 패턴을 한 번에 제공합니다. 긴 텍스트 영역, 페이지 본문, 카드 그리드 등의 바깥 래퍼로 사용합니다.

Live Preview#

Web

This content is centred and capped at the "sm" breakpoint (640 px). Resize the preview to see the container stay inside the max width with symmetric horizontal padding.

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    final ts = context.theme.typography;
    return CoResponsiveContainer(
      maxWidth: CoreResponsiveContainerMaxWidth.sm,
      child: CoCard(
        cardStyle: const CoreCardStyle(padding: CoreSpace.space16),
        child: div(
          classes: 'text-${ts.bodyMedium} text-${cs.onSurface}',
          [
            Component.text(
              'This content is centred and capped at the "sm" breakpoint '
              '(640 px). Resize the preview to see the container stay '
              'inside the max width with symmetric horizontal padding.',
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final cs = theme.colorScheme;
    return CoResponsiveContainer(
      maxWidth: CoreResponsiveContainerMaxWidth.sm,
      child: CoCard(
        cardStyle: const CoreCardStyle(
          padding: EdgeInsets.all(CoreSpace.space16),
        ),
        child: DefaultTextStyle.merge(
          style: theme.typography.bodyMedium.copyWith(color: cs.onSurface),
          child: const Text(
            'This content is centred and capped at the "sm" breakpoint '
            '(640 px). Resize the preview to see the container stay '
            'inside the max width with symmetric horizontal padding.',
          ),
        ),
      ),
    );
  }
}

사용 시기#

본문 영역이 넓은 모니터에서 가독성 있게 너비가 제한되어야 할 때
폼/카드 리스트/블로그 포스트의 바깥 경계
좌우 여백을 일관되게 유지하고 싶을 때 (CoreSpace.space16 기본)

기본 사용법#

CoResponsiveContainer(
  maxWidth: CoreResponsiveContainerMaxWidth.sm,
  child: CoCard(
    cardStyle: const CoreCardStyle(
      padding: EdgeInsets.all(CoreSpace.space16),
    ),
    child: Text('Centred, max-width content.'),
  ),
)

CoResponsiveContainer(
  maxWidth: CoreResponsiveContainerMaxWidth.sm,
  child: CoCard(
    child: div([Component.text('Centred, max-width content.')]),
  ),
)

Props#

속성	타입	기본값	설명
`child`	`Widget` / `Component`	—	래핑할 자식 (required)
`maxWidth`	`CoreResponsiveContainerMaxWidth?`	`xl`	최대 너비 프리셋 ( `sm` =640 / `md` =768 / `lg` =1024 / `xl` =1280 / `xxl` =1536 / `full` =제약 없음)
`centered`	`bool?`	`true`	가로 중앙 정렬 여부. `false`이면 부모 왼쪽에 붙음
`padding`	`EdgeInsetsGeometry?` / `double?`	`CoreSpace.space16` (수평)	수평 패딩. Flutter는 `EdgeInsetsGeometry`, Web는 logical pixel (`double`)

동작#

viewport ≥ maxWidth: 컨테이너는 maxWidth 제약으로 중앙에 고정, 좌우 여백은 균등
viewport < maxWidth: 컨테이너는 부모 전체 너비를 차지, 수평 패딩이 그대로 적용
maxWidth: .full — 제약 없음, 그냥 부모 너비 그대로 + 수평 패딩

플랫폼 차이#

Flutter: ConstrainedBox(maxWidth) + SizedBox(width: infinity) + Padding + (옵션) Center. maxWidth는 theme.scaling을 곱해 논리 픽셀로 확대됨
Web: div + w-full + mx-auto + max-w-screen-{size} Tailwind 클래스. 수평 패딩은 var(--coui-space-{n}) CSS 변수로 주입되어 브라우저 text-scaling에 자동 반응

두 플랫폼 모두 동일한 CoreBreakpoint 값(640/768/1024/1280/1536)에 결합되어 픽셀 폭이 동일합니다.