Flutter信用卡输入表单插件credit_card_input_form的使用

本包通过信用卡信息输入表单的动画提供了视觉上优美的用户体验。

预览

安装

1. 添加依赖到 pubspec.yaml

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, // 可选参数
),

如何使用

查看 example 应用程序以获取更完整的示例。该示例可以在 example 目录或 Example 选项卡上找到。

新特性

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(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’, initialCardState: InputState.DONE, ),

### v2.2.0

添加了 `initialAutoFocus` 参数

## 第三方库

### 翻转卡

[https://pub.dev/packages/flip_card](https://pub.dev/packages/flip_card)

用于使用卡翻转动画

### 提供者

[https://pub.dev/packages/provider](https://pub.dev/packages/provider)

用于使用状态管理

## 参考

该包的动画灵感来自 [Dribbble](https://dribbble.com/shots/6440077-Add-a-New-Credit-Card-alternate-flow) 上的艺术作品。

## 待办事项列表

- ✅ 添加 `RESET` 按钮
- ✅ 添加 `BoxDecoration` 参数

---

## 示例代码

```dart
import 'package:credit_card_input_form/constants/constanst.dart';
import 'package:flutter/material.dart';

import 'package:credit_card_input_form/credit_card_input_form.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 翻译并自定义标题
  final Map<String, String> customCaptions = {
    'PREV': 'Prev',
    'NEXT': 'Next',
    'DONE': 'Done',
    'CARD_NUMBER': 'Card Number',
    'CARDHOLDER_NAME': 'Cardholder Name',
    'VALID_THRU': 'Valid Thru',
    'SECURITY_CODE_CVC': 'Security Code (CVC)',
    'NAME_SURNAME': 'Name Surname',
    'MM_YY': 'MM/YY',
    'RESET': 'Reset',
  };

  final buttonStyle = 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 cardDecoration = BoxDecoration(
      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)));

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

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            child: Stack(children: [
              CreditCardInputForm(
                showResetButton: true,
                onStateChange: (currentState, cardInfo) {
                  print(currentState);
                  print(cardInfo);
                },
                // initialAutoFocus: false,
                // customCaptions: customCaptions,
                // cardCVV: '222',
                // cardName: 'Jeongtae Kim',
                // cardNumber: '1111111111111111',
                // cardValid: '12/12',
                // initialCardState: InputState.DONE,
                // frontCardDecoration: cardDecoration,
                // backCardDecoration: cardDecoration,
                // prevButtonStyle: buttonStyle,
                // nextButtonStyle: buttonStyle,
                // prevButtonTextStyle: buttonTextStyle,
                // nextButtonTextStyle: buttonTextStyle,
                // resetButtonTextStyle: buttonTextStyle,
              ),
            ]),
          ),
        ),
      ),
    );
  }
}