Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home UI Card

A Flutter Plugin That Allows You To Swipe Cards

August 8, 2020
in Card, Flutter Packages, Swipe
3 min read
A Flutter Plugin That Allows You To Swipe Cards

The Swipe Card plugin in flutter is a package that allows you to swipe cards in Flutter with Button or gesture.

RELATED FLUTTER RESOURCES

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

A Beautiful Bottom navigation bar with bubble click effect in Flutter

A Flutter package that detects credit card types from the first input

Flutter Swipe Card 

The easiest way to implement a tinder-like swipe card mechanism in Flutter.

ADVERTISEMENT

The package contains a SwipeCard widget allowing to make content swipable.

Getting Started 

To import the widget:

import 'package:flutter_swipable/flutter_swipable.dart'

Make a widget swipable:

Swipable(
    child: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.red
    )
)

Configuration 

Trigger an automatic swipe 

You can trigger a swipe programatically by passing a Stream<double> to the widget using this parameter:

/// @param swipe [Stream<double>]
/// Triggers an automatic swipe.
/// Cancels automatically after first emission.R
/// The double value sent corresponds to the direction the card should follow (clockwise radian angle).
final Stream<double> swipe;

Example

/// Create the stream
StreamController<double> _controller = StreamController<double>();


/// Pass the stream to the widget
Swipable(
    swipe: _controller.stream
    child: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.red
    )
)

/// Trigger programmatically
double swipeAngle = math.pi / 4;
_controller.add(swipeAngle);

⚠️ !!! The widget will automatically unsubscribe after the first emission.

Now we’re able to swipe content programmatically:

Hooks 

You can register a set of callbacks to react to the following hooks:

/// Callback
/// Hook triggered when the card starts being dragged.
/// @param details [DragStartDetails]
final void Function(DragStartDetails details) onSwipeStart;

/// Callback
/// Hook triggered when the card position changes.
/// @param details [DragUpdateDetails]
final void Function(DragUpdateDetails details) onPositionChanged;

/// Callback
/// Hook triggered when the card stopped being dragged and doesn't meet the requirement to be swiped.
/// @param details [DragEndDetails]
final void Function(Offset position, DragEndDetails details) onSwipeCancel;

/// Callback
/// Hook triggered when the card stopped being dragged and meets the requirement to be swiped.
/// @param details [DragEndDetails]
final void Function(Offset position, DragEndDetails details) onSwipeEnd;

/// Callback
/// Hook triggered when the card finished swiping right.
/// @param finalPosition [Offset]
final void Function(Offset finalPosition) onSwipeRight;

/// Callback
/// Hook triggered when the card finished swiping left.
/// @param finalPosition [Offset]
final void Function(Offset finalPosition) onSwipeLeft;

/// Callback
/// Hook triggered when the card finished swiping up.
/// @param finalPosition [Offset]
final void Function(Offset finalPosition) onSwipeUp;

/// Callback
/// Hook triggered when the card finished swiping down.
/// @param finalPosition [Offset]
final void Function(Offset finalPosition) onSwipeDown;

Additional parameters 

You can pass additional parameters to the Swipable widget:

/// @param animationDuration [int]
/// Animation duration (in milliseconds) for the card to swipe atuomatically or get back to its original position on swipe cancel.
final int animationDuration;

/// @param animationCurve [Curve]
/// Animation timing function.
final Curve animationCurve;

/// @param threshold [double]
/// Defines the strength needed for a card to be swiped.
/// The bigger, the easier it is to swipe.
final double threshold;

RelatedFlutter Resource

Navigation

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

September 15, 2020
A Beautiful Bottom navigation bar with bubble click effect in Flutter
Navigation

A Beautiful Bottom navigation bar with bubble click effect in Flutter

September 15, 2020
A Flutter package that detects credit card types from the first input
Card

A Flutter package that detects credit card types from the first input

September 7, 2020
A Verification Code Input Widget to get Value in Flutter.
Flutter Packages

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
How to select & Pick a Countries from a List in Flutter
Flutter Packages

How to select & Pick a Countries from a List in Flutter

September 2, 2020
How To Record Audio Mp3 using Native API in Flutter
Flutter Packages

How To Record Audio Mp3 using Native API in Flutter

September 2, 2020
Next Post
A Flutter package to get Instagram user details and download reels videos

A Flutter package to get Instagram user details and download reels videos

flutter command not found

How to solve "Flutter command not found" Error

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Simple & Beautiful ToDo App Made with Flutter

A Simple & Beautiful ToDo App Made with Flutter

September 1, 2020
A Flutter App for Tracking Funds/Money – Budget Tracker

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
A Flutter package to get Instagram user details and download reels videos

A Flutter package to get Instagram user details and download reels videos

August 8, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In