uCreditCard？
信用卡 UI 作为 Flutter 小部件？
“uCreditCard”是一个 Flutter 包，它提供了一个可定制的解决方案，用于在您的应用中显示信用卡的 UI。
资源？
入门：安装？
要开始使用 Credit Card UI，您必须在您的机器上安装 Flutter SDK。
将 u_credit_card 添加到您的 pubspec.yaml
dependencies:
u_credit_card: ^1.0.3
安装它
flutter packages get
用法
要使用 CreditCardUi，请导入该包
import 'package:u_credit_card/u_credit_card.dart';
使用必需的参数创建 CreditCardUi(...) 小部件
CreditCardUi(
cardHolderFullName: 'John Doe',
cardNumber: '1234567812345678',
validThru: '10/24',
),
这将创建一个带有持卡人姓名、卡号和有效期到期的信用卡用户界面。有关更高级的用法，请参阅以下参数
参数
| 名称 | 类型 | 描述 |
|---|---|---|
cardHolderFullName |
字符串 |
持卡人全名。这是一个必需的参数。 |
cardNumber |
字符串 |
完整的信用卡号。这是一个必需的参数。 |
validThru |
字符串 |
卡片的有效期。格式必须为“月/年”。这是一个必需的参数。 |
validFrom |
字符串 |
卡片的有效起始日期。格式必须为“月/年”。此参数是可选的。 |
topLeftColor |
颜色 |
卡的左上渐变色。默认值为 Colors.purple。 |
bottomRightColor |
颜色 |
卡的右下渐变色。如果未指定，将使用 topLeftColor 的较暗版本。 |
doesSupportNfc |
布尔值 |
一个布尔值，用于指示卡片是否支持 NFC 功能。默认值为 true。 |
placeNfcIconAtTheEnd |
布尔值 |
一个布尔值，用于将 NFC 图标放置在芯片的对面。默认值为 false。 |
cardType |
CardType |
指定要显示的卡片类型。默认值为 CardType.credit。如果您更喜欢不指定卡片类型，可以将其设置为 CardType.other。此项是可选的。 |
cardProviderLogo |
Widget |
为卡片提供商的徽标提供一个小部件。如果未设置此参数，卡片将显示而没有徽标。此项是可选的。 |
cardProviderLogoPosition |
CardProviderLogoPosition |
设置卡片提供商徽标在卡片上的位置。默认值为 CardProviderLogoPosition.right。您可以将其设置为 CardProviderLogoPosition.left 或 CardProviderLogoPosition.right。此项是可选的。 |
backgroundDecorationImage |
DecorationImage |
为卡片设置背景图片。此参数支持资源和网络图片。如果未设置此参数，卡片将显示而没有背景图片。此项是可选的。 |
示例
CreditCardUi(
cardHolderFullName: 'John Doe',
cardNumber: '1234567812345678',
validFrom: '01/23',
validThru: '01/28',
topLeftColor: Colors.blue,
),
准备好用几行代码创建时尚精美的信用卡界面吧！使用此包，您可以轻松自定义持卡人姓名、卡号、有效期和渐变色，使其独一无二。
默认情况下，卡片将具有时尚的蓝色渐变和 NFC 图标。但请放心，如果您不想要 NFC 图标，只需传递 doesSupportNfc: false 即可。
想切换一下，将 NFC 图标放在芯片的另一侧吗？没问题！只需通过传递 placeNfcIconAtTheEnd: true 来启用它，但请记住也要传递 doesSupportNfc: true。
让我们让您的应用看起来像那张闪亮的新信用卡一样时尚！
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,
),
自定义渐变
CreditCardUi(
cardHolderFullName: 'John Doe',
cardNumber: '1234567812345678',
validThru: '10/24',
topLeftColor: Colors.red,
bottomRightColor: Colors.purpleAccent,
),
这将创建一个带有红到紫渐变的信用卡用户界面。
缩放
如果要缩放卡片，请使用 scale: 属性。
如果设置为小于 1，卡片尺寸将减小；如果设置为大于 1，卡片尺寸将增大。
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,
),
其他自定义
要进一步自定义卡片，您可以使用 backgroundDecorationImage 属性添加背景图片。此外，您可以使用 cardProviderLogo 属性包含卡片提供商的徽标。可以使用 cardProviderLogoPosition 属性将此徽标放置在卡片的左侧或右侧。
如果您想指定要显示的特定卡片类型，可以使用 cardType 属性进行设置。如果您倾向于不指定卡片类型，可以将 cardType: CardType.other 设置为。
以下是如何使用这些自定义选项的示例
示例
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://....',
),
),
),
谢谢
灵感
市面上已经有很多信用卡包了，但没有一个看起来逼真。所以，我决定创造一些看起来和我们现实生活中的卡片一样的东西。此外，这个项目受到一个 原生 Android 库 的启发。
贡献者
Utpal Barman ??
许可证
此包根据 BSD 3-Clause License 发布。
