Hover#

자식 위젯을 감싸 두 가지 기능을 제공하는 래퍼 컴포넌트입니다.

1. 호버 상태 추적 — onHover / onEnter / onExit 콜백으로 포인터 호버 상태를 보고합니다.
2. 호버 시각 효과 — 포인터가 위에 있는 동안 effect(scale / fade / brighten / shadow)를 애니메이션합니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    return Hover(
      effect: CoreHoverEffect.scaleUp,
      child: Card(child: const Text('Hover me')),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Hover(
      effect: CoreHoverEffect.scaleUp,
      child: Card(child: const Text('Hover me')),
    );
  }
}

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

  @override
  Component build(BuildContext context) {
    return Hover(
      effect: CoreHoverEffect.fade,
      child: Card(child: const Text('Hover me')),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Hover(
      effect: CoreHoverEffect.fade,
      child: Card(child: const Text('Hover me')),
    );
  }
}

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

  @override
  Component build(BuildContext context) {
    return Hover(
      effect: CoreHoverEffect.shadow,
      child: Card(child: const Text('Hover me')),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Hover(
      effect: CoreHoverEffect.shadow,
      child: Card(child: const Text('Hover me')),
    );
  }
}

사용 시기 (When to Use)#

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

• 카드/이미지에 호버 시 확대·페이드·그림자 효과를 주고 싶을 때
• 포인터 호버 진입/이탈을 콜백으로 추적해야 할 때

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

• HoverCard: 호버 시 떠오르는 정보 패널이 필요할 때
• Tooltip: 호버 시 간단한 도움말 텍스트를 띄울 때

기본 사용법 (Basic Usage)#

Hover(
  effect: CoreHoverEffect.scaleUp,
  child: Card(child: const Text('Hover me')),
)

Hover(
  effect: CoreHoverEffect.scaleUp,
  child: Card(child: const Text('Hover me')),
)

Props / Parameters#

동작 스펙 (Behavior)#

• 포인터가 진입하면 onEnter가 즉시 호출되고, 시각 효과가 즉시 적용됩니다.
• 포인터가 waitDuration 동안 머무르면 onHover(true)가 발화합니다.
• 포인터가 이탈하면 onExit가 즉시 호출되고, 시각 효과가 즉시 해제됩니다.
• 이탈 후 showDuration 뒤에 onHover(false)가 발화합니다. 단 minDuration보다 빨리 이탈하면 남은 시간만큼 활성 상태가 유지됩니다.
• scaleUp/scaleDown은 1.05 / 0.95 배율, fade는 0.8 불투명도, brighten은 1.1배 밝기, shadow는 CoreShadow.lg 그림자를 적용합니다.

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• HoverCard: 호버 시 떠오르는 정보 패널
• Tooltip: 호버 시 도움말 텍스트
• Swap: 두 상태 간 전환 애니메이션