Flutter收据识别插件receipt_reader的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter 收据识别插件 receipt_reader 的使用

Receipt Reader 是一个为开发者设计的 Flutter 包,用于通过 Google ML Kit 的文本识别来读取和处理收据图像。该包从收据中提取相关数据,如商品、数量、价格和总额,并返回一个结构化的 Order 对象,以便于将其集成到您的应用中。

特性

  • 使用相机拍摄收据图像或从图库中选择。
  • 利用 Google ML Kit 的文本识别功能识别收据上的文字。
  • 提取结构化的订单信息,包括商品名称、数量、价格、类别和总额。
  • 轻松地将提取的订单数据集成到您的应用程序中。

安装

pubspec.yaml 文件中添加 receipt_reader

dependencies:
  receipt_reader: latest_version

然后运行:

flutter pub get

使用方法

要使用 ReceiptUploader 小部件,请导入它并处理收据上传和订单提取:

import 'package:flutter/material.dart';
import 'package:receipt_reader/models/order.dart';
import 'package:receipt_reader/receipt_reader.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Receipt Uploader',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ReceiptUploaderScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('上传收据'),
      ),
      body: ReceiptUploader(
        onAdd: (Order order) {
          // 处理已添加的订单
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('订单已添加: ${order.items.length} 项'),
            ),
          );
        },
        geminiApi: '************************************************', // 替换为您自己的 API URL
        listOfCategories: ["食品", "衣物"],
        actionButtonStyle: ElevatedButton.styleFrom(
          backgroundColor: Colors.blue, // 按钮颜色
          textStyle: const TextStyle(fontSize: 16),
        ),
        orderSummaryTextStyle: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
        extractedDataTextStyle:
            const TextStyle(fontSize: 14, color: Colors.grey),
        imagePreviewHeight: 250.0,
        padding: const EdgeInsets.all(20.0),
      ),
    );
  }
}

ReceiptUploader 小部件选项

  • <strong><code>onAdd</code></strong>:当处理收据时传递提取的 Order 对象的回调。
  • <strong><code>geminiApi</code></strong>:后端处理提取文本并返回结构化数据的 API 密钥或 URL。
  • <strong><code>actionButtonStyle</code></strong>(可选):自定义操作按钮(例如,上传或拍摄收据按钮)的样式。
  • <strong><code>orderSummaryTextStyle</code></strong>(可选):用于“提取的收据数据”等部分标题的样式。
  • <strong><code>extractedDataTextStyle</code></strong>(可选):用于商品名称和详情(例如,价格和数量)的样式。
  • <strong><code>imagePreviewHeight</code></strong>(可选):收据图像预览的高度。
  • <strong><code>imageBorderRadius</code></strong>(可选):收据图像预览的圆角半径。
  • <strong><code>padding</code></strong>(可选):整个小部件周围的内边距。
  • <strong><code>customProcessingIndicator</code></strong>(可选):显示图像正在处理时的自定义指示器。

订单对象结构

一旦处理完收据,提取的数据将以 Order 对象的形式返回,其结构如下:

  • <code>items</code>:一个包含 OrderItem 对象的列表,每个对象包含:
    • <code>name</code>:商品名称。
    • <code>quantity</code>:商品数量。
    • <code>price</code>:商品价格。
    • <code>category</code>:商品类别。
  • <code>subtotal</code>:所有商品的小计。
  • <code>tax</code>:计算出的税额。
  • <code>total</code>:含税后的总金额。

示例订单对象

Order(
  items: [
    OrderItem(name: '商品1', quantity: 2, price: 10.00, category: '食品'),
    OrderItem(name: '商品2', quantity: 1, price: 5.50, category: '衣物'),
  ],
  subtotal: 25.50,
  tax: 2.55,
  total: 28.05,
)

更多关于Flutter收据识别插件receipt_reader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter收据识别插件receipt_reader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中的receipt_reader插件的使用,这里是一个简单的示例代码,展示了如何在Flutter应用中集成和使用该插件进行收据识别。假设你已经在pubspec.yaml文件中添加了receipt_reader依赖,并且已经运行了flutter pub get

首先,确保你的pubspec.yaml文件包含以下依赖项:

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

然后,在你的Flutter项目中,你可以按照以下步骤使用receipt_reader插件:

  1. 导入插件

在你的Dart文件中导入receipt_reader插件:

import 'package:receipt_reader/receipt_reader.dart';
  1. 请求权限

在使用相机进行收据识别之前,你需要请求相机和存储权限。这通常在你的主页面或设置页面中完成。

import 'package:permission_handler/permission_handler.dart';

Future<void> requestPermissions() async {
  var status = await Permission.camera.status;
  if (!status.isGranted) {
    Map<Permission, PermissionStatus> statuses = await [
      Permission.camera,
      Permission.storage,
    ].request();
  }
}

注意:你可能需要添加permission_handler依赖来处理权限请求。

  1. 使用ReceiptReader进行收据识别

在你的页面中,你可以使用ReceiptReader类来启动相机并识别收据。以下是一个简单的示例:

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

class ReceiptScannerPage extends StatefulWidget {
  @override
  _ReceiptScannerPageState createState() => _ReceiptScannerPageState();
}

class _ReceiptScannerPageState extends State<ReceiptScannerPage> {
  ReceiptReaderController? _controller;
  ReceiptResult? _result;

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

  Future<void> _initReceiptReader() async {
    _controller = ReceiptReaderController();
    _controller!.onReceiptDetected = (ReceiptResult result) {
      setState(() {
        _result = result;
        // 在这里处理识别结果,比如显示到UI上或发送到服务器
        print('Receipt detected: ${result.toJson()}');
      });
      // 停止识别器,如果需要连续识别可以注释掉这一行
      _controller!.stop();
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Receipt Scanner'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 请求权限
            await requestPermissions();

            // 启动相机进行收据识别
            if (_controller!.isAvailable) {
              await _controller!.start();
            } else {
              // 处理相机不可用的情况
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Camera is not available')),
              );
            }
          },
          child: Text('Start Scanning'),
        ),
      ),
      // 显示识别结果(如果有)
      bottomSheet: _result != null
          ? Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Receipt Data:', style: TextStyle(fontSize: 18)),
                  SizedBox(height: 8),
                  Text(_result!.toJson().toString(), style: TextStyle(fontSize: 14)),
                ],
              ),
            )
          : Container(),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
}

在这个示例中,我们创建了一个ReceiptScannerPage页面,其中包含一个按钮来启动相机进行收据识别。当识别到收据时,_controller!.onReceiptDetected回调会被触发,我们可以在回调中处理识别结果,比如显示到UI上或发送到服务器。

请注意,这个示例代码只是一个基本的实现,实际应用中你可能需要处理更多的错误情况和边界情况,比如相机启动失败、权限被拒绝等。此外,receipt_reader插件的具体API可能会随着版本的更新而有所变化,请参考官方文档以获取最新的使用方法和API信息。

回到顶部