horizontal_card_pager 1.1.1 copy "horizontal_card_pager: ^1.1.1" to clipboard
horizontal_card_pager: ^1.1.1 copied to clipboard

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

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

HorizontalCardPager(
    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

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 #

  • Attach Gesture Detector
  • implement call back method
  • Enable to customize card design
    • icon & title
    • image only
  • Implements sample app
  • Publish plugin
155
likes
120
pub points
83%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-2-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on horizontal_card_pager