Flutter信用卡标识检测插件credit_card_flag_detector的使用

Flutter信用卡标识检测插件credit_card_flag_detector的使用

credit_card_flag_detector | 信用卡标识检测插件

这是一个基于当前信用卡号模式来检测信用卡类型的Dart包。

该包受到Cholojuanito GitHub的启发。

example/example.gif

安装

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

dependencies:
    credit_card_flag_detector: <current_version>

请获取最新版本号，可以在pub.dartlang.org的Installing标签页中找到。

使用

首先，导入插件：

import 'package:credit_card_flag_detector/credit_card_flag_detector.dart';

接下来，您可以使用以下代码来检测信用卡类型：

String visaStr = '4647 7200 6779 1032';

var types = CreditCardFlagDetector.detectCCType(visaStr);

assert(types.contains(CreditCardFlag.visa.creditCardFlag));

您可以查看示例应用中的完整示例，或者在pub.dartlang.org的Example标签页中查看。

特性

  • 无外部依赖
  • 支持的卡类型：
    • 创建自己的卡类型！
    • 默认卡类型：
      • Visa
      • Mastercard
      • American Express
      • Discover
      • Diners Club
      • JCB
      • Union Pay
      • Maestro
      • Mir
      • Elo
      • Hiper/Hipercard

模式检测

每种卡类型都有一个相应的模式列表。请参阅cardNumPatterns映射。 每个模式是一个字符串数组，表示一个数字范围或单个数字。这些数字对应于信用卡公司的发行识别号码（IIN）。

有两种类型的模式：

  1. 单个数字模式。模式数字与信用卡号进行比较。对于比模式短的信用卡号的部分匹配也会被认为是匹配（这对于用户输入时UI实时更新非常有用）。 例如，给定模式'123'，则信用卡号'1'，'12'，'123'，'1234'都将匹配，但'2'，'13'，'124'将不会匹配。

  2. 数字范围。检查信用卡号是否在模式中的范围内。同样，部分匹配也是查找的。 例如，给定范围['100', '123']，则信用卡号'1'，'10'，'100'，'12'，'120'，'123'都将匹配，但'2'，'13'，'124'将不会匹配。

当调用detectCCType函数时，会循环遍历每种卡类型及其所有相应模式。传入的字符串中的空白字符将被忽略。

示例代码

示例应用代码

example/lib/main.dart

import 'package:flutter/material.dart';

import 'screen.dart';

void main() {
  runApp(const MainApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AddCreditCardScreen(),
    );
  }
}

更多关于Flutter信用卡标识检测插件credit_card_flag_detector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter信用卡标识检测插件credit_card_flag_detector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用credit_card_flag_detector插件的示例代码。这个插件可以帮助你检测信用卡号码并显示相应的卡片标识（如Visa、Mastercard等）。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加credit_card_flag_detector依赖：

dependencies:
  flutter:
    sdk: flutter
  credit_card_flag_detector: ^最新版本号  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你需要使用信用卡标识检测的Dart文件中导入插件：

import 'package:credit_card_flag_detector/credit_card_flag_detector.dart';

3. 使用插件

下面是一个简单的示例，展示如何使用CreditCardFlagDetector来检测信用卡号码并显示相应的卡片标识。

import 'package:flutter/material.dart';
import 'package:credit_card_flag_detector/credit_card_flag_detector.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CreditCardDetectorScreen(),
    );
  }
}

class CreditCardDetectorScreen extends StatefulWidget {
  @override
  _CreditCardDetectorScreenState createState() => _CreditCardDetectorScreenState();
}

class _CreditCardDetectorScreenState extends State<CreditCardDetectorScreen> {
  final TextEditingController _controller = TextEditingController();
  CreditCardFlag? _detectedFlag;

  void _detectCreditCardFlag() {
    String? cardNumber = _controller.text.replaceAll(RegExp(r'\s'), ''); // 移除空格
    if (cardNumber!.length >= 6) {
      _detectedFlag = detectCreditCardFlag(cardNumber);
      setState(() {});
    } else {
      _detectedFlag = null;
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Credit Card Flag Detector'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter Credit Card Number',
                suffixIcon: IconButton(
                  icon: Icon(Icons.check),
                  onPressed: _detectCreditCardFlag,
                ),
              ),
            ),
            SizedBox(height: 16),
            if (_detectedFlag != null)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/flags/${_detectedFlag!.flagAssetName}',
                      width: 48,
                      height: 48,
                    ),
                    SizedBox(width: 16),
                    Text(
                      _detectedFlag!.cardIssuerName!,
                      style: TextStyle(fontSize: 20),
                    ),
                  ],
                ),
              )
            else
              Text(
                'Please enter a valid credit card number.',
                style: TextStyle(color: Colors.grey),
              ),
          ],
        ),
      ),
    );
  }
}

4. 添加卡片标识图标

由于credit_card_flag_detector插件可能不包含实际的卡片标识图标，你需要在项目的assets文件夹中添加这些图标。假设你已经有了这些图标，并且它们的文件名与插件返回的flagAssetName相匹配（例如visa.png, mastercard.png等），你需要在pubspec.yaml中声明这些资源：

flutter:
  assets:
    - assets/flags/visa.png
    - assets/flags/mastercard.png
    # 添加其他图标...

5. 运行项目

现在你可以运行你的Flutter项目，输入信用卡号码，点击检查图标，应该能看到相应的卡片标识。

这个示例展示了基本的集成和使用方法，你可能需要根据实际需求进行调整和优化。

回到顶部