Mask

자식을 지정된 모양으로 클리핑하는 마스크 컴포넌트

Mask#

Mask는 자식을 circle, squircle, heart, hexagon, star, triangle 등 15종 모양으로 클리핑합니다. Flutter는 ClipPath와 커스텀 CustomClipper로 경로를 계산하고, Web은 daisyUI mask-* CSS 클래스를 사용합니다.

Live Preview#

default

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return Mask(
      child: div(
        [],
        classes: 'w-${CoreSpace.scale.space64} h-${CoreSpace.scale.space64} '
            'bg-${cs.primary}',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space64,
      height: CoreSpace.space64,
      child: Mask(
        child: Container(color: Theme.of(context).colorScheme.primary.toValue()),
      ),
    );
  }
}

circle

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return Mask(
      shape: .circle,
      child: div(
        [],
        classes: 'w-${CoreSpace.scale.space64} h-${CoreSpace.scale.space64} '
            'bg-${cs.primary}',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space64,
      height: CoreSpace.space64,
      child: Mask(
        shape: .circle,
        child: Container(color: Theme.of(context).colorScheme.primary.toValue()),
      ),
    );
  }
}

heart

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return Mask(
      shape: .heart,
      child: div(
        [],
        classes: 'w-${CoreSpace.scale.space64} h-${CoreSpace.scale.space64} '
            'bg-${cs.primary}',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space64,
      height: CoreSpace.space64,
      child: Mask(
        shape: .heart,
        child: Container(color: Theme.of(context).colorScheme.primary.toValue()),
      ),
    );
  }
}

hexagon

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return Mask(
      shape: .hexagon,
      child: div(
        [],
        classes: 'w-${CoreSpace.scale.space64} h-${CoreSpace.scale.space64} '
            'bg-${cs.primary}',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space64,
      height: CoreSpace.space64,
      child: Mask(
        shape: .hexagon,
        child: Container(color: Theme.of(context).colorScheme.primary.toValue()),
      ),
    );
  }
}

star

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return Mask(
      shape: .star,
      child: div(
        [],
        classes: 'w-${CoreSpace.scale.space64} h-${CoreSpace.scale.space64} '
            'bg-${cs.primary}',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space64,
      height: CoreSpace.space64,
      child: Mask(
        shape: .star,
        child: Container(color: Theme.of(context).colorScheme.primary.toValue()),
      ),
    );
  }
}

triangle

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    return Mask(
      shape: .triangle,
      child: div(
        [],
        classes: 'w-${CoreSpace.scale.space64} h-${CoreSpace.scale.space64} '
            'bg-${cs.primary}',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space64,
      height: CoreSpace.space64,
      child: Mask(
        shape: .triangle,
        child: Container(color: Theme.of(context).colorScheme.primary.toValue()),
      ),
    );
  }
}

사용 시기#

아바타처럼 이미지를 특정 모양으로 잘라야 할 때
장식용 도형 배경
아이콘/배지에 독특한 모양을 적용할 때

기본 사용법#

SizedBox(
  width: CoreSpace.space64,
  height: CoreSpace.space64,
  child: Mask(
    shape: .hexagon,
    child: Container(color: Theme.of(context).colorScheme.primary),
  ),
)

Mask(
  shape: .hexagon,
  child: div(
    [],
    classes: 'w-\${CoreSpace.scale.space64} h-\${CoreSpace.scale.space64} '
        'bg-\${cs.primary}',
  ),
)

Props#

속성	타입	기본값	설명
`child`	`Widget` / `Component`	—	클리핑 대상 콘텐츠 (required)
`shape`	`CoreMaskShape`	`squircle`	마스크 모양
`half`	`CoreMaskHalf`	`none`	절반 잘라내기 (`none` / `first` / `second`)

지원되는 shape#

circle, squircle, square, heart, hexagon, hexagon2, decagon, pentagon, diamond, star, star2, triangle, triangle2, triangle3, triangle4.

Mask

Mask#

Live Preview#

사용 시기#

기본 사용법#

Props#

지원되는 shape#

관련 컴포넌트#