搜索插件、代码仓与 APP 分类

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设计师
  • 开发交互式表单的开发者
  • 需要主题或设置切换的应用程序
  • 具有自定义美学要求的项目
  • 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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。