Giter Site home page Giter Site logo

flutter_tindercard's Introduction

flutter_tindercard

Pub Closed

Tinder/TanTan Card Widget.

Screenshots

screenshot

Getting Started

  1. Depend on it by adding this to your pubspec.yaml file: flutter_tindercard: ^x.x.x

  2. Import it: import 'package:flutter_tindercard.dart'

  3. Add TinderSwapCard in your widget layout and write the single card layout builder you need, then you get a Tinder(探探) like swap card widget!

  4. Use CardSwipeCompleteCallback for the swiped orientation and index!

  5. Use CardController to trigger swap from outside. Init a CardController as param for widget, and invoke method triggerLeft/Right of your CardController to trigger swipe!

  6. Use CardDragUpdateCallback to get swiping card's detail.

Example

See Here

Async Example

See Here

flutter_tindercard's People

Contributors

bennyng avatar brtzl avatar freitzzz avatar mechelon avatar shaunrain avatar shinriyo avatar wayne900204 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter_tindercard's Issues

Releasing latest stable version at pub.dev?

Hi there,

first of all: Nice package, I really like using it!

Nevertheless, the Code here at GitHub seems to be another than the version 0.1.8 published at pub.dev, so you cannot use the new improvements e.g. the vertical swiping.

Are there plans in the near future to release the latest stable version to pub.dev?

Thanks in advance & have a nice day!

[Enhancement] - TinderCard OnTap

Is there an onTap / onPressed class / function for the TinderCards?
I can't seem to find anything close to that in the library's class.

maxHeight being equal to maxWidth makes some properties freezed.

Hi, I'm glad to use your gorgeous library feeling it's really helpful.
But I found some issue regarding card size.
If I set maxHeight equal to maxWidth, it became impossible to use vertical movement. And I also realized there's no point to set stackNum because we couldn't see the stack. If I did so, it seemed there was just one card, though there were cards we set before. And so were minHeight and minWidth.
Is there any issues like mine? Or is there anything I couldn't get?
Although there are some difficulties in using this library, I absolutely believe it's very nice.
Hope you have a good weekend.

Any reason for multiple SwipeUpdateCallback

In file flutter_tindercard.dart, we have multiple calls to widget.swipeUpdateCallback(details, frontCardAlign); incase (widget._allowVerticalMovement == true) is false. These are present on line 232 and 237.

Is there any particular reason why we are doing so? I want to remove the first one but just want to be sure that there won't be any regressions.

Adding New Profiles in List doesn't update the deck

initially i have 5 profiles in my deck then i show them when they are loaded and in background i am calling the API which adds 10 more in list but when i swipe 5 profiles it doesn't shows the next 10 profile i am also setting state

How to use padding?

I modify the image to text , How do it add Text padding? cardBuilder example :

cardBuilder: (context, index) => Card(
margin: const EdgeInsets.only(top:1.0),
child: Text('${welcomeImages[index]}'),
),

Implement function to dismiss cards

Hello,
for my app it would be nice to to be able to dismiss cards by calling a function.
For example, Tinder also has buttons below the cards to swipe left and right and it's not possible to implement this feature as there is no function for this in the library at the moment.

How can I catch the moment when card will be swipped?

Hi devs! I want to determine moment when tindercard will be swipped. When I move card to left on 20px and untouch my finger the card go to initial place. When I move card to left on 60px card animatedly swipped to left. How can I determine when card will be swipped. I want that to implement this feature to app
Screenshot_9
And when I swipe to right. Right button should be outlined.

add license

Could you please add a license, that people can see, whether they are allowed to use it or not? Like eg. Apache, MIT or whatever fits, what you want

Get Top Card

I've bound my data list to the class TinderSwapCard, everything works well. But I want to display information about the first card on the stack. Is there any way to get the card that is on top of the stack? This is pretty important, since I want to route to a detail view about the data associated with the card.

Alex

Strange Glitch When Using Keys On SwipeStack()

Currently when adding keys to the SwipeStack or its children it results in a weird flashing that occurs after each card is swiped. I suspect the issue coming from the build method rebuilding the widget tree after each call and updating the old card's value causing a visual delay. I opened a Stack Overflow issue about this as well.

Gyfcat link to see the flashing:
https://gfycat.com/jampackedvapiddinosaur

Stack Overflow Link:
https://stackoverflow.com/questions/64530700/flutter-futureprovider-value-not-updating-in-builder-method

Also: Currently the package doesn't support adding keys on the individual SwiperItem like the ListView and GridView widgets to uniquely identify each Card; this would be a very useful feature.

How Do I create infinite loading cards ?

Whenever I'm fetching the data after the stack end it doesn't update the stack and dont create new stack of items anyone has any idea how to implement this ?

