Swap | CoUI
LogoCoUI

Swap

두 가지 상태 사이를 전환하는 토글 위젯 컴포넌트

Swap#

checked 상태에 따라 두 가지 콘텐츠를 전환하는 토글 컴포넌트입니다. 회전(rotate), 뒤집기(flip) 애니메이션을 지원합니다.

Live Preview#

default
Web
OFF
ON
Flutter
Loading Flutter... 
class SwapDefaultExample extends StatefulComponent {
  const SwapDefaultExample({super.key});

  @override
  State<SwapDefaultExample> createState() => _SwapDefaultExampleState();
}

class _SwapDefaultExampleState extends State<SwapDefaultExample> {
  bool _checked = false;

  @override
  Component build(BuildContext context) {
    return CoSwap(
      checked: _checked,
      onContent: Component.text('ON'),
      offContent: Component.text('OFF'),
      onToggle: (v) => setState(() => _checked = v),
    );
  }
}
class SwapDefaultExample extends StatefulWidget {
  const SwapDefaultExample({super.key});

  @override
  State<SwapDefaultExample> createState() => _SwapDefaultExampleState();
}

class _SwapDefaultExampleState extends State<SwapDefaultExample> {
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return CoSwap(
      checked: _checked,
      onContent: const Text('ON'),
      offContent: const Text('OFF'),
      onToggle: (v) => setState(() => _checked = v),
    );
  }
}
rotate
Web
OFF
ON
Flutter
Loading Flutter... 
class SwapRotateExample extends StatefulComponent {
  const SwapRotateExample({super.key});

  @override
  State<SwapRotateExample> createState() => _SwapRotateExampleState();
}

class _SwapRotateExampleState extends State<SwapRotateExample> {
  bool _checked = false;

  @override
  Component build(BuildContext context) {
    return CoSwap(
      checked: _checked,
      animation: CoreSwapAnimation.rotate,
      onContent: Component.text('ON'),
      offContent: Component.text('OFF'),
      onToggle: (v) => setState(() => _checked = v),
    );
  }
}
class SwapRotateExample extends StatefulWidget {
  const SwapRotateExample({super.key});

  @override
  State<SwapRotateExample> createState() => _SwapRotateExampleState();
}

class _SwapRotateExampleState extends State<SwapRotateExample> {
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return CoSwap(
      checked: _checked,
      animation: CoreSwapAnimation.rotate,
      onContent: const Text('ON'),
      offContent: const Text('OFF'),
      onToggle: (v) => setState(() => _checked = v),
    );
  }
}
flip
Web
OFF
ON
Flutter
Loading Flutter... 
class SwapFlipExample extends StatefulComponent {
  const SwapFlipExample({super.key});

  @override
  State<SwapFlipExample> createState() => _SwapFlipExampleState();
}

class _SwapFlipExampleState extends State<SwapFlipExample> {
  bool _checked = false;

  @override
  Component build(BuildContext context) {
    return CoSwap(
      checked: _checked,
      animation: CoreSwapAnimation.flip,
      onContent: Component.text('ON'),
      offContent: Component.text('OFF'),
      onToggle: (v) => setState(() => _checked = v),
    );
  }
}
class SwapFlipExample extends StatefulWidget {
  const SwapFlipExample({super.key});

  @override
  State<SwapFlipExample> createState() => _SwapFlipExampleState();
}

class _SwapFlipExampleState extends State<SwapFlipExample> {
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return CoSwap(
      checked: _checked,
      animation: CoreSwapAnimation.flip,
      onContent: const Text('ON'),
      offContent: const Text('OFF'),
      onToggle: (v) => setState(() => _checked = v),
    );
  }
}

사용 시기 (When to Use)#

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

  • 다크/라이트 모드 아이콘 전환
  • 볼륨 음소거/켜기 아이콘 토글
  • 두 상태 간 시각적 전환 효과가 필요할 때

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

  • Toggle: on/off 스위치 UI
  • Collapsible: 콘텐츠 영역 접기/펴기

기본 사용법 (Basic Usage)#

CoSwap(
  checked: _checked,
  animation: CoreSwapAnimation.rotate,
  onContent: Icon(Icons.sunny),
  offContent: Icon(Icons.nightlight),
  onToggle: (v) => setState(() => _checked = v),
)

CoSwap(
  checked: _checked,
  animation: CoreSwapAnimation.rotate,
  onContent: Component.text('ON'),
  offContent: Component.text('OFF'),
  onToggle: (v) => setState(() => _checked = v),
)

Props / Parameters#

속성타입기본값설명
onContent Widget / Component 필수 "on" 상태 콘텐츠
offContent Widget / Component 필수 "off" 상태 콘텐츠
checkedboolfalse현재 상태
animation CoreSwapAnimation none 전환 애니메이션 (none, rotate, flip)
duration Duration? 300ms 애니메이션 지속 시간
onToggle ValueChanged<bool>? null 토글 콜백

동작 스펙 (Behavior)#

  • 클릭/탭 시 onToggle 콜백 호출
  • checked 상태에 따라 onContent/offContent 전환
  • rotate: 180도 회전 + 교차 페이드
  • flip: Y축 180도 뒤집기 + 교차 페이드
  • none: 교차 페이드만

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

항목FlutterWeb
클래스명CoSwapCoSwap
애니메이션 AnimationController + Transform CSS transform + transition
이벤트GestureDetector.onTapclick event

관련 컴포넌트 (Related Components)#