uCreditCard 💳

Credit Card UI as Flutter Widget 💎

🔥 “uCreditCard” is a Flutter package that offers a customizable solution for showing the UI of credit cards within your app.

Resources 📚

• Documentation
• Pub Package
• GitHub Repository

Getting Started: Installation 💻

👉 In order to start using Credit Card UI you must have the Flutter SDK installed on your machine.

Add u_credit_card to your pubspec.yaml:

dependencies:
  u_credit_card: ^1.0.3

Install it:

flutter packages get

Usage

To use CreditCardUi, import the package:

import 'package:u_credit_card/u_credit_card.dart';

Create widget of CreditCardUi(...) with the required parameters:

CreditCardUi(
  cardHolderFullName: 'John Doe',
  cardNumber: '1234567812345678',
  validThru: '10/24',
),

This will create a credit card user interface with the cardholder’s name, card number, and validity date. For more advanced usage, see the following parameters:

Parameters

Example

CreditCardUi(
  cardHolderFullName: 'John Doe',
  cardNumber: '1234567812345678',
  validFrom: '01/23',
  validThru: '01/28',
  topLeftColor: Colors.blue,
),

Get ready to create a sleek and stylish credit card interface with just a few lines of code! With this package, you can easily customize the cardholder’s name, card number, validity dates, and gradient colors to make it uniquely yours.

By default, the card will have a chic blue gradient and an NFC icon. But don’t worry, if you don’t want the NFC icon, simply pass doesSupportNfc: false.

Want to switch things up and place the NFC icon on the opposite side of the chip? No problem! Just enable it by passing placeNfcIconAtTheEnd: true, but remember to also pass doesSupportNfc: true.

Let’s make your app look as sleek as that shiny new credit card!

CreditCardUi(
    cardHolderFullName: 'John Doe',
    cardNumber: '1234567812345678',
    validFrom: '01/23',
    validThru: '01/28',
    topLeftColor: Colors.blue,
    doesSupportNfc: true,
    placeNfcIconAtTheEnd: true, // 👈 NFC icon will be at the end,
),

Custom Gradient

CreditCardUi(
  cardHolderFullName: 'John Doe',
  cardNumber: '1234567812345678',
  validThru: '10/24',
  topLeftColor: Colors.red,
  bottomRightColor: Colors.purpleAccent,
),

This will create a credit card user interface with a red-to-purple gradient.

Scaling

If you want to scale the card, use scale: property.

If you set less than 1, the card size will be reduced, if you set greater than 1, the card size will be increased.

CreditCardUi(
  scale: 0.6, // 👈 this will make smaller than the regular size
  cardHolderFullName: 'John Doe',
  cardNumber: '1234567812345678',
  validThru: '10/24',
  topLeftColor: Colors.red,
  bottomRightColor: Colors.purpleAccent,
),

Additional Customizations

To further customize the card, you can add a background image by using the backgroundDecorationImage property. Additionally, you can include a logo for the card provider using the cardProviderLogo property. This logo can be positioned on either the left or the right side of the card using the cardProviderLogoPosition property.

If you want to specify a particular card type to display, you can set it using the cardType property. If you prefer not to specify a card type, you can set cardType: CardType.other.

Here is an example of how to use these customization options:

Example:

CreditCardUi(
    cardHolderFullName: 'John Doe',
    cardNumber: '1234567812345678',
    validFrom: '01/23',
    validThru: '01/28',
    topLeftColor: Colors.blue,
    doesSupportNfc: true,
    placeNfcIconAtTheEnd: true,
    cardType: CardType.debit,
    cardProviderLogo: FlutterLogo(), // 👈 Set your logo here, supports any widget
    cardProviderLogoPosition: CardProviderLogoPosition.right,
    backgroundDecorationImage: DecorationImage(
    fit: BoxFit.cover,
    image: NetworkImage( // 👈 `AssetImage` is also supported
        'https://....',
      ),
    ),
),

ধন্যবাদ

Inspiration

There are already many credit card packages out there, but none of them look realistic. So, I’ve decided to create something that will look the same as our cards in real life. Additionally, this project was inspired by a Native Android library.

Contributor

Utpal Barman 🇧🇩

License

This package is released under the BSD 3-Clause License.

GitHub

View Github