swipeable_card 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 82

Swipeable Card (v1.x.x) #

Add swipeable card-like widgets for games or interactive onboarding screens

Pub PRs Welcome lic BMAC

Contents #

🎮 Examples #

Demo #

SwipeableWidget (meant for high performance devices, like iPhones)

Demo 1

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>

Adding to your app #

The swipeable widget has to be placed in a Stack, for example:

Stack(
  children: <Widget>[
    SwipeableWidget(
      // parameters ...
      child: someChildWidget(),
    ),
  ],
)

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!"),
)

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.

[1.0.2] - May 15, 2020 #

  • Added scrollSensitivity (useful for larger displays)
  • Added demo

[1.0.1] - May 13, 2020 #

  • Fixed issue where card would stick to side of screen

[1.0.0] - May 13, 2020 #

  • Made card movement more smooth in general
  • Using curves for animation
  • Removed need for:
    • outsideScreenHorizontalValue
    • outsideScreenVerticalValue
  • Split on horizontal swipe to on left and right swipe functions
  • Changed function names for SwipeableWidgetController (shortened)

[0.0.2] - May 12, 2020 #

  • Improved example
  • Improved description of package
  • Formatted package files

[0.0.1] - May 10, 2020 #

  • Added SwipeableWidget
    • Can be swiped horizontally then execute a function
    • Can be swiped vertically then execute a function
  • Added SwipeableWidgetController to automatically swipe cards:
    • _swipeableWidgetController.triggerHorizontalSwipeLeft()
    • _swipeableWidgetController.triggerHorizontalSwipeRight()
    • _swipeableWidgetController.triggerVerticalSwipeTop()
    • _swipeableWidgetController.triggerVerticalSwipeBottom()
  • Added fully featured example (see examples/ folder)

example/lib/main.dart

// check out https://github.com/ninest/swipeable_card/tree/master/example
// for a better explanation

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'example_route.dart';
import 'example_slide_route.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // make it a full screen app
    SystemChrome.setEnabledSystemUIOverlays([]);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(
        // make the background color darker to put the cards in focus!
        scaffoldBackgroundColor: Color(0xFF111111),
      ),
      // home: ExampleRoute(),
      // home: ExampleRoute(),
      home: ExampleRouteSlide(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  swipeable_card: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:swipeable_card/swipeable_card.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
64
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
82
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • swipeable_card that is a package requiring null.

Health suggestions

Format lib/src/animations.dart.

Run flutter format to format lib/src/animations.dart.

Format lib/src/swipeable.dart.

Run flutter format to format lib/src/swipeable.dart.

Format lib/src/swipeable_widget_controller.dart.

Run flutter format to format lib/src/swipeable_widget_controller.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test