Flutter卡片扫描插件flutter_card_scanner_latest的使用

Card Scanner Plugin

这是一个用于iOS设备的Flutter插件，可以通过摄像头扫描信用卡。如果设备不支持摄像头，则会显示一个手动输入屏幕，用户可以在该屏幕上输入卡的详细信息。

该插件使用静态CardIO库，并且是用iOS原生语言Swift编写的。它适用于最新版本的Flutter、Dart和Swift。

此插件仅支持以下类型的信用卡：AMEX、JCB、VISA、MASTER CARD和DISCOVER。

注意：此插件的Android版本仍在开发中，某些API可能尚未可用。

欢迎反馈和提交Pull Request！

安装

1. 首先，在pubspec.yaml文件中添加flutter_card_scanner_latest作为依赖项。

2. 在Info.plist文件中添加以下键：

   <key>NSCameraUsageDescription</key>
   <string>Camera in Use</string>
   

使用

以下是如何调用插件的方法来开始扫描信用卡的示例。

Map<String, dynamic> details = await FlutterCardScannerLatest.scanCard();

响应示例

{
  "result": "success",
  "body": "{\"Cardholders Name\":\"test\",\"expiry\":\"01/21\"}",
  "responseText": "Card has been scanned successfully"
}

示例代码

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

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:flutter_card_scanner_latest/flutter_card_scanner_latest.dart';

// 定义一个常量类
class Constant {
  static const String success = "success";
}

// 定义一个响应类
class CardScanResponse {
  final String result;
  final String responseText;
  final Map<String, String> body;

  CardScanResponse({required this.result, required this.responseText, required this.body});

  factory CardScanResponse.fromJSON(Map<String, dynamic> json) {
    return CardScanResponse(
      result: json['result'],
      responseText: json['responseText'],
      body: Map<String, String>.from(json['body']),
    );
  }
}

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

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

class _MyAppState extends State<MyApp> {
  String cardScanResponse = '';

  @override
  void initState() {
    super.initState();
  }

  // 平台消息是异步的，因此我们在一个异步方法中初始化
  Future<void> initCardScan() async {
    String scanResponse = '';
    // 平台消息可能会失败，所以我们使用try/catch来捕获PlatformException
    try {
      String response = await FlutterCardScannerLatest.scanCard;
      // 解析响应
      final CardScanResponse cardScanResponse = CardScanResponse.fromJSON(json.decode(response));
      // 读取响应并在屏幕上显示
      if (cardScanResponse.result == Constant.success) {
        scanResponse = cardScanResponse.responseText +
            '\n' +
            'Cardholder\'s Name : ' +
            cardScanResponse.body['Cardholders Name']! + '\n' +
            'Expiry : ' +
            cardScanResponse.body['expiry']!;
      } else {
        scanResponse = cardScanResponse.responseText;
      }
    } on PlatformException catch (e) {
      scanResponse = "Failed to scan the card ::: '${e.message}'.";
    }

    setState(() {
      cardScanResponse = scanResponse;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Card Scanner"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  style: TextStyle(
                    fontSize: 20.0,
                    fontStyle: FontStyle.normal,
                    color: Colors.black,
                  ),
                  children: [
                    TextSpan(
                        text: cardScanResponse,
                        style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton(
          onPressed: initCardScan,
          tooltip: 'Scan Card',
          elevation: 50.0,
          child: Icon(Icons.scanner),
        ),
      ),
    );
  }
}

说明

1. 依赖项：在pubspec.yaml文件中添加flutter_card_scanner_latest依赖项。
2. 权限：在Info.plist文件中添加相机使用权限。
3. 调用扫描方法：使用FlutterCardScannerLatest.scanCard方法启动扫描。
4. 解析响应：解析返回的JSON响应并显示在界面上。
5. UI设计：使用FloatingActionButton触发扫描，并在屏幕上显示扫描结果。

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