A customized GestureDetector that acts on holding a determined Widget

Related tags

Templates holding_gesture
Overview

holding_gesture

A customized GestureDetector that acts on holding a determined Widget.

Getting Started

import 'package:holding_gesture/holding_gesture.dart';

HoldDetector

After importing, all you have to do is use HoldDetector the same way you already used GestureDetector! As it is on the documentation, its onTap override won't work when using a child that has onPressed or a similar callback, so you should pass the single tap behaviour to that.

HoldDetector(
  onHold: _incrementCounter,
  holdTimeout: Duration(milliseconds: 200),
  enableHapticFeedback: true,
  child: ElevatedButton(
    onPressed: _incrementCounter,
    child: Text("onHold"),
  ),
),

HoldTimeoutDetector

HoldTimeoutDetector works differently, you can use it to hold conditions or display something while the user is holding it for a predetermined time, and then execute an action after this duration passes, or canceling it if the hold action ceases. In the example, I'm using it to show a feedback on the button, and on the screen that something is loading, and then executing the increment once the timeout happens.

HoldTimeoutDetector(
  onTimeout: () {
    _incrementCounter();
    _updateLoading(false);
  },
  onTimerInitiated: () => _updateLoading(true),
  onCancel: () => _updateLoading(false),
  holdTimeout: Duration(milliseconds: 3000),
  enableHapticFeedback: true,
  child: ElevatedButton.icon(
    onPressed: () {},
    label: Text("onTimeout"),
    icon: _isLoading
        ? SizedBox(
            width: 16,
            height: 16,
            child: CircularProgressIndicator(
              strokeWidth: 2,
              valueColor: AlwaysStoppedAnimation(Colors.white),
            ),
          )
        : Icon(Icons.timer_3),
  ),
),

The main example, above and in example/, is the same as the default Flutter app, with the adition of a haptic feedback to each tick and the ability to hold the button to keep adding to the counter.

