Flutter Credit Card Input form

Overview

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.2.0
  1. Import the package
import 'package:credit_card_input_form/credit_card_input_form.dart';
  1. 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
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
image image
  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,
),

ezgif com-gif-maker

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

    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?

    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

    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?

    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

    Overflow problem

    proof: image

    ════════ 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.
Jeongtae Kim
A Flutter package to easily create a Credit Card in your application.

Awesome Card A flutter package to create a Credit Card widget in your application. Stay tuned for the latest updates: ?? Screenshots ⚙️ Installation I

Vivek Kaushik 142 Dec 1, 2022
A Dart package that detects credit card types based on their prefixes

credit_card_type_detector | Credit Card Type Detector A Dart package that detects credit card types based on the current credit card number patterns T

Tanner Davis 22 Jan 4, 2023
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Mark Hellner 1 Nov 8, 2022
ID-Card - A Simple ID Card Project Using Flutter

ID-CARD A new Flutter project.A simple demonstration of my time in the Dart lang

edwromero 0 Jan 26, 2022
With flutter tags you can create selectable or input tags that automatically adapt to the screen width

flutter_tags Create beautiful tags quickly and easily. Installing Add this to your package's pubspec.yaml file: dependencies: flutter_tags: "^0.4.9+

Antonino Di Natale 417 Dec 21, 2022
Native text input from iOS for Flutter

Native Text Input for Flutter A text input widget built using the native UITextView on iOS (this package only supports iOS for now). Installation Foll

Henry Leung 55 Dec 24, 2022
Lightweight Flutter form library

LoForm ?? LoForm is still experimental, missing features and bugs are to be expected. LoForm is a low-code and lightweight Flutter form library, inspi

Youssef Raafat 78 Dec 30, 2022
An app built using Flutter that holds buttons in form of xylophone which plays as instrument when clicked.

xylophone_flutter A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

dev_allauddin 3 Feb 3, 2022
A flutter package for building card based forms.

Card Settings NOTE: THIS IS EFFECTIVELY NULLSAFE BUT CANNOT REFLECT THIS UNTIL cupertino_settings IS UPGRADED. A flutter package for building settings

CodeGrue 445 Dec 26, 2022
Flutterwave landing page animated card deck implemented with Flutter

The Flutterwave animated card deck in Flutterwave's landing page implemented with Flutter.

null 38 Nov 10, 2022
This is my card using flutter

Mi Card Our Goal Now that you've seen how to create a Flutter app entirely from scratch, we're going to go further and learn more about how to design

Joshua Uzor 5 Dec 18, 2021
Flutter package - Animated Flip Card

Animated Flip Card Animated Flip Card package lets you add an animated flip card to your Flutter app that hide and show more informations. Features Th

Ulfhrafn 8 Dec 4, 2022
Flutter - Special animated flip card

special_card Flutter UI Design | Animated Flip Card. Demo for the app: animated-flip-card.mp4 Getting Started This project is a starting point for a F

Ulfhrafn 2 Dec 4, 2022
Flutter Card Management App(UI/UX)

Flutter Card Managing App - Cardy Bank I uploaded on youtube!! Thanks to Watch Introduction I'm working on a project to launch a simple brand. I tried

Lomio 8 Oct 31, 2022
A flutter port of Cardidy, a package to validate or identify card numbers & cvv with ease.

Flutter Cardidy A plugin to validate or identify card numbers & cvv with ease. This flutter package will help you validate card numbers or CVVs and id

Heyramb Narayan Goyal 1 Nov 28, 2021
Mi-card-app flutter project

my_card_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

null 1 Dec 2, 2021
A flutter widget where a card is expanded ontap.

Expansion card This package provides an easy implementation of a Expansion type card where you can also add gif at the background. How to use import '

null 127 Dec 6, 2022
Find out under which card the Flutter logo is hiding.

Flutter Card Flip Game Find out under which card the Flutter logo is hiding. Game Rules The purpose of this game is for the player to find out under w

Nickolas Chong 0 Dec 30, 2021
Scratch card widget which temporarily hides content from user.

scratcher Scratch card widget which temporarily hides content from user. Features Android and iOS support Cover content with full color or custom imag

Kamil Rykowski 405 Dec 27, 2022