photo_card_swiper

Language: English

A simple flutter package for creating a swiping card layout for list of photos.

photo_card_swiper is a photo slider resembling card stack. Card comprises options to reflect like, dislike and favorite feature. The card elements are highly customisable. This layout is quite common in social media apps like Instagram, tinder etc.

Technical Notes:

The layout for pages is built using stack of draggable widgets using LayoutBuilder. This package supports cards to be tapped too. Dev have options show 2 or 3 buttons, change the color, icon name and icon color of those buttons too.

How to use it.

the usage is very simple, just use the following code for default rendering of photos. Default values for Icons and Colors are taken care for easy usage.

PhotoCardSwiper(
     photos: widget._photos,
     showLoading: false,
 ),

or use the following with customizations

 PhotoCardSwiper(
     photos: widget._photos,
     showLoading: true,
     hideCenterButton: false,
     leftButtonIcon: Icons.close,
     rightButtonIcon: Icons.check,
     centerButtonIcon: Icons.favorite,
     leftButtonBackgroundColor: Colors.red[100],
     rightButtonBackgroundColor: Colors.lightGreen[100],
     centerButtonBackgroundColor: Colors.lightBlue[50],
     leftButtonIconColor: Colors.red[600],
     rightButtonIconColor: Colors.lightGreen[700],
     centerButtonIconColor: Colors.lightBlue[600],
     leftButtonAction: _leftButtonClicked,
     rightButtonAction: _rightButtonClicked,
     centerButtonAction: _centerButtonClicked,
     onCardTap: _onCardTap,
     cardSwiped: _cardSwiped,
 ),

Parameters for photo_card_swiper

parameterdescriptionvalue
photosArray of Photo data to be rendered as cards, Use PhotoCard object to group card details.[PhotoCard]()
showLoadingToggle the value to show/hide loading cardThis is a optional parameter. value cane be true/false
hideCenterButtonUse this to have only 2 action buttons.This is a optional parameter. Pass either true/false
leftButtonIconLeft button IconThis is a optional parameter. Pass IconData type value
rightButtonIconRight button IconThis is a optional parameter. Pass IconData type value
centerButtonIconCenter button IconThis is a optional parameter. Pass IconData type value
leftButtonBackgroundColorLeft button Background ColorThis is a optional parameter. Pass Color type value
rightButtonBackgroundColorRight button Background ColorThis is a optional parameter. Pass Color type value
centerButtonBackgroundColorCenter button Background ColorThis is a optional parameter. Pass Color type value
leftButtonIconColorLeft button Icon ColorThis is a optional parameter. Pass Color type value
rightButtonIconColorRight button Icon ColorThis is a optional parameter. Pass Color type value
centerButtonIconColorCenter button Icon ColorThis is a optional parameter. Pass Color type value
leftButtonActionLeft button click handlerThis is a optional parameter. Pass method to be called on click.
rightButtonActionRight button click handlerThis is a optional parameter. Pass method to be called on click.
centerButtonActionCenter button click handlerThis is a optional parameter. Pass method to be called on click.
onCardTapBackground color of TabbarThis is a optional parameter. Example pass method with completion handler. (int _index) { }
cardSwipedBackground color of TabbarThis is a optional parameter. Example pass method with completion handler. (CardActionDirection _direction, int _index) { }

Attributes/Properties of PhotoCard

parameterdescriptiondefault
titleString to be displayed in title Text widgetempty string
descriptionString to be displayed in description Text widgetempty string
imagePathImage path of image, either local assets folder image or http image pathempty string
isLocalImageValue is true if imagePath is local assets folder image, Value is true if imagePath is http image pathtrue

Please note try to load max of 10 photos at one time. This helps stack to be neat. To show more photos load them on pagination basis using cardSwiped method.

The usage is well described in the example code.

git repo here

Made with ❤ and dedicated with respect to the Saviour Sonu Sood

Libraries

feedback_photo_card_value_notifier
feedback_photo_card_widget
loading_data_photo_card
photo_card
photo_card_layout_widget
photo_card_swiper
photo_description_widget
photo_title_widget
shimmer
shimmer_loading_widget