{"id":13465553,"url":"https://github.com/Origogi/Flutter-Credit-Card-Input-Form","last_synced_at":"2025-03-25T16:32:22.709Z","repository":{"id":37440642,"uuid":"244894435","full_name":"Origogi/Flutter-Credit-Card-Input-Form","owner":"Origogi","description":"Flutter Credit Card Input form","archived":false,"fork":false,"pushed_at":"2021-04-03T13:20:49.000Z","size":1020,"stargazers_count":494,"open_issues_count":0,"forks_count":51,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-05-20T22:45:14.126Z","etag":null,"topics":["animation","card","card-companies","flutter","flutter-apps","flutter-examples","flutter-plugin","flutter-ui-challenges"],"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-03-04T12:27:41.000Z","updated_at":"2024-04-06T19:10:05.000Z","dependencies_parsed_at":"2022-08-08T20:16:00.856Z","dependency_job_id":null,"html_url":"https://github.com/Origogi/Flutter-Credit-Card-Input-Form","commit_stats":null,"previous_names":["origogi/flutter-credit-card-input"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FFlutter-Credit-Card-Input-Form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FFlutter-Credit-Card-Input-Form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FFlutter-Credit-Card-Input-Form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Origogi%2FFlutter-Credit-Card-Input-Form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Origogi","download_url":"https://codeload.github.com/Origogi/Flutter-Credit-Card-Input-Form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222088579,"owners_count":16928981,"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":["animation","card","card-companies","flutter","flutter-apps","flutter-examples","flutter-plugin","flutter-ui-challenges"],"created_at":"2024-07-31T15:00:31.838Z","updated_at":"2024-10-29T17:31:13.293Z","avatar_url":"https://github.com/Origogi.png","language":"Dart","readme":"\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/35194820/76590756-8c4ed180-6531-11ea-89f5-382a9553541e.png\" width=\"600\" \u003e\n\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/credit_card_input_form\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/pub-v2.3.0-red\" /\u003e\n\n\u003c/a\u003e\n\u003ca href=\"https://github.com/Solido/awesome-flutter\"\u003e\n   \u003cimg alt=\"Awesome Flutter\" src=\"https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true\u0026style=flat-square\" /\u003e\n\n\u003c/a\u003e\n   \u003cimg src=\"https://img.shields.io/github/forks/Origogi/Flutter-Credit-Card-Input-Form\" \u003e\n\u003cimg src=\"https://img.shields.io/github/stars/Origogi/Flutter-Credit-Card-Input-Form\" \u003e\n\u003cimg src=\"https://img.shields.io/github/license/Origogi/Flutter-Credit-Card-Input-Form\" \u003e\n\n\u003c/div\u003e\u003cbr\u003e\n\nThis package provides visually beautiful UX through animation of credit card information input form.\n\n## Preview\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/35194820/82177030-5bb15c80-9913-11ea-83bf-d6bfdf858f04.gif\" width=\"250\" \u003e\n\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    credit_card_input_form: ^2.3.0\n```\n\n2. Import the package\n\n```dart\nimport 'package:credit_card_input_form/credit_card_input_form.dart';\n```\n\n3. Adding `CreditCardInputForm`\n\n*With optional parameters*\n```dart\n CreditCardInputForm(\n   cardHeight: 170,\n   showResetButton : true,\n   onStateChange: (currentState, cardInfo) {\n     print(currentState);\n     print(cardInfo);\n   },\n   customCaptions: {...}, \n   frontCardDecoration: cardDecoration,\n   backCardDecoration: cardDecoration,\n   prevButtonDecoration: buttonStyle,\n   nextButtonDecoration: buttonStyle,\n   resetButtonDecoration : buttonStyle,\n   prevButtonTextStyle: buttonTextStyle,\n   nextButtonTextStyle: buttonTextStyle,\n   resetButtonTextStyle: buttonTextStyle,\n   initialAutoFocus: true, // optional\n\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## New Feature\n\n### v1.3.0\n\nadded custom button style feature\n\n\u003cdiv align=\"center\"\u003e\n\n|Default|Custom|\n|------|---|\n|![default](https://user-images.githubusercontent.com/35194820/89704240-1e49f180-d98d-11ea-9305-5938f0386251.PNG)|![custom](https://user-images.githubusercontent.com/35194820/89704237-1d18c480-d98d-11ea-9557-36a8519da301.PNG)|\n\u003c/div\u003e\n\n~~~dart\nfinal buttonDecoration = BoxDecoration(\n    borderRadius: BorderRadius.circular(30.0),\n    gradient: LinearGradient(\n        colors: [\n          const Color(0xfffcdf8a),\n          const Color(0xfff38381),\n        ],\n        begin: const FractionalOffset(0.0, 0.0),\n        end: const FractionalOffset(1.0, 0.0),\n        stops: [0.0, 1.0],\n        tileMode: TileMode.clamp),\n  );\n\n  final buttonTextStyle =\n      TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18);\n\n  CreditCardInputForm(\n    prevButtonDecoration: buttonDecoration,\n    nextButtonDecoration: buttonDecoration,\n    prevButtonTextStyle: buttonTextStyle,\n    nextButtonTextStyle: buttonTextStyle,\n    resetButtonTextStyle: buttonTextStyle,\n  ),\n\n~~~\n\n### v2.0.0\n\nIt provides more options using boxdecoration that can only change the color of the card.\n\n\u003cdiv align=\"center\"\u003e\n\n|Default|Custom|\n|------|---|\n|![image](https://user-images.githubusercontent.com/35194820/89976756-434ba680-dca4-11ea-8297-ed7dccbfb6e6.png)|![image](https://user-images.githubusercontent.com/35194820/89976725-2b742280-dca4-11ea-8771-9e3bd9690ee0.png)|\n\u003c/div\u003e\n\n~~~dart\n  final cardDecoration = BoxDecoration(\n    boxShadow: \u003cBoxShadow\u003e[\n      BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))\n    ],\n    gradient: LinearGradient(\n        colors: [\n          Colors.red,\n          Colors.blue,\n        ],\n        begin: const FractionalOffset(0.0, 0.0),\n        end: const FractionalOffset(1.0, 0.0),\n        stops: [0.0, 1.0],\n        tileMode: TileMode.clamp),\n    borderRadius: BorderRadius.all(Radius.circular(15)));\n\n\n    CreditCardInputForm(\n      frontCardDecoration: cardDecoration,\n      backCardDecoration: cardDecoration,\n    ),\n  ]),\n~~~\n\n### v2.1.0\n\nimplement a new feature to add an initial value when creating a widget\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e Code \u003c/td\u003e \u003ctd\u003e Preview \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e \n\n~~~dart\nCreditCardInputForm(\n  ....\n  cardCVV: '222',\n  cardName: 'Jeongtae Kim',\n  cardNumber: '1111111111111111',\n  cardValid: '12/12',\n  intialCardState: InputState.DONE,\n),\n~~~\n\u003c/td\u003e\n\u003ctd\u003e\n\n![ezgif com-gif-maker](https://user-images.githubusercontent.com/35194820/96005684-a958d380-0e77-11eb-8b5e-f9dd889c875f.gif)\n\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### v2.2.0\n\nAdd `initialAutoFocus` parameter\n\n## 3rd party library\n\n### Flip card\n\nhttps://pub.dev/packages/flip_card\n\n*For use card flip animation*\n\n### Provider\n\nhttps://pub.dev/packages/provider\n\n*For use state management*\n\n## Reference\n\nThis package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/6440077-Add-a-New-Credit-Card-alternate-flow\n) art\n\n## TODO List\n\n- [x] add `RESET` button\n- [x] add box decoration param\n","funding_links":[],"categories":["Components","Dart","Packages"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOrigogi%2FFlutter-Credit-Card-Input-Form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOrigogi%2FFlutter-Credit-Card-Input-Form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOrigogi%2FFlutter-Credit-Card-Input-Form/lists"}