How to Implement Swipe Gestures in a FlutterFlow App

1// Custom Widget: SwipeCard
2// Parameters: onSwipeLeft (Action), onSwipeRight (Action), threshold (double)
3
4class SwipeCard extends StatefulWidget {
5  final Widget child;
6  final Future<void> Function() onSwipeLeft;
7  final Future<void> Function() onSwipeRight;
8  final double threshold;
9
10  const SwipeCard({
11    Key? key,
12    required this.child,
13    required this.onSwipeLeft,
14    required this.onSwipeRight,
15    this.threshold = 100.0,
16  }) : super(key: key);
17
18  @override
19  State<SwipeCard> createState() => _SwipeCardState();
20}
21
22class _SwipeCardState extends State<SwipeCard>
23    with SingleTickerProviderStateMixin {
24  double _dragOffsetX = 0.0;
25  bool _isAnimating = false;
26  late AnimationController _animController;
27  late Animation<double> _animation;
28
29  @override
30  void initState() {
31    super.initState();
32    _animController = AnimationController(
33      vsync: this,
34      duration: const Duration(milliseconds: 300),
35    );
36  }
37
38  @override
39  void dispose() {
40    _animController.dispose();
41    super.dispose();
42  }
43
44  void _onHorizontalDragUpdate(DragUpdateDetails details) {
45    if (_isAnimating) return;
46    setState(() {
47      _dragOffsetX += details.primaryDelta ?? 0;
48    });
49  }
50
51  Future<void> _onHorizontalDragEnd(DragEndDetails details) async {
52    if (_isAnimating) return;
53    if (_dragOffsetX.abs() >= widget.threshold) {
54      _isAnimating = true;
55      final flyDirection = _dragOffsetX > 0 ? 800.0 : -800.0;
56      _animation = Tween<double>(
57        begin: _dragOffsetX,
58        end: flyDirection,
59      ).animate(CurvedAnimation(
60        parent: _animController,
61        curve: Curves.easeOut,
62      ));
63      _animController.addListener(() {
64        setState(() => _dragOffsetX = _animation.value);
65      });
66      await _animController.forward();
67
68      if (_dragOffsetX > 0) {
69        await widget.onSwipeRight();
70      } else {
71        await widget.onSwipeLeft();
72      }
73
74      // Reset
75      _animController.reset();
76      setState(() {
77        _dragOffsetX = 0.0;
78        _isAnimating = false;
79      });
80    } else {
81      // Snap back
82      _animation = Tween<double>(
83        begin: _dragOffsetX,
84        end: 0.0,
85      ).animate(CurvedAnimation(
86        parent: _animController,
87        curve: Curves.elasticOut,
88      ));
89      _animController.addListener(() {
90        setState(() => _dragOffsetX = _animation.value);
91      });
92      await _animController.forward();
93      _animController.reset();
94      setState(() {
95        _dragOffsetX = 0.0;
96        _isAnimating = false;
97      });
98    }
99  }
100
101  @override
102  Widget build(BuildContext context) {
103    final rotation = _dragOffsetX / 800.0 * 0.3; // subtle rotation
104    return GestureDetector(
105      onHorizontalDragUpdate: _onHorizontalDragUpdate,
106      onHorizontalDragEnd: _onHorizontalDragEnd,
107      child: Transform.translate(
108        offset: Offset(_dragOffsetX, 0),
109        child: Transform.rotate(
110          angle: rotation,
111          child: widget.child,
112        ),
113      ),
114    );
115  }
116}

1// Addition to SwipeCard build method — add inside Transform.rotate child:
2
3Stack(
4  children: [
5    widget.child,
6    // Like overlay (swipe right)
7    if (_dragOffsetX > 0)
8      Positioned(
9        top: 20,
10        left: 20,
11        child: Opacity(
12          opacity: (_dragOffsetX / widget.threshold).clamp(0.0, 1.0),
13          child: Container(
14            padding: const EdgeInsets.all(8),
15            decoration: BoxDecoration(
16              border: Border.all(color: Colors.green, width: 3),
17              borderRadius: BorderRadius.circular(8),
18            ),
19            child: const Text('LIKE',
20                style: TextStyle(
21                    color: Colors.green,
22                    fontSize: 24,
23                    fontWeight: FontWeight.bold)),
24          ),
25        ),
26      ),
27    // Dislike overlay (swipe left)
28    if (_dragOffsetX < 0)
29      Positioned(
30        top: 20,
31        right: 20,
32        child: Opacity(
33          opacity: (_dragOffsetX.abs() / widget.threshold).clamp(0.0, 1.0),
34          child: Container(
35            padding: const EdgeInsets.all(8),
36            decoration: BoxDecoration(
37              border: Border.all(color: Colors.red, width: 3),
38              borderRadius: BorderRadius.circular(8),
39            ),
40            child: const Text('NOPE',
41                style: TextStyle(
42                    color: Colors.red,
43                    fontSize: 24,
44                    fontWeight: FontWeight.bold)),
45          ),
46        ),
47      ),
48  ],
49)