Flutter 信用卡输入表单

Flutter-Credit-Card-Input-Form

该软件包通过信用卡信息输入表单的动画提供视觉上美观的用户体验。

安装

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

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

dependencies:
    credit_card_input_form: ^2.3.0

2. 导入包

import 'package:credit_card_input_form/credit_card_input_form.dart';

3. 添加 CreditCardInputForm

使用可选参数

 CreditCardInputForm(
   cardHeight: 170,
   showResetButton : true,
   onStateChange: (currentState, cardInfo) {
     print(currentState);
     print(cardInfo);
   },
   customCaptions: {...}, 
   frontCardDecoration: cardDecoration,
   backCardDecoration: cardDecoration,
   prevButtonDecoration: buttonStyle,
   nextButtonDecoration: buttonStyle,
   resetButtonDecoration : buttonStyle,
   prevButtonTextStyle: buttonTextStyle,
   nextButtonTextStyle: buttonTextStyle,
   resetButtonTextStyle: buttonTextStyle,
   initialAutoFocus: true, // optional

),

如何使用

查看 example 目录中的 **示例** 应用，或在 pub.dartlang.org 上查看“示例”选项卡，以获取更完整的示例。

新功能

v1.3.0

添加了自定义按钮样式功能

默认值	自定义

final buttonDecoration = BoxDecoration(
    borderRadius: BorderRadius.circular(30.0),
    gradient: LinearGradient(
        colors: [
          const Color(0xfffcdf8a),
          const Color(0xfff38381),
        ],
        begin: const FractionalOffset(0.0, 0.0),
        end: const FractionalOffset(1.0, 0.0),
        stops: [0.0, 1.0],
        tileMode: TileMode.clamp),
  );

  final buttonTextStyle =
      TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18);

  CreditCardInputForm(
    prevButtonDecoration: buttonDecoration,
    nextButtonDecoration: buttonDecoration,
    prevButtonTextStyle: buttonTextStyle,
    nextButtonTextStyle: buttonTextStyle,
    resetButtonTextStyle: buttonTextStyle,
  ),

v2.0.0

它提供了更多选项，使用boxdecoration可以仅更改卡片的颜色。

默认值	自定义

  final cardDecoration = BoxDecoration(
    boxShadow: <BoxShadow>[
      BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))
    ],
    gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.blue,
        ],
        begin: const FractionalOffset(0.0, 0.0),
        end: const FractionalOffset(1.0, 0.0),
        stops: [0.0, 1.0],
        tileMode: TileMode.clamp),
    borderRadius: BorderRadius.all(Radius.circular(15)));


    CreditCardInputForm(
      frontCardDecoration: cardDecoration,
      backCardDecoration: cardDecoration,
    ),
  ]),

v2.1.0

实现了一个新功能，用于在创建小部件时添加初始值

CreditCardInputForm(
  ....
  cardCVV: '222',
  cardName: 'Jeongtae Kim',
  cardNumber: '1111111111111111',
  cardValid: '12/12',
  intialCardState: InputState.DONE,
),

GitHub

https://github.com/Origogi/Flutter-Credit-Card-Input-Form