horizontal_card_pager

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

Preview

Mobile

Web

Installing

1. Add dependency to pubspec.yaml

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

dependencies:
    horizontal_card_pager: ^1.1.1

2. Import the package

import 'package:horizontal_card_pager/horizontal_card_pager.dart';
import 'package:horizontal_card_pager/card_item.dart';

3. Adding HorizontalCardPager

With optional parameters

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

4. 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

ImageCardItem

class ImageCarditem extends CardItem {
  final Widget image;

  ImageCarditem({this.image});
}

IconTitleCardItem

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

  IconTitleCardItem(
      {this.iconData,
      this.text,
      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.

Reference

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

TODO

• [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