Flutter收据识别插件receipt_reader的使用
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
更多关于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
插件:
- 导入插件
在你的Dart文件中导入receipt_reader
插件:
import 'package:receipt_reader/receipt_reader.dart';
- 请求权限
在使用相机进行收据识别之前,你需要请求相机和存储权限。这通常在你的主页面或设置页面中完成。
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
依赖来处理权限请求。
- 使用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信息。