MediaQuery

반응형 브레이크포인트 기반 조건부 표시/숨김 컴포넌트

MediaQuery#

CoMediaQueryVisibility는 viewport 너비에 따라 [child]를 보이거나 [alternateChild]로 대체합니다. 임의 px(minWidth/maxWidth)과 Tailwind-표준 breakpoint(minBreakpoint/maxBreakpoint) 양쪽을 지원합니다.

Live Preview#

Web

Visible at md and above

Visible below md

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return CoMediaQueryVisibility(
      minBreakpoint: .md,
      alternateChild: div(
        classes: 'w-full p-${CoreSpace.scale.space12} '
            'bg-${cs.surfaceContainer} text-${cs.onSurface}',
        [Component.text('Visible below md')],
      ),
      child: div(
        classes: 'w-full p-${CoreSpace.scale.space12} '
            'bg-${cs.primaryContainer} text-${cs.onPrimaryContainer}',
        [Component.text('Visible at md and above')],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final cs = theme.colorScheme;
    final ts = theme.typography;
    return CoMediaQueryVisibility(
      minBreakpoint: .md,
      alternateChild: Container(
        width: double.infinity,
        padding: EdgeInsets.all(CoreSpace.space12),
        color: cs.surfaceContainer,
        child: DefaultTextStyle.merge(
          style: ts.bodyMedium.copyWith(color: cs.onSurface),
          child: const Text('Visible below md'),
        ),
      ),
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.all(CoreSpace.space12),
        color: cs.primaryContainer,
        child: DefaultTextStyle.merge(
          style: ts.bodyMedium.copyWith(color: cs.onPrimaryContainer),
          child: const Text('Visible at md and above'),
        ),
      ),
    );
  }
}

사용 시기#

작은 화면에서는 모바일 전용 UI, 큰 화면에서는 데스크탑 UI를 보여줄 때
폭이 좁을 때만 특정 도움말/축약 뷰를 보여주고 싶을 때
광고/배너처럼 특정 해상도 이상에서만 노출하고 싶을 때

기본 사용법#

CoMediaQueryVisibility(
  minBreakpoint: .md,        // ≥ 768px에서 child 표시
  alternateChild: Text('모바일 전용'),
  child: Text('md 이상 전용'),
)

// 임의 px
CoMediaQueryVisibility(
  minWidth: 900,
  maxWidth: 1280,
  child: Text('900–1280px 범위에서만 표시'),
)

CoMediaQueryVisibility(
  minBreakpoint: .md,
  alternateChild: div([Component.text('모바일 전용')]),
  child: div([Component.text('md 이상 전용')]),
)

// 임의 px — CoUI가 scoped @media 규칙을 inline으로 주입합니다
CoMediaQueryVisibility(
  minWidth: 900,
  maxWidth: 1280,
  child: div([Component.text('900–1280px 범위에서만 표시')]),
)

Props#

속성	타입	기본값	설명
`child`	`Widget` / `Component`	—	범위 내일 때 보여줄 콘텐츠 (required)
`alternateChild`	`Widget?` / `Component?`	`null`	범위 밖일 때 대체 콘텐츠
`minWidth`	`double?`	`null`	최소 viewport 너비 (px)
`maxWidth`	`double?`	`null`	최대 viewport 너비 (px)
`minBreakpoint`	`CoreBreakpoint?`	`null`	최소 breakpoint (xs/sm/md/lg/xl/xxl)
`maxBreakpoint`	`CoreBreakpoint?`	`null`	최대 breakpoint

우선순위: minWidth/maxWidth (widget) > minBreakpoint/maxBreakpoint (widget) > theme 설정.

브레이크포인트 값#

이름	최소 너비 (px)
`xs`	0
`sm`	640
`md`	768
`lg`	1024
`xl`	1280
`xxl`	1536