Flutter桌面扫描插件flutter_desktop_scanner的使用
Flutter桌面扫描插件flutter_desktop_scanner的使用
flutter_desktop_scanner
在桌面上使用物理扫描仪变得轻而易举!
开始使用
由于此插件依赖于一些系统库(SANE、WIA),你必须在你的flutter项目中设置它们。
Linux
在./linux/CMakeLists.txt
文件中,在以下代码下添加:
apply_standard_settings(${BINARY_NAME})
添加:
set(LINKER_FLAGS "-lsane")
set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} ${LINKER_FLAGS}")
Windows
无需操作!WIA通常作为头文件可用。
MacOS
无需操作!MacOS 使用 ImagCaptureCore 框架,自10.14版本起应该可用。
使用插件
因为设备扫描过程以及实际扫描过程需要一些时间,所以该插件基于 EventChannels
。EventChannels
类似于 MethodChannels
,但用于流,这允许通过流从原生平台获取数据。因此,你总是需要先获取流引用才能启动任何操作。
获取设备
final _flutterDesktopScannerPlugin = FlutterDesktopScannerPlugin();
...
// 始终先获取流
final scannerStream = _flutterDesktopScannerPlugin.getDevicesStream();
scannerStream.listen((scanners) {
setState(() {
_scanners = scanners;
_loading = false;
});
});
// 然后调用初始化方法
await _flutterDesktopScannerPlugin.initGetDevices();
启动扫描
final _flutterDesktopScannerPlugin = FlutterDesktopScannerPlugin();
...
// 再次获取流,流返回一个可以编码为任何图像格式(如JPG、PNG)的Image类
final stream = _flutterDesktopScannerPlugin.imageReprStream();
stream.listen((image) {
setState(() {
if (image != null) {
_imgBytes = img.encodePng(image);
}
_imgLoading = false;
});
});
// 然后初始化扫描
await _flutterDesktopScannerPlugin.initScan(scanner);
扫描表示
imageReprStream
此流返回一个 Image
类,可以编码为任何图像格式(如 JPG、PNG 等)。完整的列表可以在这里查看:Image Formats
rawBytesStream
此流返回一个包含原始图像字节的 Uint8List
。格式在每个平台上不同:
- 对于 Linux,它是 PNM。
- 对于 Windows,它很可能是 BMP 或 TIFF。
- 对于 MacOS,它是 PNG。
示例代码
以下是完整的示例代码:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_desktop_scanner/flutter_desktop_scanner.dart';
import 'package:image/image.dart' as img;
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
final _flutterDesktopScannerPlugin = FlutterDesktopScanner();
List<Scanner> _scanners = [];
bool _loading = false;
bool _imgLoading = false;
Uint8List? _imgBytes;
[@override](/user/override)
void initState() {
super.initState();
initPlatformState();
}
// 平台消息是异步的,所以我们在一个异步方法中初始化。
Future<void> initPlatformState() async {
String platformVersion;
// 平台消息可能失败,所以我们使用try/catch来捕获PlatformException。
// 我们也处理消息可能返回null的情况。
try {
platformVersion =
await _flutterDesktopScannerPlugin.getPlatformVersion() ??
'Unknown platform version';
} on PlatformException {
platformVersion = 'Failed to get platform version.';
}
// 如果在异步平台消息飞行时小部件被从树中移除,我们希望丢弃回复而不是调用setState来更新我们的非存在的外观。
if (!mounted) return;
setState(() {
_platformVersion = platformVersion;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('插件示例应用'),
),
body: Center(
child: Column(
children: [
Text('运行在: $_platformVersion\n'),
ElevatedButton(
onPressed: _loading ? null : _setScanner,
child: _loading
? const SizedBox(
width: 24.0,
height: 24.0,
child: CircularProgressIndicator.adaptive())
: const Text("获取扫描仪"),
),
...List.generate(
_scanners.length,
(index) => MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () => _initiateScan(_scanners[index]),
child: Text(
"${_scanners[index].name} ${_scanners[index].model}"),
),
),
),
if (_imgBytes != null)
Image.memory(
_imgBytes!,
width: 250,
),
if (_imgLoading) const CircularProgressIndicator.adaptive(),
],
),
),
),
);
}
_setScanner() async {
setState(() {
_loading = true;
_scanners = [];
});
final scannerStream = _flutterDesktopScannerPlugin.getDevicesStream();
scannerStream.listen((scanners) {
setState(() {
_scanners = scanners;
_loading = false;
});
});
await _flutterDesktopScannerPlugin.initGetDevices();
}
_initiateScan(Scanner scanner) async {
setState(() {
_imgLoading = true;
});
final stream = _flutterDesktopScannerPlugin.imageReprStream();
stream.listen((image) {
setState(() {
if (image != null) {
_imgBytes = img.encodePng(image);
}
_imgLoading = false;
});
});
await _flutterDesktopScannerPlugin.initScan(scanner);
}
}
更多关于Flutter桌面扫描插件flutter_desktop_scanner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter桌面扫描插件flutter_desktop_scanner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter桌面应用中集成并使用 flutter_desktop_scanner
插件的示例代码。这个插件允许你在Flutter桌面应用中实现二维码和条形码的扫描功能。
步骤 1: 添加依赖
首先,在你的 pubspec.yaml
文件中添加 flutter_desktop_scanner
依赖:
dependencies:
flutter:
sdk: flutter
flutter_desktop_scanner: ^最新版本号 # 请替换为实际的最新版本号
然后运行 flutter pub get
以获取依赖。
步骤 2: 配置权限
对于桌面应用,通常不需要像移动应用那样配置复杂的权限,但你需要确保你的应用有访问摄像头的能力。对于不同的桌面操作系统,这可能需要一些额外的配置。例如,在Windows或macOS上,用户可能需要在首次运行时授予应用访问摄像头的权限。
步骤 3: 使用插件
下面是一个简单的示例,展示如何在Flutter桌面应用中集成并使用 flutter_desktop_scanner
插件:
import 'package:flutter/material.dart';
import 'package:flutter_desktop_scanner/flutter_desktop_scanner.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Desktop Scanner Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ScannerScreen(),
);
}
}
class ScannerScreen extends StatefulWidget {
@override
_ScannerScreenState createState() => _ScannerScreenState();
}
class _ScannerScreenState extends State<ScannerScreen> {
String result = '';
Future<void> scanQRCode() async {
try {
String scanResult = await FlutterDesktopScanner.scan();
setState(() {
result = scanResult;
});
} catch (e) {
setState(() {
result = 'Error: ${e.message}';
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scanner Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
result.isEmpty ? 'No scan results yet.' : 'Scan Result: $result',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: scanQRCode,
child: Text('Scan QR Code'),
),
],
),
),
);
}
}
解释
- 依赖添加:在
pubspec.yaml
中添加flutter_desktop_scanner
依赖。 - 扫描功能:在
ScannerScreen
组件中,定义了一个scanQRCode
方法,该方法调用FlutterDesktopScanner.scan()
来启动扫描功能。扫描结果会存储在result
变量中,并显示在屏幕上。 - UI布局:使用
Scaffold
、AppBar
、Center
、Column
和ElevatedButton
等组件来构建简单的用户界面。
注意事项
- 确保你的开发环境中已经正确配置了摄像头。
- 在实际开发中,你可能需要处理更多的异常情况,比如用户拒绝访问摄像头权限。
- 由于插件可能会不断更新,请参考最新的官方文档以获取最新的使用方法和最佳实践。
这个示例代码提供了一个基础框架,你可以根据自己的需求进行扩展和修改。