Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.
Preview
Mobile
Web
Installing
-
Add dependency to
pubspec.yamlGet the latest version in the 'Installing' tab on pub.dartlang.org
dependencies:
horizontal_card_pager: ^1.1.1
- Import the package
import 'package:horizontal_card_pager/horizontal_card_pager.dart';
import 'package:horizontal_card_pager/card_item.dart';
- Adding
HorizontalCardPager
With optional parameters
print("selected : $page"), items: { ... }, // set ImageCardItem or IconTitleCardItem class )) ">
HorizontalCardPager( initialPage : 2 // default value is 2 onPageChanged: (page) => print("page : $page"), onSelectedItem: (page) => print("selected : $page"), items: { ... }, // set ImageCardItem or IconTitleCardItem class ))
- Put
CardItemobject in items parameter inHorizontalCardPager
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
- Attach Gesture Detector
- implement call back method
- Enable to customize card design
- icon & title
- image only
- Implements sample app
- Publish plugin
124 Jan 4, 2023
1 Mar 19, 2022
8 Aug 19, 2022
1 Oct 9, 2022
423 Dec 25, 2022
23 Jan 28, 2022
18 Dec 30, 2022
9 Dec 23, 2022
1 Oct 9, 2021