套件詳情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.