Flutter tinder like cards

Overview

TCard

Tinder like cards.

GitHub stars pub package Test

Install

# pubspec.yaml
dependencies:
  tcard: ^1.3.5

Usage

Normal widget

List<Widget> cards = List.generate(
  5,
  (index) => Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        '$index',
        style: TextStyle(fontSize: 60, color: Colors.white),
      ),
    ),
  ),
);

TCard(
  cards: cards,
)

demo

Network image

List<String> images = [
  'https://gank.io/images/5ba77f3415b44f6c843af5e149443f94',
  'https://gank.io/images/02eb8ca3297f4931ab64b7ebd7b5b89c',
  'https://gank.io/images/31f92f7845f34f05bc10779a468c3c13',
  'https://gank.io/images/b0f73f9527694f44b523ff059d8a8841',
  'https://gank.io/images/1af9d69bc60242d7aa2e53125a4586ad',
];

List<Widget> cards = List.generate(
  images.length,
  (int index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 17),
            blurRadius: 23.0,
            spreadRadius: -13.0,
            color: Colors.black54,
          )
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16.0),
        child: Image.network(
          images[index],
          fit: BoxFit.cover,
        ),
      ),
    );
  },
);

TCard(
  size: Size(400, 600),
  cards: cards,
);

images

Image from gank.io

