StageContainer#

부모의 가로 폭을 실시간으로 측정해 설정된 breakpoint rung(기본: Bootstrap [576, 768, 992, 1200, 1400]) 으로 클램프한 뒤, 남는 여유 폭을 좌우 padding 으로 자동 분배해서 콘텐츠를 중앙 고정폭으로 유지하는 반응형 컨테이너입니다. Flutter는 LayoutBuilder, Web은 ResizeObserver 를 사용하지만 builder에 전달되는 resolved padding 계산식은 완전히 동일합니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    final ts = context.theme.typography;
    final boxClasses =
        'h-${CoreSpace.scale.space80} '
        'flex items-center justify-center '
        'bg-${cs.surfaceContainer} border border-${cs.outline} '
        'rounded-${CoreRadius.scale.radius16} '
        'text-${ts.bodyMedium} text-${cs.onSurface}';
    return CoStageContainer(
      builder: (context, padding) {
        return div(
          [
            Component.text(
              'left: ${padding.left.toStringAsFixed(0)}, '
              'right: ${padding.right.toStringAsFixed(0)}',
            ),
          ],
          classes: boxClasses,
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return CoStageContainer(
      builder: (context, padding) {
        return Padding(
          padding: padding,
          child: Container(
            height: CoreSpace.space80,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: theme.colorScheme.surfaceContainer,
              borderRadius: BorderRadius.circular(CoreRadius.radius16),
              border: Border.all(color: theme.colorScheme.outline!),
            ),
            child: Text(
              'left: ${padding.left.toStringAsFixed(0)}, '
              'right: ${padding.right.toStringAsFixed(0)}',
              style: theme.typography.bodyMedium.copyWith(
                color: theme.colorScheme.onSurface,
              ),
            ),
          ),
        );
      },
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 큰 화면에서도 본문 영역이 고정 폭 + 중앙 정렬이어야 할 때 (랜딩 페이지, Docs, 블로그 아티클 등)
• 단계적 breakpoint 리듬이 필요한 반응형 그리드 루트
• Flutter/Web에 동일한 반응형 규칙을 적용하고 싶을 때

대신 다른 컴포넌트를 사용하세요:

• ResponsiveContainer: breakpoint별 max-width만 바꾸고 직접 padding 재분배는 하지 않을 때
• ResponsiveGrid: breakpoint별 column 수 를 바꾸고 싶을 때

기본 사용법 (Basic Usage)#

CoStageContainer(
  builder: (context, padding) {
    return Padding(
      padding: padding,
      child: Text('Content centered on breakpoint rungs'),
    );
  },
)

Web도 동일한 생성자로 사용합니다. padding 파라미터 타입만 다릅니다:

CoStageContainer(
  builder: (context, padding) {
    // padding = (left, top, right, bottom) record
    return div([Component.text('Web content')]);
  },
)

Props / Parameters#

Theming#

CoreComponentTheme.stageContainer 에서 기본값을 오버라이드할 수 있습니다. padding은 per-axis double 로 저장되어 Flutter/Web 양쪽에서 동일 값 비교됩니다:

CoreComponentTheme(
  stageContainer: CoreStageContainerTheme(
    breakpoint: CoreConstantStageBreakpoint(200),
    paddingLeft: 16,
    paddingRight: 16,
  ),
)

동작 노트#

• viewport < minSize: 좌우 padding을 0으로 만들어 컨텐츠가 전체 폭 사용
• viewport > maxSize: 남는 폭을 좌우에 균등 분할해 콘텐츠를 중앙 고정폭으로
• 중간 rung: 현재 rung의 minWidth에 클램프하고 남는 폭을 좌우 padding에 추가

관련 컴포넌트#

• ResponsiveContainer — breakpoint별 max-width
• ResponsiveGrid — breakpoint별 column 수
• Resizable — 사용자 드래그 분할