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