How to Use FlutterFlow's Gestures to Make Your App More Interactive

1// Custom Widget: PinchZoomViewer
2import 'package:flutter/material.dart';
3
4class PinchZoomViewer extends StatefulWidget {
5  final Widget child;
6  const PinchZoomViewer({Key? key, required this.child}) : super(key: key);
7
8  @override
9  State<PinchZoomViewer> createState() => _PinchZoomViewerState();
10}
11
12class _PinchZoomViewerState extends State<PinchZoomViewer>
13    with SingleTickerProviderStateMixin {
14  final _transformController = TransformationController();
15  late AnimationController _animController;
16  Animation<Matrix4>? _animation;
17
18  @override
19  void initState() {
20    super.initState();
21    _animController = AnimationController(
22      vsync: this, duration: const Duration(milliseconds: 300));
23  }
24
25  @override
26  void dispose() {
27    _transformController.dispose();
28    _animController.dispose();
29    super.dispose();
30  }
31
32  void _resetZoom() {
33    _animation = Matrix4Tween(
34      begin: _transformController.value,
35      end: Matrix4.identity(),
36    ).animate(CurvedAnimation(parent: _animController, curve: Curves.easeOut));
37    _animation!.addListener(() => _transformController.value = _animation!.value);
38    _animController.forward(from: 0);
39  }
40
41  @override
42  Widget build(BuildContext context) {
43    return GestureDetector(
44      onDoubleTap: _resetZoom,
45      child: InteractiveViewer(
46        transformationController: _transformController,
47        minScale: 0.5,
48        maxScale: 4.0,
49        child: widget.child,
50      ),
51    );
52  }
53}

1// Custom Widget: DraggableCard
2// Accepts an onDropped callback with the itemId and targetZone
3import 'package:flutter/material.dart';
4
5class DraggableCard extends StatelessWidget {
6  final String itemId;
7  final String label;
8  final VoidCallback? onLongPressDrag;
9
10  const DraggableCard({
11    Key? key,
12    required this.itemId,
13    required this.label,
14    this.onLongPressDrag,
15  }) : super(key: key);
16
17  @override
18  Widget build(BuildContext context) {
19    return LongPressDraggable<String>(
20      data: itemId,
21      // Show while dragging (ghost)
22      feedback: Material(
23        elevation: 8,
24        child: Container(
25          padding: const EdgeInsets.all(12),
26          color: Colors.blue.withOpacity(0.8),
27          child: Text(label, style: const TextStyle(color: Colors.white)),
28        ),
29      ),
30      // Show in original position while dragging
31      childWhenDragging: Opacity(
32        opacity: 0.3,
33        child: _cardContent(),
34      ),
35      child: _cardContent(),
36    );
37  }
38
39  Widget _cardContent() {
40    return Container(
41      padding: const EdgeInsets.all(12),
42      decoration: BoxDecoration(
43        color: Colors.blue,
44        borderRadius: BorderRadius.circular(8),
45      ),
46      child: Text(label, style: const TextStyle(color: Colors.white)),
47    );
48  }
49}

1// Custom Widget: SwipeToDismissItem
2import 'package:flutter/material.dart';
3
4class SwipeToDismissItem extends StatelessWidget {
5  final String itemId;
6  final Widget child;
7  final Future<bool?> Function(DismissDirection) onConfirmDismiss;
8  final void Function(DismissDirection) onDismissed;
9
10  const SwipeToDismissItem({
11    Key? key,
12    required this.itemId,
13    required this.child,
14    required this.onConfirmDismiss,
15    required this.onDismissed,
16  }) : super(key: key);
17
18  @override
19  Widget build(BuildContext context) {
20    return Dismissible(
21      key: ValueKey(itemId),
22      direction: DismissDirection.endToStart,
23      confirmDismiss: onConfirmDismiss,
24      onDismissed: onDismissed,
25      background: Container(
26        color: Colors.red,
27        alignment: Alignment.centerRight,
28        padding: const EdgeInsets.symmetric(horizontal: 20),
29        child: const Icon(Icons.delete, color: Colors.white),
30      ),
31      child: child,
32    );
33  }
34}