How to trigger a function when a custom made slider (using gesture detector) reaches the end

Question

I used a GestureDetector and AnimatedBuilder to get a slider. I want to trigger a function whenever the slider reaches the end and then vanish it in an animation, which I can achieve by using visibility, but how would I know that when my slider has reached the end? Please help me out.

Here is the code -

class SwipeButton extends StatefulWidget {
  final ValueChanged<double>? valueChanged;
  final String? text;
  final Function? callBack;

  SwipeButton({this.valueChanged, this.text, this.callBack});

  @override
  SwipeButtonState createState() {
    return new SwipeButtonState();
  }
}

class SwipeButtonState extends State<SwipeButton> {
  ValueNotifier<double> valueListener = ValueNotifier(.0);

  @override
  void initState() {
    valueListener.addListener(notifyParent);
    super.initState();
  }

  void notifyParent() {
    if (widget.valueChanged != null) {
      widget.valueChanged!(valueListener.value);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: colorPrimary,
      height: 40.0,
      padding: EdgeInsets.symmetric(horizontal: 10.0),
      child: Stack(
        children: [
          Center(
            child: Text(
              "${widget.text}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 17,
              ),
            ),
          ),
          Builder(
            builder: (context) {
              final handle = GestureDetector(
                onHorizontalDragUpdate: (details) {
                  valueListener.value = (valueListener.value +
                      details.delta.dx / context.size!.width)
                      .clamp(.0, 1.0);
                  print("${details.delta.dx} ${context.size!.width}");
                  if(details.delta.dx==context.size!.width) {
                    print("Reached");
                    //Call a function
                  }
                },
                onPanEnd: (details) {
                  print('\n \n Ended');
                },
                onPanUpdate: (details) {},
                child: Container(
                  height: 25.0,
                  width: 25.0,
                  color: Colors.white,
                  child: const Center(
                    child: Icon(
                      Icons.arrow_forward,
                      color: Colors.orange,
                      size: 12,
                    ),
                  ),
                ),
              );

              return AnimatedBuilder(
                animation: valueListener,
                builder: (context, child) {
                  return Align(
                    alignment: Alignment(valueListener.value * 2 - 1, 0),
                    child: child,
                  );
                },
                child: handle,
              );
            },
          ),
        ],
      ),
    );
  }
}

Please visit this link: [iPhone : How to detect the end of slider drag?](https://stackoverflow.com/questions/9390298/iphone-how-to-detect-the-end-of-slider-drag) — Ali Punjabi, Jan 14 '22 at 08:14
Yeah, I can get that, but user can stop sliding somewhere between also. So, I want that as soon as user completely drags the container to the other corner, I want to trigger an event. — Shreyansh Sharma, Jan 14 '22 at 09:33

score 0 · Answer 1 · answered Jan 14 '22 at 12:12

details.delta.dx is the amount the pointer has moved in the coordinate space of the event receiver since the previous update.

you have value listener it self, why not use that:

 onHorizontalDragUpdate: (details) {
                    valueListener.value = (valueListener.value +
                        details.delta.dx / context.size!.width)
                        .clamp(.0, 1.0);
                    print("${valueListener.value} ${context.size!.width}");
                    if(valueListener.value==1) {
                      print("Reached");
                      //Call a function
                    }
                  },

How to trigger a function when a custom made slider (using gesture detector) reaches the end

1 Answers1