패키지, 저장소 및 앱 카테고리 검색

rolling_switch 표지
패키지 상세v0.0.2

rolling_switch

매력적인 애니메이션을 가진 사용자 정의 스위치 버튼으로 색상, 아이콘 및 기타 미적 요소를 사용자 정의할 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
305
좋아요
59
Pub 점수
150

패키지 설치

flutter pub add rolling_switch

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

플러터에서 사용할 수 있는 사용자 정의 가능한 스위치 버튼으로 부드럽고 매력적인 애니메이션을 제공합니다. 개발자는 앱 디자인에 맞게 색상, 아이콘 및 기타 시각적 요소를 조정할 수 있습니다. 다양한 플랫폼에서 상태 전환 시 동적이고 몰입감 있는 사용자 경험을 제공하는 데 이상적입니다. 이 패키지는 가볍고 쉽게 통합 가능하며 Android, iOS, Web, macOS, Windows, Linux를 지원합니다. 유연한 커스터마이징 옵션으로 단순한 UI부터 복잡한 UI 요구 사항까지 모두 충족시킬 수 있습니다.

사용 사례

  • 테마 전환
  • 기능 켜기/끄기
  • 사용자 선호 설정
  • 인터랙티브 온보딩 흐름
  • 사용자 정의 폼 컨트롤

주요 기능

  • 부드러운 스크롤 애니메이션
  • 색상 사용자 지정
  • 아이콘 지원
  • 크로스 플랫폼 호환성
  • 간편한 통합
  • 사용자 정의 가능한 토글 동작

적합한 대상

  • 애니메이션 스위치를 찾는 UI 디자이너
  • 인터랙티브 폼을 개발하는 개발자
  • 테마 또는 설정 전환을 필요로 하는 앱
  • 맞춤 미적 요구 사항을 가진 프로젝트
  • 다중 플랫폼을 대상으로 하는 Flutter 앱

고려 사항

  • 접근성에 대한 추가 스타일링이 필요할 수 있습니다
  • 애니메이션 성능은 기기마다 다릅니다
  • 시각적 사용자 정의에 국한되며 상태 관리는 포함되지 않음
  • 고주기 상태 변경에 적합하지 않음
  • 명확한 시각적 피드백과 함께 사용하는 것이 가장 좋습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Rolling Switch Package


Full customizable rolling switch widget for flutter apps forked from this library
Custom Switch button with attractive animation, made to allow you to customize colors, icons, custom widget and other cosmetic content.

Manage the widget states in the same way you do with the classical material's switch widget.

style: lint


Quick Start

Import this library into your project:

roling_switch: ^latest_version

Basic Implementation

Using the icon constructor

RollingSwitch.icon(
  onChanged: (bool state) {
    print('turned ${(state) ? 'on' : 'off'}');
  },
  rollingInfoRight: const RollingIconInfo(
    icon: Icons.flag,
    text: Text('Flag'),
  ),
  rollingInfoLeft: const RollingIconInfo(
    icon: Icons.check,
    backgroundColor: Colors.grey,
    text: Text('Check'),
  ),
),
More possibilities
  • Create a custom widget, use:
    const RollingWidgetInfo(icon: FlutterLogo())
    

  • Change color background between transactions left/right
    RollingSwitch.icon(    
      rollingInfoRight: const RollingIconInfo(
        backgroundColor: Colors.green,
      ),
      rollingInfoLeft: const RollingIconInfo(
        backgroundColor: Colors.grey,
      ),
    )
    

  • Change Circular color
    RollingSwitch.icon(
      ...
      circularColor: (icon: FlutterLogo())
    )
    

  • Create a custom text indicator
    RollingSwitch.icon(    
      rollingInfoRight: const RollingIconInfo(
        text: Text('Flag'),
      ),
      rollingInfoLeft: const RollingIconInfo(
        text: Text('Stack'),
      ),
    )
    

  • Enable drag switch
    RollingSwitch.icon(
      ...
      enableDrag: true
    )
    

Previews

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.