Flutter Credit Card Input Design Tutorial

 

Flutter Credit Card Input :

Flutter credit card input screen design is explained in this part of the tutorial where we accept user input i.e., user details like name, card number, valid thru and cvv.

Instead of regular pattern i.e., text fields we make use of a design which look exactly like the real card and provide the user to easily provide the details.

In payment gateway integration accepting user input plays a key role as fetching the correct details from the user makes a successful transaction.

Also some times we need to display user the list of cards he used previously for the transactions so that he can directly select those cards and make a faster transactions.

 

Flutter Credit Card Input Video Tutorial :

Go through the below tutorial for more details on implementation

 

pubspec.yaml :

Add the dependency credit_card_input_form to the pubspec file and also update the version accordingly.

dependencies:
  flutter:
    sdk: flutter
  credit_card_input_form:

 

main.dart :

Initialize with void main()

void main() {
  runApp(MyApp());
}

 

Create a state for the MyApp class and extend it with StatefulWidget

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

 

We need to provide the custom captions which we try to display on the card i.e., labels and the data under them to make sure user understand the respective fields.

 

Now declare a design for the buttons so that we can move forward and backward in details entry

final buttonStyle = 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),
);

 

Provide a card decoration i.e., our flutter credit card design on which we show the details we can edit the card design aspects like card color, border radius, shadow to be displayed around the card and so on.

These details can be varied upon your app requirement.

final cardDecoration = BoxDecoration(
    boxShadow: <BoxShadow>[
      BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))
    ],
    gradient: LinearGradient(
        colors: [
          Colors.black,
          Colors.black45,
        ],
        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)));

 

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

 

Return a MaterialApp where we provide scaffold and inside the body we have specified column so that we can specify multiple children.

MaterialApp(
  home: Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
       
      ],
    ),
  ),
);

 

Now define a Animated Container where our card is present and can be rotated foreground to background.

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  child: Stack(children: [
    CreditCardInputForm(
      showResetButton: true,
      onStateChange: (currentState, cardInfo) {
        print(currentState);
        print(cardInfo);
      },
      customCaptions: customCaptions,
      frontCardDecoration: cardDecoration,
      backCardDecoration: cardDecoration,
      // prevButtonStyle: buttonStyle,
      // nextButtonStyle: buttonStyle,
      // prevButtonTextStyle: buttonTextStyle,
      // nextButtonTextStyle: buttonTextStyle,
      // resetButtonTextStyle: buttonTextStyle,
    ),
  ]),
),

 

FullCode :

Providing the full code for flutter credit card input design

import 'package:flutter/material.dart';

import 'package:credit_card_input_form/credit_card_input_form.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // translate and customize captions
  final Map<String, String> customCaptions = {
    'PREV': 'Prev',
    'NEXT': 'Next',
    'DONE': 'Done',
    'CARD_NUMBER': 'Card Number',
    'CARDHOLDER_NAME': 'Cardholder Name',
    'VALID_THRU': 'Valid Thru',
    'SECURITY_CODE_CVC': 'Security Code (CVC)',
    'NAME_SURNAME': 'Name',
    'MM_YY': 'MM/YY',
    'RESET': 'Reset',
  };

  final buttonStyle = 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 cardDecoration = BoxDecoration(
      boxShadow: <BoxShadow>[
        BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))
      ],
      gradient: LinearGradient(
          colors: [
            Colors.black,
            Colors.black45,
          ],
          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)));

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

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(
              child: SafeArea(
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  child: Stack(children: [
                    CreditCardInputForm(
                      showResetButton: true,
                      onStateChange: (currentState, cardInfo) {
                        print(currentState);
                        print(cardInfo);
                      },
                      customCaptions: customCaptions,
                      frontCardDecoration: cardDecoration,
                      backCardDecoration: cardDecoration,
                      // prevButtonStyle: buttonStyle,
                      // nextButtonStyle: buttonStyle,
                      // prevButtonTextStyle: buttonTextStyle,
                      // nextButtonTextStyle: buttonTextStyle,
                      // resetButtonTextStyle: buttonTextStyle,
                    ),
                  ]),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

Flutter Credit Card Input Output :

This screen depicts the implementation of flutter credit card input