Horizontal Card Pager With Flutter

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.


Vertical Card Pager

  1. Add dependency to pubspec.yaml

    Get the latest version in the ‘Installing’ tab on pub.dartlang.org

    horizontal_card_pager: ^0.3.0
  1. Import the package
import 'package:horizontal_card_pager/horizontal_card_pager.dart';
import 'package:horizontal_card_pager/card_item.dart';
  1. Adding HorizontalCardPager

With optional parameters

    initialPage : 2 // default value is 2
    onPageChanged: (page) => print("page : $page"),
    onSelectedItem: (page) => print("selected : $page"),
    items: { ... },  // set ImageCardItem or IconTitleCardItem class
  1. Put CardItem object in items parameter in HorizontalCardPager

If the contents of the card contain only images, use the ImageCardItem class. and If the contents of the card include an icon and a title, use the IconTitleCardItem class.

Image Icon & Text
imagetype icontitletype


class ImageCarditem extends CardItem {
  final Widget image;



class IconTitleCardItem extends CardItem {
  final IconData iconData;
  final String text;
  final Color selectedBgColor;
  final Color noSelectedBgColor;
  final Color selectedIconTextColor;
  final Color noSelectedIconTextColor;

      this.selectedIconTextColor = Colors.white,
      this.noSelectedIconTextColor = Colors.grey,
      this.selectedBgColor = Colors.blue,
      this.noSelectedBgColor = Colors.white});

How to use

Check out the example app in the example directory or the ‘Example’ tab on pub.dartlang.org for a more complete example.


This package’s animation is inspired from from this Dribbble art.


  • [x] Attach Gesture Detector
  • [x] implement call back method
  • [x] Enable to customize card design
    • [x] icon & title
    • [x] image only
  • [x] Implements sample app
  • [x] Publish plugin

Download Details:

Author: Origogi

Source Code: https://github.com/Origogi/Horizontal_Card_Pager

#flutter #dart #mobile-apps

Horizontal Card Pager With Flutter
21.70 GEEK