Flutter: Sliding card

Written by Emile Pavie-Olivier

January 18, 2020

in packages

Introduction

Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.
Here is all you need to know about it

Before We Start

Before reading through, here are some relevant link

The Sliding Card widget and its properties

Here is the widget definition:

properties description

  • controller   SlidingCardController: (required) This is the controller of the sliding card, Use it to expand and collapse the card, You can also check if the card is expanded or collapsed.
  • frontCardWidget → Widget: (required) This is the card that will be present in front
  • backCardWidget →  Widget: (required) This is the card that will be present behind the front card
  • visibleCardHeight → double: This is the height of the front card
  • hiddenCardHeight → double: This is the height of the card located behind the front card
    Note that its height cannot be greater than the height of the front card
  • slidingCardWidth → double: This is the width of the card (both the front and the back card will have the same width)
  • slidingCardBorderRadius → double: This is the border radius of the card (both the front and the back card will have the same value)
  • slidingCardElevation → double: This is the elevation of the card (both the front and the back card will have the same elevation value)
  • cardsGap → double: This is the space between the 2 cards once they are separated
  • slidingAnimationDuration → Duration: The time it will take for the card to slide up or down
  • slidingAnimationForwardCurve → Curve: The animation curve when the card is sliding down
  • slidingAnimationReverseCurve → Curve: The animation curve when the card is sliding up
    Note that I won’t recommend to change it, curves other than the default one were giving visually unexpected behaviour
  • animateOpacity →  bool: This is to animate the opacity of the card while it slides down (it gives a good visual effect)
  • showColors →  bool: This is useful for debugging, by default the front and back card will be coloured. this is done in order for you to design your card easily

The Sliding Card controller

Use the controller to perform actions on the sliding card, you will not be able to trigger any action without it

Here is the class definition

The method expandCard() will expand the card and collapseCard() will collapse it.
Use the boolean isCardSeparated to whether the card is separated or not

Conclusion

Thank you for using my package, In case you have any feature request, you can make a pull request on GitHub or just Direct message me on Instagram ( I typically reply after an hour or 2 ).

Related Articles

Stay Up to Date With My Latest News & Updates

Join My Newsletter

 

Follow Me