Use a controller to control

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TCardController _controller = TCardController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TCard(
              cards: cards,
              size: Size(360, 480),
              controller: _controller,
              onForward: (index, info) {
                print(index);
              },
              onBack: (index, info) {
                print(index);
              },
              onEnd: () {
                print('end');
              },
            ),
            SizedBox(
              height: 40,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                OutlineButton(
                  onPressed: () {
                    print(_controller);
                    _controller.back();
                  },
                  child: Text('Back'),
                ),
                OutlineButton(
                  onPressed: () {
                    _controller.reset();
                  },
                  child: Text('Reset'),
                ),
                OutlineButton(
                  onPressed: () {
                    _controller.forward();
                  },
                  child: Text('Forward'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

controller

Determine the sliding direction

 TCard(
  cards: cards,
  size: Size(360, 480),
  controller: _controller,
  onForward: (index, info) {
    print(index);
    print(info.direction);
    if (info.direction == SwipeDirection.Right) {
      print('like');
    } else {
      print('dislike');
    }
  },
  onBack: (index, info) {
    print(index);
  },
  onEnd: () {
    print('end');
  },
)

like

Reset with new cards

List<Widget> newCards = [];

TCardController _controller = TCardController();

_controller.reset(cards: newCards);

Property

property type default description required
cards List<Widget> null Render cards true
size Size null Card size false
controller TCardController null Card controller false
onForward ForwardCallback null Forward animation callback false
onBack BackCallback null Back animation callback false
onEnd EndCallback null Forward end callback false
lockYAxis bool false Lock Y Axis Gesture false
slideSpeed double 20 How quick should it be slided? less is slower. 10 is a bit slow. 20 is a quick enough. false
delaySlideFor int 500 How long does it have to wait until the next slide is sliable? less is quicker. 100 is fast enough. 500 is a bit slow. false

Contribute

  1. Fork it (https://github.com/xrr2016/tcard.git)
  2. Create your feature branch (git checkout -b feature/foo)
  3. Commit your changes (git commit -am 'Add some foo')
  4. Push to the branch (git push origin feature/foo)
  5. Create a new Pull Request

License

MIT

Comments
  • Widget Sizes

    Widget Sizes

    I have 3 questions.

    1. How can I make widget full screen. I have tried double.infinity and MediaQuery width and height but card widgets don't change size.

    2. I want to hide sibling widgets (middle and bottom widgets) until the user swipes. Like using IndexedStack instead of the usual Stack. How do I do this with your cards ?

    3. Is it possible to disable up and down swipe ?

    question 
    opened by aljibbs 6
  • onForward in the last card doesn't work, and isn't the same that onEnd

    onForward in the last card doesn't work, and isn't the same that onEnd

    First, thanks for the package, is a lot better and easier to implement than others, currently I have this problem and I'm already use a workaround, so

    What is the current behavior?

    The onEndproperty works when the last card is show and not when the last card is dismiss, like onForward and the last one doesn't works with the last element of list

    What is the expected behavior?

    either of these:

    1. Make the onEnd be called when the last element of the list is dismissed
    2. Make the onForward also be called with the last element is dismiss.

    Workaround

    Well the simple workaround that I'm use, is add a empty widget to the last element of the list, and execute onEnd.

    I don't have experience made flutter packages, so I can't contribute with this.

    opened by hectorAguero 5
  • allow controller to reset with a new set of cards

    allow controller to reset with a new set of cards

    @xrr2016 First of all - Very nice Tinder based Card plugin.

    One quick point, Is there any way to reset the cards passed to TCard ? i.e assume you have 10 cards, the user like 4 and dislikes 6 - would therefore want to show only the 6 cards that the user dislikes ... basically there needs to be a way for reset() of the controller to take a parameter of new cards to use ...

    feature_request 
    opened by sallypeters 4
  • Detect direction of swipe?

    Detect direction of swipe?

    Is there any way to detect the direction that the user swipes? I would've thought that onForward and onBack did this, but they both seem to do the same thing. Any ideas?

    question 
    opened by Pebsie 4
  • How to make it swipe by button not swiping by finger

    How to make it swipe by button not swiping by finger

    Hello,

    Thanks for the awesome plugin, I appreciate your effort.

    I want to ask, it's possible to implement the swiping by button click instead of using a finger.

    Thanks for your feeback

    opened by Wizpna 2
  • Access to Pan details info for display Overlay label when dragging card

    Access to Pan details info for display Overlay label when dragging card

    Hello,

    I want to display overlay labels when user dragging the card. To do so I need access to "DragUpdateDetails" onPanDown, onPanUpdate and onPanEnd for let me interpolate overlay labels opacity OR access to animated X and Y of the card, can you provide callbacks plz ?

    opened by Dekhnar 2
  • Functions that make the cards animate left or right.

    Functions that make the cards animate left or right.

    Another addition would be adding two functions that drag/animate the cards left or right. An example would be how tinder functions when you like someone the card goes right and when you dislike the card goes left. managed to get this by modifying your code a bit and reversing the forward and back functions animations.

    feature_request 
    opened by yushinzm 2
  • Rework from Size animations to Scale animations, add StackAlignment + StackDensity

    Rework from Size animations to Scale animations, add StackAlignment + StackDensity

    This PR contains several changes:

    • Rework to use Scale instead of Size for resizing middle and back cards. The current Size method worked fine for images, but when embedding text in cards it caused issues do to text wrap as the container was resizing. I've reworked the resizing to use Scale animations instead.

    • Added Stack Alignment & StackDensity In the current implementation there's no way to change how the stack looks. Cards are always on top of each other, with the middle and back cards sticking out at the bottom of the widget. With StackAlignment you can change where the middle and back cards peek out. With StackDensity you can change how much the middle and back cards stick out.

    I've tried to maintain as much similarity to the old (Size) resizing as possible, but it might introduce minor visual changes, so I would flag this as a breaking change.

    opened by thomas-stockx 1
  • Fix controller swipe

    Fix controller swipe

    When you call controller.forward(direction: SwipeDirection.Right) (or Left) while the animation of an older call is still ongoing the controller store a SwipeInfo with SwipeDirection.Right. https://github.com/BrunoJurkovic/tcard/blob/10b7d7fa4c4643dc436282428530df266c277fc9/lib/src/controller.dart#L22 When the controller then call state!.runChangeOrderAnimation() the state find an older animation is still ongoing and the it return without doing nothing. This way at the next controller.forward(direction: SwipeDirection.Left) (or Right) the card will swipe in the wrong direction.

    A easy fix is to remove the last SwipeInfo if the animation is still ongoing.

    opened by f3d0ss 1
  • Hot reload not updating the card's state in TCard.

    Hot reload not updating the card's state in TCard.

    When I changed something on the card and try hot reload it does not update the TCard UI. Need to use Hot Restart for that. Does any one have this issue?

    opened by shubhambsps 1
  • How to reset cards on data change

    How to reset cards on data change

    class UpcomingList extends StatefulWidget {
      @override
      _UpcomingListState createState() => _UpcomingListState();
    }
    
    class _UpcomingListState extends State<UpcomingList> {
      TCardController _tCardController = TCardController();
    
    
      @override
      void dispose() {
        _tCardController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return _buildTaskList(context);
      }
    
      StreamBuilder<List<OnlySubscriptions>> _buildTaskList(BuildContext context) {
        final appState = Provider.of<AppState>(context, listen: false);
    
        return StreamBuilder(
          stream: appState.uppcomingEntries,
          builder: (context, snapshot) {
            if (!appState.hasSubscriptions) {
              return EmptyPage();
            }
            final subscriptions = snapshot.data;
    
            if (subscriptions != null) {
              final _cards = List.generate(
                subscriptions.length,
                (int index) {
                  return _buildListItem(
                      sub: subscriptions[index].subscription,
                      appState: appState,
                      themeData: themeData);
                },
              );
    
              return subscriptions.length == 0
                  ? SizedBox(
                      height: 10.0,
                    )
                  : TCard(
                      lockYAxis: true,
                      controller: _tCardController,
                      onBack: (value, info) {
                        if (appState.isUpPayChanged) {
                          appState.toggleChangePays();
                          _tCardController.reset(cards: _cards);
                        }
                      },
                      onForward: (value, info) {
                        if (appState.isUpPayChanged) {
                          appState.toggleChangePays();
                          _tCardController.reset(cards: _cards);
                        }
                      },
                      onEnd: () {
                        _tCardController.reset();
                      },
                      size: Size(MySize.screenWidth, MySize.screenHeight / 4),
                      cards: _cards);
            }
            return Placeholder();
          },
        );
      }
    

    How to reset cards on data change ? When I used _tCardController.reset() before its null.

    opened by irangareddy 1
  • Allow cards to have the same size,新增keepLast:是否保留最后一张卡片,完善禁止拖拽

    Allow cards to have the same size,新增keepLast:是否保留最后一张卡片,完善禁止拖拽

    Allow cards to have the same size add param : sameSize If it is not used, there is no change between and now image

    keepLast 最后一张滑动后是否保留(默认为false,与现在一样,true:最后一张滑动后会再次出现在这里) enableDrag 是否开启滑动功能 默认 true endTips 全部滑动完成后展示的组件

    opened by lizhuoyuan 1
  • Card not above all widgets when swipe to right

    Card not above all widgets when swipe to right

    Hello,

    I have 2 widget TCard next to each other. When I swipe the left one to the right the card is below the second TCard widget, but if I swipe the right one to the left, the card is above the first TCard widget. So when I swap to the left it's working but not to the right. Is there a workaround to have my card above all widgets when I swipe to right like the left swipe ?

    Thanks

    opened by mgaucher 0
Owner
Bruno Jurković
I am a Dart & Flutter developer.
Bruno Jurković
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

HeavenOSK 97 Jan 6, 2023
PageIndicator like Instagram written for Flutter

scrolling_page_indicator View page indicator like Instagram Getting Started Dependency dependencies: scrolling_page_indicator: ^0.1.2 Install flutte

null 30 Nov 4, 2022
A reactive key-value store for Flutter projects. Like shared_preferences, but with Streams.

streaming_shared_preferences A reactive key-value store for Flutter projects. streaming_shared_preferences adds reactive functionality on top of share

Iiro Krankka 244 Dec 22, 2022
A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

Custom Splash Screen A Flutter package to custom splash screen: change logo icon, logo animation, and splash screen background color. (Custom from ani

tranhuycong 78 Sep 6, 2022
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Jay Raj 2 Feb 18, 2022
Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Romain Rastel 291 Oct 21, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Debjeet Das 1 Apr 9, 2022
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Jeremiah Ogbomo 2.7k Dec 30, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
Flutter UI Challenges

Introduction ?? Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage ?? To

Sanjeev Madhav 58 Dec 22, 2022
A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with ?? in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Shubham Soni 68 Sep 23, 2022
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 49 Nov 14, 2022