FLUTTER ECOSYSTEM

jamescardona11/rolling_switch

Flutter 앱용 완전히 사용자 정의 가능한 롤링 스위치 위젯

롤링 스위치 프로젝트 이미지
Stars
15
Forks
5
최근 푸시(UTC)
2021. 5. 30.
프로젝트 상태
활성
James Cardona GitHub avatar
GITHUB User

James Cardona ↗

Tech explorer | Passionate about mobile development, Android, iOS, and Flutter.

언어Dart

기술 주제

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 4 개
  • flutter{"sdk":"flutter"}
  • tools_tkmonkey^0.0.1
  • flutter_test개발 의존성{"sdk":"flutter"}
  • lint개발 의존성^1.5.3

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

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 https://img.shields.io/github/license/jamescardona11/rolling_switch https://img.shields.io/pub/v/rolling_switch


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

https://github.com/jamescardona11/rolling_switch/blob/main/img/example.gif?raw=true