Flutter 如何在两个方向上滑动按钮

Question

我能够成功实现向前滑动。现在，我还想Enable Reverse Swiping，这样用户就可以双向滑动。您能否提供有关如何实现这一目标的指导？

这是我想要的输出。

这是我的代码，在向前滑动时效果很好。我试图扭转它，但无法实现。我已经搜索了很多但没有找到任何资源。

class _SlideButtonState extends State<SlideButton> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _slideAnimation;
  bool _showIcon = false;
  bool _hideSlideText = false;
  late Offset _dragStart;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    _slideAnimation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(1.0, 0.0),
    ).animate(_controller)
      ..addListener(() {
        setState(() {});
        print(_slideAnimation.value);
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            _showIcon = true;
            _hideSlideText = true;
          });
          print(status);
        }
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onHorizontalDragUpdate(DragUpdateDetails details) {
    final dx = details.globalPosition.dx - _dragStart.dx;
    double slidePercent = dx / context.size!.width;
    slidePercent = slidePercent.clamp(0.0, 1.0);
    _controller.value = slidePercent;
  }

  void _onHorizontalDragEnd(DragEndDetails details) {
    if (_controller.value < 1.0) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragDown: (details) {
        _dragStart = details.globalPosition;
      },
      onHorizontalDragUpdate: _onHorizontalDragUpdate,
      onHorizontalDragEnd: _onHorizontalDragEnd,
      child: Container(
        height: 50.0,
        width: 250,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(25.0),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            if (!_hideSlideText)
              ClipRRect(
                borderRadius: BorderRadius.circular(25.0),
                child: SlideTransition(
                  position: _slideAnimation,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(Icons.arrow_forward_ios),
                      Shimmer.fromColors(
                        baseColor: Colors.grey[400]!,
                        highlightColor: Colors.grey[300]!,
                        child: const Text(
                          'slide to continue',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            AnimatedOpacity(
              opacity: _showIcon ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 250),
              child: const Icon(
                Icons.check,
                color: Colors.black,
                size: 30.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}