https://github.com/Origogi/Flutter-Credit-Card-Input-Form

Flutter Credit Card Input form
https://github.com/Origogi/Flutter-Credit-Card-Input-Form

animation card card-companies flutter flutter-apps flutter-examples flutter-plugin flutter-ui-challenges

Last synced: about 1 month ago
JSON representation

Flutter Credit Card Input form

• Host: GitHub
• URL: https://github.com/Origogi/Flutter-Credit-Card-Input-Form
• Owner: Origogi
• License: bsd-2-clause
• Created: 2020-03-04T12:27:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-04-03T13:20:49.000Z (over 3 years ago)
• Last Synced: 2024-05-20T22:45:14.126Z (4 months ago)
• Topics: animation, card, card-companies, flutter, flutter-apps, flutter-examples, flutter-plugin, flutter-ui-challenges
• Language: Dart
• Homepage:
• Size: 996 KB
• Stars: 494
• Watchers: 11
• Forks: 51
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        









	

    

  

  

   






   




   








This package provides visually beautiful UX through animation of credit card information input form.

## Preview







## Installing

1. Add dependency to `pubspec.yaml`

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

    

```dart

dependencies:

    credit_card_input_form: ^2.3.0

```

2. Import the package

```dart

import 'package:credit_card_input_form/credit_card_input_form.dart';

```

3. Adding `CreditCardInputForm`

*With optional parameters*

```dart

 CreditCardInputForm(

   cardHeight: 170,

   showResetButton : true,

   onStateChange: (currentState, cardInfo) {

     print(currentState);

     print(cardInfo);

   },

   customCaptions: {...}, 

   frontCardDecoration: cardDecoration,

   backCardDecoration: cardDecoration,

   prevButtonDecoration: buttonStyle,

   nextButtonDecoration: buttonStyle,

   resetButtonDecoration : buttonStyle,

   prevButtonTextStyle: buttonTextStyle,

   nextButtonTextStyle: buttonTextStyle,

   resetButtonTextStyle: buttonTextStyle,

   initialAutoFocus: true, // optional

),

```

## How to use

Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.

## New Feature

### v1.3.0

added custom button style feature



|Default|Custom|

|------|---|

|![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)|



~~~dart

final buttonDecoration = BoxDecoration(

    borderRadius: BorderRadius.circular(30.0),

    gradient: LinearGradient(

        colors: [

          const Color(0xfffcdf8a),

          const Color(0xfff38381),

        ],

        begin: const FractionalOffset(0.0, 0.0),

        end: const FractionalOffset(1.0, 0.0),

        stops: [0.0, 1.0],

        tileMode: TileMode.clamp),

  );

  final buttonTextStyle =

      TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18);

  CreditCardInputForm(

    prevButtonDecoration: buttonDecoration,

    nextButtonDecoration: buttonDecoration,

    prevButtonTextStyle: buttonTextStyle,

    nextButtonTextStyle: buttonTextStyle,

    resetButtonTextStyle: buttonTextStyle,

  ),

~~~

### v2.0.0

It provides more options using boxdecoration that can only change the color of the card.



|Default|Custom|

|------|---|

|![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)|



~~~dart

  final cardDecoration = BoxDecoration(

    boxShadow: [

      BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))

    ],

    gradient: LinearGradient(

        colors: [

          Colors.red,

          Colors.blue,

        ],

        begin: const FractionalOffset(0.0, 0.0),

        end: const FractionalOffset(1.0, 0.0),

        stops: [0.0, 1.0],

        tileMode: TileMode.clamp),

    borderRadius: BorderRadius.all(Radius.circular(15)));

    CreditCardInputForm(

      frontCardDecoration: cardDecoration,

      backCardDecoration: cardDecoration,

    ),

  ]),

~~~

### v2.1.0

implement a new feature to add an initial value when creating a widget

 Code   Preview 

 

~~~dart

CreditCardInputForm(

  ....

  cardCVV: '222',

  cardName: 'Jeongtae Kim',

  cardNumber: '1111111111111111',

  cardValid: '12/12',

  intialCardState: InputState.DONE,

),

~~~

![ezgif com-gif-maker](https://user-images.githubusercontent.com/35194820/96005684-a958d380-0e77-11eb-8b5e-f9dd889c875f.gif)

### v2.2.0

Add `initialAutoFocus` parameter

## 3rd party library

### Flip card

https://pub.dev/packages/flip_card

*For use card flip animation*

### Provider

https://pub.dev/packages/provider

*For use state management*

## Reference

This package's animation is inspired from from this [Dribbble](https://dribbble.com/shots/6440077-Add-a-New-Credit-Card-alternate-flow

) art

## TODO List

- [x] add `RESET` button

- [x] add box decoration param