Flutter 信用卡

一个 Flutter 包，允许您通过信用卡检测轻松实现信用卡 UI

Codacy Badge

预览

preview

安装

  1. 将依赖项添加到 pubspec.yaml

    在 pub.dartlang.org 的“安装”选项卡中获取最新版本

dependencies:
    flutter_credit_card: <latest_version>
  1. 导入包
import 'package:flutter_credit_card/flutter_credit_card.dart';
  1. 添加 CreditCardWidget

使用必需参数

    CreditCardWidget(
        cardNumber: cardNumber,
        expiryDate: expiryDate, 
        cardHolderName: cardHolderName,
        cvvCode: cvvCode,
        showBackView: isCvvFocused, //true when you want to show cvv(back) view
    ),

使用可选参数

    CreditCardWidget(
        cardNumber: cardNumber,
        expiryDate: expiryDate,
        cardHolderName: cardHolderName,
        cvvCode: cvvCode,
        showBackView: isCvvFocused,
        cardbgColor: Colors.black,
        glassmorphismConfig: Glassmorphism.defaultConfig(),
        backgroundImage: 'assets/card_bg.png',
        obscureCardNumber: true,
        obscureCardCvv: true,
        isHolderNameVisible: false,
        height: 175,
        textStyle: TextStyle(color: Colors.yellowAccent),
        width: MediaQuery.of(context).size.width,
        isChipVisible: true,
        isSwipeGestureEnabled: true,
        animationDuration: Duration(milliseconds: 1000),
    ),

玻璃拟态 UI

  • 默认配置
    CreditCardWidget(
        glassmorphismConfig: Glassmorphism.defaultConfig(),
    ),
  • 自定义配置
    CreditCardWidget(
        glassmorphismConfig: Glassmorphism(
          blurX: 10.0,
          blurY: 10.0,
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[
              Colors.grey.withAlpha(20),
              Colors.white.withAlpha(20),
            ],
            stops: const <double>[
              0.3,
              0,
            ],
          ),
        ),
    ),
  1. 添加 CreditCardForm
    CreditCardForm(
      formKey: formKey, // Required 
      onCreditCardModelChange: (CreditCardModel data) {}, // Required
      themeColor: Colors.red,
      obscureCvv: true, 
      obscureNumber: true,
      isHolderNameVisible: false,
      isCardNumberVisible: false,
      isExpiryDateVisible: false,
      cardNumberDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Number',
        hintText: 'XXXX XXXX XXXX XXXX',
      ),
      expiryDateDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Expired Date',
        hintText: 'XX/XX',
      ),
      cvvCodeDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'CVV',
        hintText: 'XXX',
      ),
      cardHolderDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Card Holder',
      ),
    ),

如何使用

请查看 pub.dartlang.org 上“示例”选项卡中的 示例 应用，或其中的 ‘Example’ 目录以获取更完整的示例。

鸣谢

此软件包的动画灵感来自此 Dribbble 艺术。

许可证

BSD 2 条款许可

版权所有 (c) 2019, Simform Solutions
保留所有权利。

GitHub

https://github.com/SimformSolutionsPvtLtd/flutter_credit_card