swipe_to #

SwipeTo is a wrapper for a chat view widget which can be used initiate callback when user horizontally swipe on it.

Getting Started #

To use this packages, you just simply need to wrap your child component in SwipeTo widget and pass a VoidCallback that you can carry forward with your task.

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  swipe_to: 1.0.6

In your library add the following import:

import 'package:swipe_to/swipe_to.dart';

Parameter Info #

• child : (@required) StateLess or StateFull flutter widget.
• onRightSwipe : callback which will be initiated at the end of right swipe animation. If not passed right swipe will be disabled
• onLeftSwipe : callback which will be initiated at the end of left swipe animation. If not passed left swipe will be disabled
• iconOnRightSwipe : IconData that will be displayed on left beneath child widget when swiped right. If not specified default is Icons.reply
• rightSwipeWidget : Widget that will be displayed beneath child widget when swipe right. If iconOnRightSwipe is defined this will have no effect.
• iconOnLeftSwipe : IconData that will be displayed on right beneath child widget when swiped left. If not specified default is Icons.reply
• leftSwipeWidget : Widget that will be displayed beneath child widget when swipe left. If iconOnLeftSwipe is defined this will have no effect.
• iconSize : Double value defining size of displayed icon beneath child widget. If not specified default it will take 26
• iconColor : Color value defining color of displayed icon beneath child widget. If not specified primaryColor from theme will be taken
• offsetDx : Double dx value used in Offset() till which position of child widget will get animated. If not specified 0.3 default will be taken. onRightSwipe +dx value will be used and for onLeftSwipe -dx value will be used
• animationDuration : Duration value to define animation duration. If not specified default is 150 milliseconds
• swipeSensitivity : Swipe sensitivity integer value which will be in range of default min 5 to max 35. Crossing mentioned value of this parameter (+ve in right and -ve in left direction) will trigger swipe animation.

Major changes onwards [ver 0.0.1+5] #

• For a single child widget, we can now enable swipe for both left and right direction
• swipeDirection parameter is removed. Now onLeftSwipe and onRightSwipe callback will enable swiping for a particular direction if passed
• iconData is now split into two parameter, iconOnRightSwipe & iconOnLeftSwipe for future use
• endOffset is now change to accept a double value only
• callBack is now split into two parameter, onLeftSwipe & onRightSwipe

Using SwipeTo widget for ListView items #

While using SwipeTo widget for ListView items, make sure to pass a Key() as key parameter of SwipeTo widget. Suggested to use UniqueKey() which will differentiate each individual widget in the Widget Tree. Check example below. To view example code click here.

ListView(
    children: snapshot.data!.map((name) {
        return SwipeTo(
            key: UniqueKey(),
            iconOnLeftSwipe: Icons.arrow_forward,
            iconOnRightSwipe: Icons.arrow_back,
            onRightSwipe: (details) {
                log("\n Left Swipe Data --> $name");
            },
            swipeSensitivity: 20,
            child: ListTile(
                tileColor: Colors.cyan.shade200,
                title: Text(name),
            ),
        );
    }).toList(),
);

Deprecated/Removed Parameters #

• swipeDirection : Enum value from [swipeToLeft, swipeToRight] only. Make sure to pass relative Offset value according to passed swipeDirection value. If not specified swipeToRight will be taken as default.
• iconData : IconData that will be displayed beneath child widget. if not specified default is Icons.reply
• endOffset : Offset value till which position of child widget will get animated. if not specified Offset(0.3, 0.0) default will be taken
• callBack : (@required) callback which will be initiated at the end of swipe animation

Example : SwipeToRight Wrap your desired widget with SwipeTo & pass a call to onRightSwipe parameter.

SwipeTo(
    child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
        child: Text('Hey You! Swipe me right 👉🏿'),
    ),
    onRightSwipe: (details) {
        print('Callback from Swipe To Right');
    },
),

Example : SwipeToLeft Wrap your desired widget with SwipeTo & pass a call to onLeftSwipe parameter.

SwipeTo(
    child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
        child: Text('👈🏿 Hey You! Swipe me Left'),
    ),
    onLeftSwipe: (details) {
        print('Callback from Swipe To Left');
    },
),

Example : SwipeToLeft & SwipeToRight Wrap your desired widget with SwipeTo & pass a call to onLeftSwipe & onRightSwipe parameters.

SwipeTo(
    child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
        child: Text('👈🏿 Swipe me Left | YOU |Swipe me right 👉🏿'),
    ),
    onLeftSwipe: (details) {
        print('Callback from Swipe To Left');
    },
    onRightSwipe: (details) {
        print('Callback from Swipe To Right');
    },
),

Sample Outputs #

References to learn #

https://medium.com/@purvik1239/enable-swiping-right-left-for-your-flutter-application-widgets-a7b556674f9c