通过 Flutter 信用卡信息输入表单的动画，实现精美的 UX

Flutter信用卡输入表单

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

安装

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

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

dependencies:
    credit_card_input_form: ^1.3.1

2. 导入包

import 'package:credit_card_input_form/credit_card_input_form.dart';

3. 添加 CreditCardInputForm

使用可选参数

 CreditCardInputForm(
   cardHeight: 170,
   frontCardColor: Colors.red,
   backCardColor: Colors.blueAccent,
   showResetButton : true,
   onStateChange: (currentState, cardInfo) {
     print(currentState);
     print(cardInfo);
   },
   customCaptions: {...},  // translate and customize captions (see Example)
),

如何使用

请查看 pub.dartlang.org 上的示例应用（位于 example 目录）或“示例”选项卡，以获取更完整的示例。

新功能

v1.3.0

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

默认值	自定义

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 buttonTextStyle =
      TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18);

  CreditCardInputForm(
    showResetButton: true,
    onStateChange: (currentState, cardInfo) {
      print(currentState);
      print(cardInfo);
    },
    customCaptions: customCaptions,
    prevButtonStyle: buttonStyle,
    nextButtonStyle: buttonStyle,
    prevButtonTextStyle: buttonTextStyle,
    nextButtonTextStyle: buttonTextStyle,
    resetButtonTextStyle: buttonTextStyle,
  ),

第三方库

翻转卡片

https://pub.dev/packages/flip_card

用于卡片翻转动画

Provider

https://pub.dev/packages/provider

用于状态管理

参考

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

待办事项列表

• [x] 添加 RESET 按钮

GitHub

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