Search packages, repositories and app categories

Package detailsv0.0.12

holdable_button

A Flutter plugin that enables users to create buttons with a hold gesture, triggering a loading animation around the button while held.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
84
Likes
30
Pub points
140

Install package

flutter pub add holdable_button

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

HoldableButton is a Flutter package that allows developers to implement buttons with a hold gesture. When pressed and held, the button triggers a loading animation around its perimeter, providing visual feedback during prolonged interactions. It supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, making it ideal for interactive UIs requiring tactile feedback. The plugin is lightweight and easy to integrate, enhancing user experience in forms, confirmations, or actions that require deliberate input.

Use cases

  • Form submission with confirmation
  • Action triggers requiring deliberate input
  • Loading states during long operations
  • Interactive UI elements with feedback
  • Gamified app interactions

Key features

  • Hold gesture detection
  • Circular loading animation
  • Cross-platform support
  • Simple integration
  • Customizable duration and appearance
  • Built-in feedback mechanism

Suitable for

  • Developers building interactive forms
  • Apps needing confirmation gestures
  • UX-focused mobile and web apps
  • Gamified applications
  • Prototyping rapid interaction flows

Considerations

  • May require additional styling for custom designs
  • Performance impact on low-end devices
  • Limited to single-button hold behavior
  • Not suitable for fast tap-based workflows
  • Requires careful timing configuration for optimal UX

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Dependencies

Dependency list 2 items

  • plugin_platform_interface^2.1.7
  • web^1.0.0

Source repository

Projects using this package

No data available yet.