Skip to content

Commit

Permalink
docs: Updated README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@utpal-barman
utpal-barman committed Apr 27, 2024
1 parent 560d98d commit ac16135
Showing 1 changed file with 12 additions and 21 deletions.
33 changes: 12 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
# uCreditCard 💳
### Credit Card UI as Flutter Widget 💎

## Credit Card UI as Flutter Widget 💎

[![pub package](https://img.shields.io/pub/v/u_credit_card.svg?logo=dart&logoColor=00b9fc)](https://pub.dartlang.org/packages/u_credit_card)
[![Last Commits](https://img.shields.io/github/last-commit/utpal-barman/u-credit-card-flutter?logo=git&logoColor=white)](https://github.com/utpal-barman/u-credit-card-flutter/commits/main)
[![Pull Requests](https://img.shields.io/github/issues-pr/utpal-barman/u-credit-card-flutter?logo=github&logoColor=white)](https://github.com/utpal-barman/u-credit-card-flutter/pulls)
[![Code size](https://img.shields.io/github/languages/code-size/utpal-barman/u-credit-card-flutter?logo=github&logoColor=white)](https://github.com/utpal-barman/u-credit-card-flutter)
[![License](https://img.shields.io/github/license/utpal-barman/u-credit-card-flutter?logo=open-source-initiative&logoColor=green)](https://github.com/utpal-barman/u-credit-card-flutter/blob/main/LICENSE)


🔥 "uCreditCard" is a Flutter package that offers a customizable solution for showing the UI of credit cards within your app. Elevate user engagement with captivating flip animations and enhance your app's visual appeal effortlessly!

<p align="center">
<img src="https://user-images.githubusercontent.com/16848599/233195178-b4fb8007-ba2e-48ed-8020-7a0854d5038c.png" width="700"/>
</p>

## Resources 📚

### Resources 📚
- [Documentation](https://pub.dev/documentation/u_credit_card/latest/u_credit_card/CreditCardUi-class.html)
- [Pub Package](https://pub.dev/packages/u_credit_card)
- [GitHub Repository](https://github.com/utpal-barman/u-credit-card-flutter)


## Getting Started: Installation 💻

**👉 In order to start using Credit Card UI you must have the [Flutter SDK](https://docs.flutter.dev/get-started/install) installed on your machine.**
**👉 To start using Credit Card UI you must have the [Flutter SDK](https://docs.flutter.dev/get-started/install) installed on your machine.**

Add `u_credit_card` to your `pubspec.yaml`:

Expand All @@ -40,8 +39,8 @@ flutter packages get

---


## Usage

To use the `CreditCardUi()` widget, import the package:

``` dart
Expand All @@ -60,7 +59,6 @@ CreditCardUi(

<img width="432" alt="u_credit_card_basic_setup" src="https://user-images.githubusercontent.com/16848599/232335773-5e6fdd6e-a4d9-4c01-a202-48cbca935cbe.png">


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
Expand Down Expand Up @@ -91,10 +89,8 @@ This will create a credit card user interface with the cardholder's name, card n
| `disableHapticFeedBack` | `bool` | A boolean flag to disable the haptic feedback. Example — card flipping or tapping on placeholder to see balance
| `width` | `double` | A double value to set the width of the card, maximum value is 300.




#### Example

``` dart
CreditCardUi(
cardHolderFullName: 'John Doe',
Expand All @@ -104,6 +100,7 @@ CreditCardUi(
topLeftColor: Colors.blue,
),
```

<img width="432" alt="u_credit_card_nfc_basic" src="https://user-images.githubusercontent.com/16848599/232335806-159f4873-7fcb-46e0-b559-bc5a59ab61bf.png">

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.
Expand All @@ -128,8 +125,6 @@ CreditCardUi(

<img width="432" alt="u_credit_card_nfc" src="https://user-images.githubusercontent.com/16848599/232332749-92d270b6-786d-4cb4-bc80-71654ce6fd56.png">



#### Custom Gradient

``` dart
Expand All @@ -141,18 +136,16 @@ CreditCardUi(
bottomRightColor: Colors.purpleAccent,
),
```

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

<img width="432" alt="u_credit_card_gradient" src="https://user-images.githubusercontent.com/16848599/232333158-e0a3f488-cb36-4142-91a7-12d7d9546fca.png">


#### Setting the card width

If you want to set the width of the card, use `width:` property.
Better NOT wrap with `SizedBox(width: ..., child: CreditCardUi(....))`, instead use `width:` right from the `CreditCardUi()`



``` dart
CreditCardUi(
width: 300, // 👈 this will set the width of the card
Expand All @@ -167,13 +160,15 @@ CreditCardUi(
Note: Setting up any value more than 300 is not considered, maximum width can be 300 only.

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

``` dart
CreditCardUi(
cardHolderFullName: 'John Doe',
Expand All @@ -195,11 +190,8 @@ CreditCardUi(
),
```



<img width="432" alt="Screenshot_2023-04-20_at_2 02 42_AM-removebg-preview" src="https://user-images.githubusercontent.com/16848599/233195568-5a197e2b-115c-46b1-876c-3428726f38cb.png">


To display the balance of your card, simply set `showBalance: true` and provide the balance amount using `balance: 200.0` (any double value). Enabling `autoHideBalance: true` will generate a placeholder labeled "Tap to see balance". Users can then tap on this placeholder to reveal the balance.

```dart
Expand All @@ -221,6 +213,7 @@ CreditCardUi(
```

#### Card Flipping Animation

To enable the flipping animation by default, simply set the property `enableFlipping: true`. You can set CVV by `cvvNumber: 000`.

```dart
Expand All @@ -245,14 +238,13 @@ CreditCardUi(

<img src="https://github.com/utpal-barman/u-credit-card-flutter/assets/16848599/350654f2-30c1-464b-93f2-7ed721f07792" width="432" />


ধন্যবাদ

---

## 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](https://github.com/vinaygaba/CreditCardView).

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](https://github.com/vinaygaba/CreditCardView).

## Contributor

Expand All @@ -270,4 +262,3 @@ There are already many credit card packages out there, but none of them look rea
## License

This package is released under the [BSD 3-Clause License](https://raw.githubusercontent.com/utpal-barman/u-credit-card-flutter/main/LICENSE).

0 comments on commit ac16135

Please sign in to comment.