{"id":13790018,"url":"https://github.com/Origogi/Horizontal_Card_Pager","last_synced_at":"2025-05-12T07:31:25.039Z","repository":{"id":43521069,"uuid":"288618782","full_name":"Origogi/Horizontal_Card_Pager","owner":"Origogi","description":"Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.","archived":false,"fork":false,"pushed_at":"2022-07-13T01:35:11.000Z","size":9661,"stargazers_count":36,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T04:51:44.902Z","etag":null,"topics":["dartlang","flutter","flutter-plugin","flutter-ui-challenges","flutter-ux"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Origogi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-19T02:57:57.000Z","updated_at":"2025-03-21T22:29:28.000Z","dependencies_parsed_at":"2022-07-15T07:00:34.254Z","dependency_job_id":null,"html_url":"https://github.com/Origogi/Horizontal_Card_Pager","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FHorizontal_Card_Pager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FHorizontal_Card_Pager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FHorizontal_Card_Pager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FHorizontal_Card_Pager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Origogi","download_url":"https://codeload.github.com/Origogi/Horizontal_Card_Pager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253695106,"owners_count":21948814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dartlang","flutter","flutter-plugin","flutter-ui-challenges","flutter-ux"],"created_at":"2024-08-03T22:00:35.991Z","updated_at":"2025-05-12T07:31:19.979Z","avatar_url":"https://github.com/Origogi.png","language":"Dart","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/35194820/91010815-29a04c80-e61e-11ea-8cb3-52c68d7b8810.png\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ca href=\"https://flutter.io\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Platform-Flutter-yellow.svg\"\n      alt=\"Platform\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/horizontal_card_pager\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/pub-v1.1.1-blue\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n  \nUse dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.\n\n## Preview\n\n### Mobile\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/35194820/90704450-73f69600-e2cb-11ea-85bc-e3e6b702e30f.gif\" width=\"190\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/35194820/90978412-c4e6e280-e588-11ea-9e5e-6b1f38fc6c30.gif\" width=\"200\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/35194820/91016063-21004400-e627-11ea-8899-06f991c8e58c.gif\" width=\"200\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/35194820/91016317-90763380-e627-11ea-85d9-926674648ea4.gif\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n   \u003cA href=\"https://github.com/Origogi/Vertical_Card_Pager\"\u003eVertical Card Pager \u003c/A\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n### Web\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/35194820/94567342-55aa8f80-02a6-11eb-9433-d010792e57b1.png\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n   \u003cA href=\"https://origogi.github.io/Horizontal_Card_Pager/#/\"\u003eWeb Link\u003c/A\u003e\n\u003c/div\u003e\n\n## Installing\n\n1. Add dependency to `pubspec.yaml`\n\n    *Get the latest version in the 'Installing' tab on pub.dartlang.org*\n    \n```dart\ndependencies:\n    horizontal_card_pager: ^1.1.1\n```\n\n2. Import the package\n\n```dart\nimport 'package:horizontal_card_pager/horizontal_card_pager.dart';\nimport 'package:horizontal_card_pager/card_item.dart';\n```\n\n3. Adding `HorizontalCardPager`\n\n*With optional parameters*\n```dart\nHorizontalCardPager(\n    initialPage : 2 // default value is 2\n    onPageChanged: (page) =\u003e print(\"page : $page\"),\n    onSelectedItem: (page) =\u003e print(\"selected : $page\"),\n    items: { ... },  // set ImageCardItem or IconTitleCardItem class\n))\n```\n\n4. Put `CardItem` object in items parameter in `HorizontalCardPager`\n\nIf 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.\n\n|Image|Icon \u0026 Text|\n|------|---|\n|![imagetype](https://user-images.githubusercontent.com/35194820/91019509-12685b80-e62c-11ea-832f-eca13c90a8ce.PNG)|![icontitletype](https://user-images.githubusercontent.com/35194820/91019511-1300f200-e62c-11ea-8efd-f669b96b8705.PNG)|\n\n### `ImageCardItem`\n\n~~~dart\n\nclass ImageCarditem extends CardItem {\n  final Widget image;\n\n  ImageCarditem({this.image});\n}\n~~~\n\n### `IconTitleCardItem`\n\n~~~dart\nclass IconTitleCardItem extends CardItem {\n  final IconData iconData;\n  final String text;\n  final Color selectedBgColor;\n  final Color noSelectedBgColor;\n  final Color selectedIconTextColor;\n  final Color noSelectedIconTextColor;\n\n  IconTitleCardItem(\n      {this.iconData,\n      this.text,\n      this.selectedIconTextColor = Colors.white,\n      this.noSelectedIconTextColor = Colors.grey,\n      this.selectedBgColor = Colors.blue,\n      this.noSelectedBgColor = Colors.white});\n}\n~~~\n\n## How to use\n\nCheck out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.\n\n## Reference\n\nThis package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/5097519-California-National-Park-Guide?utm_source=Clipboard_Shot\u0026utm_campaign=KEVINGAUTIER\u0026utm_content=California%20National%20Park%20Guide\u0026utm_medium=Social_Share) art.\n\n## TODO\n\n- [x] Attach Gesture Detector\n- [x] implement call back method\n- [x] Enable to customize card design\n    - [x] icon \u0026 title\n    - [x] image only\n- [x] Implements sample app\n- [x] Publish plugin","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOrigogi%2FHorizontal_Card_Pager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOrigogi%2FHorizontal_Card_Pager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOrigogi%2FHorizontal_Card_Pager/lists"}