From ac16135f4b119ba34105fe476c4314e5c66037d1 Mon Sep 17 00:00:00 2001 From: Utpal Date: Sun, 28 Apr 2024 01:18:09 +0600 Subject: [PATCH] docs: Updated README.md --- README.md | 33 ++++++++++++--------------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index fa5a455..18c8561 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # 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) @@ -7,23 +8,21 @@ [![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!

+## 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`: @@ -40,8 +39,8 @@ flutter packages get --- - ## Usage + To use the `CreditCardUi()` widget, import the package: ``` dart @@ -60,7 +59,6 @@ CreditCardUi( u_credit_card_basic_setup - 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 @@ -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', @@ -104,6 +100,7 @@ CreditCardUi( topLeftColor: Colors.blue, ), ``` + u_credit_card_nfc_basic 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. @@ -128,8 +125,6 @@ CreditCardUi( u_credit_card_nfc - - #### Custom Gradient ``` dart @@ -141,18 +136,16 @@ CreditCardUi( bottomRightColor: Colors.purpleAccent, ), ``` + This will create a credit card user interface with a red-to-purple gradient. u_credit_card_gradient - #### 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 @@ -167,6 +160,7 @@ 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`. @@ -174,6 +168,7 @@ If you want to specify a particular card type to display, you can set it using t Here is an example of how to use these customization options: Example: + ``` dart CreditCardUi( cardHolderFullName: 'John Doe', @@ -195,11 +190,8 @@ CreditCardUi( ), ``` - - Screenshot_2023-04-20_at_2 02 42_AM-removebg-preview - 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 @@ -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 @@ -245,14 +238,13 @@ CreditCardUi( - เฆงเฆจเงเฆฏเฆฌเฆพเฆฆ --- ## 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 @@ -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). -