origogi / flutter-credit-card-input-form

Flutter Credit Card Input form

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

dependencies:
    credit_card_input_form: ^2.3.0

2. Import the package

import 'package:credit_card_input_form/credit_card_input_form.dart';

3. Adding CreditCardInputForm

With optional parameters

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

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

  final cardDecoration = BoxDecoration(
    boxShadow: <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
CreditCardInputForm( .... cardCVV: '222', cardName: 'Jeongtae Kim', cardNumber: '1111111111111111', cardValid: '12/12', intialCardState: InputState.DONE, ),

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 art

TODO List

• add RESET button
• add box decoration param

flutter-credit-card-input-form's Issues

Edit card after adding button DONE

Do you have any option to edit the card after clicking "DONE".?
When I go to DONE the fields disappear so I can't edit it if I typed the wrong number on the card.

Error if text entered

It's possible to enter text in card number field (with some phones or with a copy/paste) = Red screen.
Thank you

Remove print cardName

Removal of print cardName, in file card_sign.dart line 16

Card Not rotating

how to rotate the card?

Overflow problem

proof:

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 13 pixels on the bottom.

The relevant error-causing widget was
CreditCardInputForm
lib\…\payment\payment_view.dart:46
You can inspect this widget using the 'Inspect Widget' button in the VS Code notification.
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#bbd90 OVERFLOWING
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 13 pixels on the bottom.
The relevant error-causing widget was
CreditCardInputForm
lib\…\payment\payment_view.dart:46
════════════════════════════════════════════════════════════════════════════════

onTap Next/Prev

it is possible to implement an ontap overwrite in the next and previous

Is it possible to enter data into the card?

Hello I put this package to my favourites few months ago and trying to use it now.
Thank you for your contribution before the question.

I'm planning to save the card information and let users to see their cards filled with the information.
I tried to find how to put data into the card but I couldn't find text controller from the code.
If possible, would you tell me how I can make a card with information?

Done button pressed

Is there a way to do something separate from the credit card when the done button is pressed? Essentially, I want to call 'onPressed'

How to change text in credit. card input form

How can i change the card text and text of next previous button in credit card input form library plz suggest

null-safety

Do you plan to update null-safety ?
thank you ?

Text field bottom overflow

With a Samsung text field bottom overflow 4 pixels

Thank you

AMEX CVC

Amex cards have a 4 digit CVC, only 3 possible

Set AutoFocus Value

Hello and Thank you for this great library , my only issue is that the widget is autofocused by default so how can i possibly set autofocus to false

Card Issuer?

Hello,

is it possible for you to add Card Issuer such as Bank? Most cards have card issuer printed on the top left of the card. I appreciate if you take this into consideration.

Regards

Features missing

There should be atleast access to the textfields as there is no way to add.. validation to this.!

Please Add SingleChildScrollView() just Above the Column

Error:

Solution:
Add SingleChildScrollView() Widget Just Above the Cloumn Widget, See the Below Image:

Preview:

Customize buttons

Hi, thanks for the awesome lib!

One question, is there a way to customize the prev and next buttons? I was checking out the source code and it seems like there isn't. Are there plans to enable this?

Thanks!

Card number overflow

Font size of card number seems fixed, so it overflows in smaller devices like iPhone SE.