パッケージ、リポジトリ、アプリカテゴリを検索

rolling_switch のカバー
パッケージ詳細v0.0.2

rolling_switch

魅力的なアニメーション付きのカスタムスイッチボタン。色、アイコン、その他の装飾的なコンテンツをカスタマイズできます。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
305
いいね数
59
Pub ポイント
150

パッケージをインストール

flutter pub add rolling_switch

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutterで使用可能なカスタマイズ可能なスイッチボタンで、滑らかで魅力的なアニメーションを備えています。開発者はアプリのデザインに合わせて色、アイコン、その他の視覚要素をカスタマイズできます。複数のプラットフォームで状態の切り替えに動的で魅力的なユーザー体験を提供するのに最適です。パッケージは軽量で簡単に統合でき、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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。