Expand the card in all the screen

Hi, how can i expand the card for the whole screen, which sizes i should put in the max and min height also in width?
i've tried a lot of things but i would like to show the picture in bigger.

How can i do that?

Trigger from outside

can you help me to make example to trigger left and right swipe from outside using cardController?

TinderSwapCard empty when rebuilding after last swipe

I am using this to present items and don't distinguish between L/R swipes. After swiping thru all items, I rebuild the view, however, the TinderSwapCard widget remains empty. Is there a way to tell the TinderSwapCard to rebuild after last item is swiped? Don't know if this is a bug or enhancement request.

Below is what I am trying to do, but even though I rebuild, TinderSwapCard never updates after the last card is dismissed.

import 'package:my_app/Components/itemRequest.dart';
import 'package:my_app/Screen/Request/requestDetail.dart';
import 'package:my_app/data/Model/item.dart';
import 'package:flutter_tindercard/flutter_tindercard.dart';

class CardsContainer extends StatefulWidget {
  final List<Item> items;

  const CardsContainer({Key key, @required this.items}) : super(key: key);

  @override
  _CardsContainerState createState() => _CardsContainerState();
}


class _CardsContainerState extends State<CardsContainer> {
  TinderSwapCard cards;

  @override
  Widget build(BuildContext context) {
    if (cards == null) {
      cards = buildCards();
    }

    return Container(
      height: 330,
      child: cards,
    );
  }

  TinderSwapCard buildCards() {
    return TinderSwapCard(
      orientation: AmassOrientation.BOTTOM,
      totalNum: widget.items.length,
      stackNum: 5,
      maxWidth: MediaQuery.of(context).size.width,
      minWidth: MediaQuery.of(context).size.width * 0.9,
      maxHeight: MediaQuery.of(context).size.width * 0.9,
      minHeight: MediaQuery.of(context).size.width * 0.85,
      cardBuilder: (context, index) => ItemRequest(
        avatar: widget.items[index].avatar,
        userName: widget.items[index].name,
        date: widget.items[index].date.toString(),
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => ItemDetail()));
        },
      ),
      swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
        // 
        // TRYING TO REBUILD CARD WIDGET TO DISPLAY ALL CARDS AGAIN
        // 
        if (index == widget.items.length-1) {
          setState(() {
            cards = null;
          });
        }
      }
    );
  }
}```

Methods for controlling animation angle

Hi devs! Thanks for awesome library!
I have issue: after triggering method _cardController.triggerRight() or _cardController.triggerLeft()
the card moving only on X coordinate. How to make moving composed with X coordinate and angle like on that picture
Screenshot_7

Getting Cards Redrawn on Screen on Drag Down

Hi,
Amazing work Guys! I want to add a feature in which when I drag down on the screen, the last card automatically comes back on the screen in the same animation in which it went back. If you guys could help me with that, it would be really kind and helpful.
Thanks

Getting null error while using with PageStorage widget

Hello,

I'm getting this error:
The method '>' was called on null.
Receiver: null
Tried calling: >(null)
User-created ancestor of the error-causing widget was: PageStorage

I'm using Pagestorage widget for the bottom navigation bar. One of the tabs that correspond to it is intended to have this Tinder card feature. The code used for Tindercard is the same provided in the example.

Add Up & Down orientation too

Hey,

Thanks for the great library.

Tinder has introduced swipe down feature for their cards.

Even i need that kind of feature too.

Add undo swipe feature

A nice feature to have would be the ability to call "undo" on the cardController and have the last swiped card return to the top of stack, animating from the side it was swiped to.

Fix the card position on swiping up or down

Is there a way I can get the card to stay at a certain position the user released it to instead of coming back to the original position? Can anyone help me implement this?

SwipeUp/SwipeDown Animation for following card is not smooth

Swiping left and right works just fine, the following card gets smoothly a bit bigger and comes to the "foreground".
If I swipe up or down, the following card gets to the foreground as well - so the basic functionality is ok! - but there is no smooth transition.

Hard to explain, here is a short clip:

tindercard_swipe_animation_error

Fresh flutter project, integrated the package v0.1.9 with the sample code from the readme.

Any idea how to fix this? I would do it myself but I am not so deep in the package code (yet).

good, bad option

I want the feature

For example,
If swipe right, good widget on the picture, If swipe left, bad widget on the picture.

like this
Screen Shot 2020-04-01 at 7 47 12
Screen Shot 2020-04-01 at 7 47 06

Up and down drag doesn't work well on iPhone XR

When dragging up and down a card, it doesn't follow the cursor, it goes way beyond the drag distance done. Don't know if it works on a real device, but it happens using a simulator with CupertinoApp (not MaterialApp).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.