Flutter信用卡扫描插件 credit_card_scanner 的使用

简介

credit_card_scanner 是一个用于准确快速扫描借记卡和信用卡的 Flutter 插件。以下是该插件的一些主要特点：

• 完全离线扫描：确保数据安全，不依赖网络。
• 全面扫描：可以扫描卡号、过期日期、持卡人姓名和发卡机构。
• 高性能和高准确性：基于 Google 的机器学习模型。
• 自动校验：使用卡校验算法自动检查卡号错误。
• 参数控制：支持调整速度和准确性的平衡。
• 简单强大的 API：易于使用且功能强大。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  credit_card_scanner: ^<latest-version>

获取最新版本号 点击这里。

使用

基本用法

导入插件并调用 scanCard 方法：

import 'package:credit_card_scanner/credit_card_scanner.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CardDetails? _cardDetails;

  Future<void> scanCard() async {
    final CardDetails? cardDetails = await CardScanner.scanCard();
    if (!mounted || cardDetails == null) return;
    setState(() {
      _cardDetails = cardDetails;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('credit_card_scanner app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  scanCard();
                },
                child: Text('Scan Card'),
              ),
              Text(_cardDetails?.toString() ?? 'No card scanned yet'),
            ],
          ),
        ),
      ),
    );
  }
}

扫描选项

如果你需要获取持卡人姓名和发卡机构，可以指定扫描选项：

import 'package:credit_card_scanner/credit_card_scanner.dart';

Future<void> scanCardWithOptions() async {
  final CardDetails? cardDetails = await CardScanner.scanCard(
    scanOptions: CardScanOptions(
      scanCardHolderName: true,
      scanCardIssuer: true,
    ),
  );
  if (!mounted || cardDetails == null) return;
  setState(() {
    _cardDetails = cardDetails;
  });
}

示例输出

Card Number = 5173949117389006
Expiry Date = 11/26
Card Issuer = mastercard
Card Holder Name = PAUL SAMUELSON

iOS 要求

• 最低目标版本应为 12.0.0 及以上。
• 注释掉 Podfile 中的 use_frameworks! 行。你可以在 your_flutter_project/ios/Podfile 中找到这个文件。

文档和示例

更多文档和示例请参阅 官方文档。

完整示例

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

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:credit_card_scanner/credit_card_scanner.dart';
import 'scan_option_configure_widget/scan_option_configure_widget.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CardDetails? _cardDetails;
  CardScanOptions scanOptions = const CardScanOptions(
    scanCardHolderName: true,
    validCardsToScanBeforeFinishingScan: 5,
    possibleCardHolderNamePositions: [
      CardHolderNameScanPosition.aboveCardNumber,
    ],
  );

  Future<void> scanCard() async {
    final CardDetails? cardDetails = await CardScanner.scanCard(scanOptions: scanOptions);
    if (!mounted || cardDetails == null) return;
    setState(() {
      _cardDetails = cardDetails;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('credit_card_scanner app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () async {
                  scanCard();
                },
                child: const Text('Scan Card'),
              ),
              Text(_cardDetails?.toString() ?? 'No card scanned yet'),
              Expanded(
                child: OptionConfigureWidget(
                  initialOptions: scanOptions,
                  onScanOptionChanged: (newOptions) => scanOptions = newOptions,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

希望这个示例对你有帮助！如果有任何问题或需要进一步的帮助，请随时提问。