Flutter信用卡识别插件flutter_credit_card_detector的使用

Flutter信用卡识别插件flutter_credit_card_detector的使用

简介

flutter_credit_card_detector 是一个Flutter插件，允许你轻松实现信用卡用户界面并检测信用卡信息。该插件支持多种信用卡品牌，并提供了丰富的自定义选项。

预览

截图

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_credit_card_detector 依赖：

dependencies:
    flutter_credit_card_detector: 2.3.0

2. 导入包

在 Dart 文件中导入 flutter_credit_card_detector 包：

import 'package:flutter_credit_card_detector/flutter_credit_card_detector.dart';

3. 添加 CreditCardWidget

基本用法（必需参数）

[@override](/user/override)
Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      Provider<Controller>(
        create: (_) => Controller(),
        dispose: (_, controler) => controler.dispose(),
      )
    ],
    child: Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
        backgroundColor: Colors.orange[300],
      ),
      body: CreditCardWidget(onTap: _onTap),
    ),
  );
}

_onTap() async {
  print('Numero do cartão: $creditCardNumber'); // 卡号
  print('Nome no cartão: $creditCardName'); // 卡片上的名字
  print('Valido até: $creditCardExpData'); // 有效期
  print('CVV: $creditCardCVV'); // 安全码
  print('Bandeira: $creditCardBand'); // 卡片品牌
  print('CPF: $creditCardCPF'); // 持卡人CPF
}

高级用法（可选参数）

CreditCardWidget(
  labelTextNum: 'Numero do cartão', // 卡号输入框提示文本
  labelTextName: 'Nome no cartão', // 名字输入框提示文本
  labelTextExpData: 'MM/YY', // 有效期输入框提示文本
  labelTextCVV: 'CVV/CVC', // 安全码输入框提示文本
  labelTextCPF: 'CPF do Titular', // CPF输入框提示文本
  labelTextButton: 'Efetuar pagamento', // 按钮文本
  titleCreditCard: 'Cartão de Crédito', // 卡片标题
  labelTextValidate: 'Valido Até', // 有效期提示文本
  textRequired: 'Campo é obrigatorio', // 必填字段错误提示
  textSelectBand: 'Selecione a bandeira', // 未识别品牌错误提示
  textNameMin: 'O nome de conter pelo menos 6 caracteres', // 名字长度不足错误提示
  textIntroNameValid: 'Insira um nome válido', // 无效名字错误提示
  textCardExpired: 'Cartão vencido', // 过期卡片错误提示
  textInvalidateMonth: 'Mês incorreto.', // 无效月份错误提示
  colorButton: const Color(0xFFfec177), // 按钮颜色
  colorTextButton: Colors.white, // 按钮文字颜色
  colorTextField: Colors.grey, // 输入框文字颜色
  colorCardSelect: const Color(0xFFfec177), // 选中卡片颜色
  colorCreditWhite: const Color(0xff535252), // 白色卡片背景颜色
  colorCreditBlack: const Color(0xff211e1e), // 黑色卡片背景颜色
  textSizeNumber: 0.06, // 卡号字体大小
  textSizeName: 0.04, // 名字字体大小
  textSizeMonth: 0.03, // 有效期字体大小
  textSizeCVC: 0.03, // 安全码字体大小
  viewLayout: false, // 垂直布局 = false, 水平布局 = true
  cpfVisibility: true, // 显示CPF输入框 = true, 隐藏 = false
  listBand: ['visa', 'mastercard'], // 支持的卡片品牌列表
  onTap: _onTap, // 点击事件回调
),

支持的卡片品牌

• Visa
• Mastercard
• American Express
• Aura
• DinersClub
• Discover
• Elo
• Hiper
• Hipercard
• JCB
• Rupay

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_credit_card_detector 插件：

import 'package:flutter/material.dart';
import 'package:flutter_credit_card_detector/flutter_credit_card_detector.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ControllerBase()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.blue),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
          backgroundColor: Colors.orange[300],
        ),
        body: CreditCardWidget(listBand: listBand, onTap: _onTap),
      ),
      debugShowCheckedModeBanner: false,
    );
  }

  // 支持的卡片品牌列表
  List<String> listBand = [
    'visa',
    'mastercard',
    'amex',
    'elo',
    'dinersclub',
    'discover',
    'jcb',
    'aura',
    'hiper',
    'hipercard',
    'rupay'
  ];

  _onTap() async {
    print('Numero do cartão: $creditCardNumber'); // 卡号
    print('Nome no cartão: $creditCardName'); // 卡片上的名字
    print('Valido até: $creditCardExpData'); // 有效期
    print('CVV: $creditCardCVV'); // 安全码
    print('Bandeira: $creditCardBand'); // 卡片品牌
    print('CPF: $creditCardCPF'); // 持卡人CPF
  }
}