interactive_swipe_guide 0.0.2

Package for creating swipe-driven onboarding or tutorial overlays in Flutter. (For tinder like dating apps that require swiping left, right, up, and down)

🌀 interactive_swipe_guide

interactive_swipe_guide is a simple and customizable Flutter widget to guide users with swipe gestures. It shows animated instructions (like Lottie, SVG, or GIF) and waits for the user to swipe in the correct direction. It's perfect for onboarding, tutorials, or guiding users through gesture-based navigation in your app.

Features

• Display swipe instructions for different directions (left, right, up, down).
• Supports animation or image (Lottie, SVG, GIF) for each direction.
• Waits for the user to swipe in the correct direction.
• Customizable instructional text for each direction.
• Includes "Next" and "Skip/Done" buttons (optional).
• Callbacks triggered when the user swipes in the correct direction or completes the guide.
• Fully customizable and works on Android, iOS, and Web.

Getting Started

To use this package, add interactive_swipe_guide as a dependency in your pubspec.yaml file:

dependencies:
  interactive_swipe_guide: ^<latest_version>



Here is a simple usage example demonstrating how to use the InteractiveSwipeGuide widget:

```dart
class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: InteractiveSwipeGuide(
      directions: ['left', 'right', 'up', 'down'],
      initialDirection: 'right',
      directionText: {
        'left': 'Swipe left to go back',
        'right': 'Swipe right to continue',
        'up': 'Swipe up for more',
        'down': 'Swipe down to skip',
      },
      directionAsset: {
        'left': 'assets/swipe_left.json',
        'right': 'assets/swipe_right.json',
        'up': 'assets/swipe_up.svg',
        'down': 'assets/swipe_down.gif',
      },
      onSwipeLeft: () => print('Left swipe complete'),
      onSwipeRight: () => print('Right swipe complete'),
      onSwipeUp: () => print('Up swipe complete'),
      onSwipeDown: () => print('Down swipe complete'),
      onDismiss: () => print('Tutorial finished'),
    )));
  }
}