Comments
  • Support null safety

    Support null safety

    This is a request to add support for null safety to package:holding_gesture. We depend on your awesome package, so would be great to have null safety enabled.

    The Dart/Flutter team already encourages publishing the migrated packages: See this blog post.

    See the migration guide for details about enabling null safety.

    opened by IchordeDionysos 2
  • Feature request: detect when a hold has begun and ended

    Feature request: detect when a hold has begun and ended

    I was looking for a Gesture detector that enables me to do the following for a Button:

    • When the user starts pressing the button, a progress bar is shown (either overlayed or somewhere else on the screen) with an event that resembles "onLongPressInitiated".
    • If the user releases the button before the timeout/longPress event occurs , the Progress bar is hidden, onCancel fired
    • If the user press and holds until the timeout has expired, the longPress event occurs. (And I can hide the progressbar)

    I was hoping this library could do that, but I'm not being able to accomplish this. I suppose it would be possible if it would expose an event that is something like "onLongPressInitiated".

    Would this be possible?

    opened by MagnusJohansson 1
  • No haptic feedback

    No haptic feedback

    Using the following code, I was expecting the device to 'vibrate' for haptic feedback. The action model.muteApp is called, but I don't sense anything on the device.

    yaml set to holding_gesture: ^0.0.3

                  Align(
                alignment: Alignment(0.9, 0.55),
                child: HoldDetector(
                  onHold: model.muteApp,
                  holdTimeout: Duration(milliseconds: 750),
                  enableHapticFeedback: true,
                  child: FloatingActionButton(
                    onPressed: () async {
                      await model.toggleSound();
                    },
                    child: model.getSoundButton(),                    
                    backgroundColor: Colors.white,
                  ),
                ),
              )
    opened by ratsey 1
  • Hold gesture gets stuck

    Hold gesture gets stuck

    If held for a while (15-20 seconds, always differs) and released, onHold callback gets called infinitely

    Using the example code. Note, the bug is tricky to recreate

    opened by IhorKlimov 1
  • Bump to stable version

    Bump to stable version

    Now that null safety is stable, packages should publish stable versions.

    This also prevents publishing warnings on Pub (see https://github.com/simpleclub/math_keyboard/runs/2117873696#step:6:213).

    For more information, see https://github.com/fkleon/math-expressions/issues/46.

    opened by creativecreatorormaybenot 0
  • Use with onTap

    Use with onTap

    Hi, I would like use your package with onTap, but it not works perfectly. Sometimes the onTap with InkWell and LongPress with you package not works, is it possible a conflict? You see here:

    https://github.com/EliaTolin/infinity_sweeper/blob/d52f39ccd5c5385dcf4fae5ac38e3314da640c16/lib/widgets/game/cell_widget.dart

    You have suggest?

    opened by EliaTolin 1
Owner
Gildásio Filho
Mobile Software Engineer in love with Flutter, I also make music sometimes!
Gildásio Filho
GitHub
Selectable Circle where colors can be customized and a child widget can be defined

selectable_circle A Flutter package for an Circle that can be Selected with animation. How to use SelectableCircle( width: 80.0, onSelected: (

null 11 Sep 29, 2021
Auto route lib - Personal customized use to increase CupertinoRoute transition duration

Auto route lib - Personal customized use to increase CupertinoRoute transition duration , auto route 1.0.0-beta.10 base, so i have to reupload from .pub-cache instead fork it

Mochamad Nizwar Syafuan 0 Jan 4, 2022
A customized Flutter Drawer

SideMenuDownSide This project is about a Customized Flutter Drawer Table of contents How it work Struture How to use Contribution How it work Structur

Tran Manh Quy 10 May 25, 2022
Widget to count the amount of nested widget tree, useful in the dynamic construction of the interface when it is important to know the depth of widget.

widget_tree_depth_counter Widget Tree Depth Counter WidgetTreeDepthCounter is a simple widget to count the amount of nested widget tree, useful in the

Riccardo Cucia 4 Aug 1, 2022
Slider controller - A package that gives us a slider controller a custom widget. This widget is used for easy customization for the slider widget

slider_controller A package that gives us a slider controller a custom widget. T

MindInventory 15 Sep 5, 2022
A simple detailed flutter widget that looks almost the same as the real instagram mention widget.

Instagram Mention Widgets 'small details do matter' ❤️ This package provides simple and almost the same UI details that the real Instagram mention wid

AbdulMuaz Aqeel 20 Oct 10, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
A flutter widget which renders its child outside the original widget hierarchy.

overlay_container A flutter widget which renders its child outside the original widget hierarchy. Demo. This demo is present as an example here. You c

Mustansir Zia 30 Jun 10, 2022
Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Flutter Tutorial - Inherited Widget The InheritedWidget helps you to easily dist

Behruz Hurramov 0 Dec 29, 2021
FT-Custom-Widget - A Custom Widget Built With Flutter

Custom Widget Watch it on YouTube Product Screen Sample when you implement compl

Firgia 5 Mar 29, 2022
A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

icon_picker A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField Usage In the

m3uzz Soluções em TI 11 Sep 27, 2022
Flip widget - A Simple Flip widget For Flutter

flip_widget Flip your widget. Usage FlipWidget( key: _flipKey, child: Co

null 24 Nov 13, 2022
Iridium-reader-widget - Plug and play reader widget allowing to easily integrate an Iridium viewer inside any app

Plug and play reader widget allowing to easily integrate an Iridium viewer insid

Mantano 15 Dec 31, 2022
A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget)

Use_Of_Card_And_Padding_Class A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget) Getting Started This project is a starting p

Avinandan Bose 1 Mar 18, 2022
Kullanmaya hazir widget cozumleri -Ready to use widget solutions

Ready to use widgets ( ???? ) Projelerimde yararlı widget çözümleri kullanıyorum ve çoğu zaman orada kalıyor. Bunları hem ben hemde sizden gelenler il

Veli Bacik 117 Dec 27, 2022
This widget automatically scrolls the custom child widget to an infinite loop.

Scroll Loop Auto Scroll This widget automatically scrolls the custom child widget to an infinite loop. Example Features Infinite Auto Scroll Custom ch

Ashish Raturi 9 Dec 12, 2022
Widget that gives you the size of the widget in runtime.

Tailor Flutter widget that calculates the size of a widget in runtime. Usage Just wrap your widget with Tailor and get the size in the builder. The bu

Aman Gupta 7 Nov 2, 2022
A Flutter widget to create an iOS settings-table (static TableView).

flutter_cupertino_settings A Flutter widget to create an iOS settings-table (static TableView). import 'package:flutter_cupertino_settings/flutter_cup

Matthias Rupp 234 Dec 28, 2022