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

插件详情v0.0.12

holdable_button

一个 Flutter 插件,允许用户创建带有长按手势的按钮,在按住时触发按钮周围的加载动画。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
84
喜欢数
30
Pub 分数
140

安装插件

flutter pub add holdable_button

插件介绍

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

HoldableButton 是一个 Flutter 包,允许开发者实现具有按住手势的按钮。当按钮被按下并持续按住时,其周围会触发加载动画,为长时间交互提供视觉反馈。它支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台,非常适合需要触觉反馈的交互式 UI。该插件轻量且易于集成,可增强表单、确认或需要刻意输入的操作中的用户体验。

适合场景

  • 表单提交并确认
  • 需要刻意输入的操作触发
  • 长时间操作期间的加载状态
  • 带有反馈的交互式UI元素
  • 游戏化应用互动

主要特点

  • 手势检测
  • 圆形加载动画
  • 跨平台支持
  • 简单集成
  • 可自定义的持续时间和外观
  • 内置反馈机制

适合对象

  • 开发交互式表单的开发者
  • 需要确认手势的应用
  • 以用户体验为中心的移动和Web应用
  • 游戏化应用
  • 快速原型交互流程

使用建议

  • 可能需要额外的样式设置以实现自定义设计
  • 对低端设备的性能影响
  • 仅限单按钮按住行为
  • 不适合快速点击工作流
  • 需要仔细配置时间以获得最佳用户体验

原始 README

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

Holdable Button Flutter Plugin

Holdable Button is a Flutter plugin that allows you to create interactive buttons with a unique animation. It enables users to hold a button, displaying a loading animation along its border, and then triggering a callback once the animation completes.

Demo 🎥

edge loading type:

voice oval

rectangle square

filling loading type:

long circle

Benefits 🚀

  • Interactive Animation: Engage users with a button that responds to long presses, offering an interactive and visually appealing experience.

  • Customizable: Tailor the button to match your app's design by adjusting parameters such as button color, loading color, border radius, child widget, animation duration, and start position.

  • User Engagement: Encourage users to interact with your app by introducing a novel way to trigger actions.

How to Use 🛠️

  1. Add the Holdable Button plugin to your pubspec.yaml file:

    dependencies:
      holdable_button: any
    
  2. Install the plugin by running:

    flutter pub get
    
  3. Import the package in your Dart code:

    import 'package:holdable_button/holdable_button.dart';
    
  4. Implement the HoldableButton widget:

    HoldableButton(
      loadingType: LoadingType.edgeLoading,
      width: 300,
      height: 200,
      buttonColor: Colors.blue,
      loadingColor: Colors.white,
      radius: 15.0,
      child: Text('Hold Me'),
      duration: 5,
      startPoint: 0.25,
      hasVibrate: true,
      onConfirm: () {
        // Callback when animation completes
      },
    )
    

Customization ⚙️

The HoldableButton widget supports the following parameters:

  • loadingType: the loading type: edgeLoading or fillingLoading.
  • buttonColor: The color of the button.
  • loadingColor: The color of the loading animation.
  • radius: The border radius of the button.
  • child: The widget inside the button.
  • duration: The duration of the animation in seconds.
  • startPoint: Start position in edgeLoading type.
  • hasVibrate: Enable Vibration after loading complete.
  • onConfirm: Callback when the animation completes.

Feel free to experiment with these parameters to achieve the desired look and behavior.

Contributing 🤝

Contributions are welcome! Please feel free to submit issues or pull requests.

所属分类

依赖

依赖清单 2 项

  • plugin_platform_interface^2.1.7
  • web^1.0.0

源码仓库

使用此插件的项目

暂无相关数据。