Description:

swipeable card

Swipeable Card (v1.x.x) #
Add swipeable card-like widgets for games or interactive onboarding screens




Contents #

Examples
Documentation
Issues and limitations
Other information

🎮 Examples #
Demo #
SwipeableWidget (meant for high performance devices, like iPhones)


SwipeableWidgetSlide (meant for lower performance devices, like older Android devices)

Demo of SwipeableWidgetSlide to be added

Check the repository if you're unable to see the demo.
App examples #
Swipeable Widget is used in the following apps:

Shots
Create a PR to add your own!

📒 Documentation #
Installation #
Add swipeable_card to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter

# added below
swipeable_card: <latest version>
copied to clipboard
Adding to your app #
The swipeable widget has to be placed in a Stack, for example:
Stack(
children: <Widget>[
SwipeableWidget(
// parameters ...
child: someChildWidget(),
),
],
)
copied to clipboard
In the above example, replace someChildWidget() with the widget that can be swiped (for example, a playing card-like widget).
Warning: while SwipeableWidget is fast on iPhones, it can be quite slow for older Android devices. I am currently working on SwipeableWidgetSlide, an alternative which can be used for older Android devices.
Parameters #


Click to reveal all parameters

int animationDuration


The animation duration that dictates

How long it takes the widget to move back to the origin
How long it takes for the widget to animate off the screen

Default value: 700


double horizontalThreshold


The position the swipeable widget is moved horizontally for it to be moved away.
Once the widget is moved beyong this theshold, the function onHorizontalSwipe is called.
This diagram in this video may help you visualize the correct position.
Default value: 0.85


double verticalThreshold


Not implemented yet.
The position the swipeable is moved vertically for it to be moved away.
Once the widget is moved beyong this theshold, the function onVerticalSwipe is called.
This diagram in this video may help you visualize the correct position.
Default value: 0.95


Function onLeftSwipe

The function called when the card is moved beyond the left side horizontalThreshold (in terms of Align). If you're making a card game, this is where you would call the function that calls the next card.

Function onRightSwipe

Similar to onLeftSwipe

SwipeableWidgetController swipeableWidgetController


Controller that can swipe the card automatically (without user interaction).
The following methods exist:

_swipeableWidgetController.triggerSwipeLeft()
_swipeableWidgetController.triggerSwipeRight()

The below two also exist, but are not yet implemented:

_swipeableWidgetController.triggerSwipeTop()
_swipeableWidgetController.triggerSwipeBottom()



double scrollSensitivity
Widget child (required)

The child widget, which will be swipeable.

List


The widgets behind the child
These can be the other cards if it's a card game.



Basic example #
SwipeableWidget(

child: CardExample(text: "This is card"),
nextCards: [
CardExample(text: "This is the card"),
CardExample(text: "This is third card"),
]
onLeftSwipe: () => print("Card swiped!"),
onRightSwipe: () => print("Card swiped!"),
)
copied to clipboard
See the Example for more details. It contains a detailed write up on how to use the swipeable widget controller too.
😐 Issues and limitations #
If you use the a swipeableWidgetController to automatically swipe the cards (without the user panning), you can only start swiping the next card away when the previous one is fully swiped away. To see a demo, run the example, and continuously tap the "Left" button at the bottom of the screen.
Apart from that, all the other problems from v0.0.x seem to be dealth with.
📝 Other information #
Project start date: 1 May, 2020.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter