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

CameraScannerWidget

描述：

介绍了一个前沿的Flutter包，该包利用设备的相机无缝扫描并提取信用卡信息。此创新解决方案利用了最先进的机器学习技术：对于Android设备使用Google ML Kit，对于iOS设备使用Apple Vision，以确保跨平台的最佳性能。

CameraScannerWidget (
    onScan: (ctx, value) {},
    loadingHolder: CircularProgressIndicator(),
    onNoCamera: () {
        // Handle camera unavailability
    }
)

演示：

见证其魔力在行动中！

主要特点：

• 📱 跨平台兼容性（iOS & Android）
• 🚀 极速信用卡识别
• 🔒 安全的本地处理
• 🎨 可定制的UI元素

输入参数：

• onScan (required): 提取卡数据的入口！当成功扫描到卡时，此回调函数接收BuildContext和包含详细信息（卡号、持卡人姓名、过期月份、过期年份）的CreditCardModel对象。
• loadingHolder (required): 在相机初始化期间显示的Widget，用于保持用户参与。
• onNoCamera (required): 相机不可用时优雅处理的回调函数。
• aspectRatio (optional): 设置相机视图的纵横比，默认为设备屏幕比例。
• cardNumber (optional): 切换卡号扫描，默认开启。
• cardHolder (optional): 启用/禁用持卡人姓名提取，默认开启。
• cardExpiryDate (optional): 控制过期日期扫描，默认开启。
• useLuhnValidation (optional): 启用/禁用Luhn验证，默认开启。
• durationOfNextFrame (optional): 设置下一帧的持续时间，默认为null，表示相机将以最快速度扫描。
• resolutionPreset (optional): 设置相机分辨率，默认为ResolutionPreset.high。

平台特定配置：

Android配置：

1. 确保您的应用程序集成了Firebase和Google ML Kit（仅限Android）。
2. 更新android/app/build.gradle：

   android {
       defaultConfig {
           minSdkVersion 21
           // ... 其他配置
       }
   }
   

3. 修改android/app/src/main/AndroidManifest.xml以授予相机访问权限：

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.example.your_app_name">
       
       <uses-permission android:name="android.permission.CAMERA" />
       
   </manifest>
   

iOS配置：

1. 更新ios/Runner/Info.plist以告知用户：

   <key>NSCameraUsageDescription</key>
   <string>此应用程序需要相机访问权限以扫描信用卡。</string>
   

2. 修改ios/Podfile设置最低部署目标：

   platform :ios, '15.5' // 最低部署目标
   

   不要忘记在ios目录下运行pod install！

示例用法：

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

class MyAppCreditCardScanner extends StatefulWidget {
  const MyAppCreditCardScanner({super.key});

  @override
  State<MyAppCreditCardScanner> createState() => _MyAppCreditCardScannerState();
}

class _MyAppCreditCardScannerState extends State<MyAppCreditCardScanner> {
  CreditCardModel? cardModel;
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CameraScannerWidget(
          onNoCamera: () {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                content: Text('未找到相机，请启用相机')));
          },
          onScan: (_, p1) {
            setState(() {
              cardModel = p1;
            });
          },
          loadingHolder: const Center(
            child: CircularProgressIndicator(),
          ),
        ),
        if (cardModel != null)
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10)),
              padding: MediaQuery.of(context)
                  .padding
                  .add(const EdgeInsets.symmetric(horizontal: 10, vertical: 5)),
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 400),
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    key: ValueKey(cardModel),
                    children: [
                      Text(cardModel!.number),
                      Text(cardModel!.holderName),
                      Text(cardModel!.expiryDate),
                    ]
                        .map((e) => Padding(
                            padding: const EdgeInsets.all(5),
                            child: Card(
                                child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: e,
                            ))))
                        .toList()),
              ),
            ),
          )
      ],
    );
  }
}

结论：

通过无缝的信用卡扫描功能提升您的应用程序用户体验！🚀💳✨