Flutter卡片扫描插件easy_card_scanner的使用

Flutter卡片扫描插件easy_card_scanner的使用

image

Easy Card Scanner，您可以轻松地离线扫描信用卡/借记卡。Google ML用于实现这一功能。

功能

  • 离线且快速
  • 使用原生屏幕扫描卡片

修复

  • 解决了Android设备上按下返回按钮时应用崩溃的问题
  • 解决了iOS设备上的应用崩溃问题

示例

查看示例

安装

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

dependencies:
  easy_card_scanner: <latest-version>

使用方法

如何使用它
import 'package:easy_card_scanner/credit_card_scanner.dart';

// 扫描卡片并获取详细信息
var cardDetails = await CardScanner.scanCard();
print(cardDetails);

iOS 需求

  • iOS目标版本应大于等于12.0.0
  • 在您的Flutter项目的Podfile中取消注释use_frameworks!行。 您可以在your_flutter_project/ios/Podfile中找到该文件。

原版由nateshmbhat构建

感谢[nateshmbhat]的贡献

示例代码

import 'package:flutter/material.dart';
import 'package:easy_card_scanner/credit_card_scanner.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.camera_alt), // 相机图标
          onPressed: () async {
            // 调用扫描卡片的方法
            var cardDetails = await CardScanner.scanCard();
            print(cardDetails); // 打印扫描结果
          },
        ),
        appBar: AppBar(
          title: const Text('Easy Card Scanner'), // 应用标题
        ),
      ),
    );
  }
}

更多关于Flutter卡片扫描插件easy_card_scanner的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter卡片扫描插件easy_card_scanner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用easy_card_scanner插件进行卡片扫描的示例代码。这个插件可以帮助你轻松实现卡片（如名片、银行卡等）的扫描和识别功能。

首先，你需要在pubspec.yaml文件中添加easy_card_scanner依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_card_scanner: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤实现卡片扫描功能：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:easy_card_scanner/easy_card_scanner.dart';
  1. 创建卡片扫描页面：
class CardScanPage extends StatefulWidget {
  @override
  _CardScanPageState createState() => _CardScanPageState();
}

class _CardScanPageState extends State<CardScanPage> {
  late CardScannerController _cardScannerController;
  late CardScannerResult? _scanResult;

  @override
  void initState() {
    super.initState();
    _cardScannerController = CardScannerController();
    _cardScannerController.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Card Scanner Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: CardScanner(
                controller: _cardScannerController,
                onCardScanned: (result) {
                  setState(() {
                    _scanResult = result;
                  });
                  // 可以在这里处理扫描结果，例如保存到数据库或显示到屏幕上
                  print('Card Scanned: ${result.toJson()}');
                },
                onError: (error) {
                  print('Error: $error');
                },
              ),
            ),
            if (_scanResult != null)
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    children: [
                      Text('Scan Result:'),
                      Text(_scanResult!.toJson().toString()),
                    ],
                  ),
                ),
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 重新扫描
          _cardScannerController.reset();
          setState(() {
            _scanResult = null;
          });
        },
        tooltip: 'Rescan',
        child: Icon(Icons.refresh),
      ),
    );
  }

  @override
  void dispose() {
    _cardScannerController.dispose();
    super.dispose();
  }
}
  1. 在你的应用主程序中引入卡片扫描页面：
import 'package:flutter/material.dart';
import 'card_scan_page.dart';  // 假设你的卡片扫描页面命名为card_scan_page.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Card Scanner Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CardScanPage(),
    );
  }
}

上述代码展示了如何在Flutter中使用easy_card_scanner插件来扫描卡片。你需要确保你的设备有摄像头权限，并且插件已经正确配置。你可以根据实际需求对扫描结果进行进一步的处理，例如解析特定字段、保存到服务器等。

回到顶部