Flutter Credit Card Input form

Jeongtae Kim

Last update: Jan 5, 2023

Overview

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

Preview

Installing

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

Import the package

import 'package:credit_card_input_form/credit_card_input_form.dart';

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

Comments

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

opened by alanjholiveira 6
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?
enhancement

opened by seenewmax 4
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!
enhancement

opened by luccascorrea 4
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
enhancement

opened by ianeinser 3

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

bug

opened by YazeedAlKhalaf 2

Owner

Jeongtae Kim

Please, Lord, help me upload one more commit.

GitHub

Making-form - A form design with dart programming and auto next facility

3 Nov 15, 2022

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

6 Jun 7, 2022

Simple form maker for Flutter Framework

Flutter FormBuilder - flutter_form_builder This package helps in creation of data collection forms in Flutter by removing the boilerplate needed to bu

1.2k Jan 3, 2023

A Flutter widget to show a text form field to display a date or clock dialog

A Flutter widget to show a text form field to display a date or clock dialog. This widget extend TextField and has a similar behavior as TextFormField.

82 Jan 6, 2023

Flutter widget form select a date in horizontal timeline with customizable styles.

Flutter widget form select a date in horizontal timeline with customizable styles. Getting Started You can use this package when you need to add a dat

158 Dec 2, 2022

A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

73 Sep 7, 2022

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.

332 Dec 20, 2022

UI Card Designs - A new Flutter application.

UI Card Designs A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

14 Dec 23, 2022

Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.

Sliding Card Introduction Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation eff