插件详情v3.1.0

slider_button

可自定义的滑块按钮小部件，用于激活/停用某个事件。

AndroidiOS

pub.dev API 文档源代码

近 30 天下载: 8030
喜欢数: 392
Pub 分数: 150

安装插件

flutter pub add slider_button

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个可自定义的滑块按钮小部件，专为通过平滑滑动手势激活或停用事件而设计。基于 Flutter 构建，提供简洁且交互性强的界面，适用于切换设置、启用功能或确认操作。该小部件支持自定义样式、动画以及跨平台的响应式行为。轻量级且易于集成到现有的 Flutter 应用中。非常适合表单、偏好设置和引导流程，其中直观的用户交互至关重要。

适合场景

切换应用设置
启用/禁用功能
用户引导确认
表单输入激活
首选项开关

主要特点

可自定义外观
平滑滑动动画
响应式触摸反馈
轻松集成
跨平台兼容性

适合对象

简单的切换界面
设置面板
引导屏幕
移动应用开发人员
面向用户界面的项目

使用建议

仅限基本切换功能
需要手动处理状态
不适合复杂交互
内置的辅助功能较少
默认不支持深色模式

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Slider Button v3.1.0

This package provides an easy implementation of a Slider Button to cancel current transaction or screen. Highly customizable iphone alike looking widget.

Null safety supported

Features

Circle or rectangle — Use radius to switch between circular and rectangular slider.
Shimmer label — Optional shimmer effect on the label (customizable colors).
Vibration — Optional haptic feedback on successful slide (vibrationFlag).
Customizable size — buttonSize, buttonWidth, height, width for full control.
Disabled state — Use disable: true to grey out and prevent sliding (with tooltip).
RTL support — Use rightToLeftLocale: true for right-to-left slide direction.
Dismiss threshold — Control how far the user must slide to confirm (dismissThresholds).
Glass effect — Frosted glass track with blur and optional white border (useGlassEffect, glassBlurSigma, glassBorderColor, glassBorderWidth).

How to use

Type 1

This is a Circle type widget. You just need to define the border radius to swap between rectangle and circle type widget.

Type 2

This is a Rectangle type widget.

import 'package:slider_button/slider_button.dart';

SliderButton(
      action: () async{
        ///Do something here OnSlide
        return true; //return false if you want to avoid dismissing the widget in the tree. 
      },

      ///Put label over here
      label: Text(
        "Slide to cancel !",
        style: TextStyle(
            color: Color(0xff4a4a4a),
            fontWeight: FontWeight.w500,
            fontSize: 17),
      ),
      icon: Center(
          child: Icon(
        Icons.power_settings_new,
        color: Colors.white,
        size: 40.0,
        semanticLabel: 'Text to announce in accessibility modes',
      )),

      ///Change All the color and size from here.
      width: 230,
      radius: 10,
      buttonColor: Color(0xffd60000),
      backgroundColor: Color(0xff534bae),
      highlightedColor: Colors.white,
      baseColor: Colors.red,
    );

Custom Usage

There are several options that allow for more control:

Properties	Default	Description
`action`	—	(required) Define an action after sliding; return `true` to dismiss, `false` to keep.
`buttonKey`	null	Custom key for the button. Useful for dynamic labels.
`child`	null	Your own widget for a fully customizable slider button.
`vibrationFlag`	false	Enable haptic vibration on successful slide.
`height`	70	Height of the widget.
`width`	270	Width of the widget.
`buttonSize`	null (→ 60)	Size of the sliding button (square). Must be ≤ height.
`buttonWidth`	null	Width of the button when not squared (e.g. wide sliders).
`backgroundColor`	Color(0xffe0e0e0)	Background color of the track.
`baseColor`	Colors.black87	Shimmer base color for the label.
`highlightedColor`	Colors.white	Shimmer highlight color for the label.
`buttonColor`	Colors.white	Color of the sliding button.
`label`	null	Widget used as the label (e.g. `Text`).
`alignLabel`	Alignment(0.6, 0)	Alignment of the label.
`boxShadow`	null	Shadow for the sliding button.
`icon`	null	Widget shown on the sliding button (e.g. icon or text).
`shimmer`	true	Enable or disable shimmer effect on the label.
`dismissThresholds`	0.75	Drag threshold (0.0–1.0); e.g. 0.75 = 75% of width to dismiss.
`disable`	false	When true, disables sliding and shows disabled state with tooltip.
`rightToLeftLocale`	false	When true, slide direction is right-to-left (for RTL locales).
`useGlassEffect`	false	When true, track uses frosted glass (blur + translucency).
`glassBlurSigma`	20	Blur strength for the glass track when `useGlassEffect` is true.
`glassBorderColor`	null	Border color for the glass track (e.g. white); null = no border.
`glassBorderWidth`	1.0	Border width for the glass track when `glassBorderColor` is set.