如何创建Flutter条码扫描器（代码实现示例） _Flutter如何条码扫描器

创建可识别的项目列表

文章图片

Flutter创建条码扫描器实例

如果你希望人们使用你的应用程序来快速直观地识别数据，你不能使用条形码和二维码。它们已经存在了很长时间，以光学方式识别数据片段，而不会出现错误或误解。
如今，条形码仍有许多用途。我们最近看到的一种更常见的用途是在餐馆，顾客可以扫描二维码从菜单中订购特定项目。
如何创建Flutter条码扫描器？在本文中，这正是我们将要展示的条形码和二维码如何在移动应用程序中工作的内容：我们将创建一个名为 Scantastic 的简单应用程序，如下所示：

文章图片
该应用程序将让用户扫描二维码，然后将其识别为食品。Flutter如何条码扫描器？要创建它，我们必须完成以下步骤：

使用我们的菜单选项生成二维码
添加一个依赖项qr_code_scanner ，让我们可以从我们的应用程序中扫描二维码和条形码
向我们的应用程序添加菜单选项，并在检测到这些项目时做出反应
配置 Android Emulator 在模拟环境中显示二维码进行测试

准备好？让我们开始吧。
Flutter创建条码扫描器实例：创Flutter项目我们需要做的第一件事是创建我们的 Flutter 项目，我们可以通过flutter create scantastic在命令行输入来完成。
命令完成后，我们可以添加qr_code_scanner到我们的项目中，我们可以通过将以下代码写入命令行来完成：

flutter pub add qr_code_scanner

这增加了对二维码扫描包的依赖。因为我们将使用用户手机上的摄像头来执行我们的任务，所以我们必须进行一些设置才能完成这项工作。
安卓平台配置
通常，Flutter 广泛兼容任何版本的 Android，甚至是非常旧的版本。但是，由于该qr_code_scanner软件包使用了仅在 Android KitKat 中可用的功能，我们必须调整一些配置设置以影响此更改。
要使用此插件，请确保你拥有最新的 Gradle、Kotlin 和 Kotlin Gradle 插件。为此，请遵循qr_code_scanner存储库中概述的集成过程。
在这里，我们必须简单地调整我们的应用程序使用的 Kotlin 和 Gradle 的版本，并将我们应用程序的最低 SDK 版本设置为20. 这只是意味着该应用程序只能在 Android KitKat 及更高版本上运行。
iOS平台配置
Flutter如何条码扫描器？因为我们正在访问手机的摄像头，Apple App Store 将看到我们正在发出访问摄像头的请求，并想知道我们为什么发出该请求。
我们可以通过将以下内容添加到文件中来为插件配置 iOS：Info.plist

< key>io.flutter.embedded_views_preview< /key> < true/> < key>NSCameraUsageDescription< /key> < string>This app needs camera access to scan QR codes< /string>

现在，当用户尝试用他们的相机扫描应用程序中的二维码时，他们会看到一条警告，让他们接受或拒绝应用程序使用他们的相机。
创建我们的示例 Flutter 应用程序
如何创建Flutter条码扫描器？配置好我们的平台后，我们现在可以创建我们的二维码 Flutter 应用程序。为便于使用，我将项目拆分为几个不同的文件，以免混淆。该项目的布局如下所示：

>- lib\main.dart (包含我们的应用程序的开始屏幕) - lib\home\home.dart (包含二维码扫描屏幕) - lib\home\order.dart (识别代码时加载的屏幕) - qrcodes\ (一个包含要使用的样本二维码的目录)

由于本文的重点是扫描 QR 码的过程，因此我们将花大部分时间查看文件。home.dart
创建可识别的项目列表Flutter创建条码扫描器实例：我们要做的第一件事是创建一个我们的扫描仪应该识别List的项目。我们必须这样做，因为我们的条码扫描器可能可以识别任何条码，我们希望将其限制为仅对预定义的项目列表做出反应。
我们还希望将特定图标与每个项目相关联，以便向用户显示他们将要订购的项目的视觉表示。
【如何创建Flutter条码扫描器（代码实现示例）】我们的 anExpectedScanResult类如下所示：

class ExpectedScanResult { final String type; final IconData icon; ExpectedScanResult(this.type, this.icon); }

然后，我们可以在我们的第 15 行初始化以下代码：home.dart

final recognisedCodes = < ExpectedScanResult>[ ExpectedScanResult('cake', Icons.cake), ExpectedScanResult('cocktail', Icons.local_drink_outlined), ExpectedScanResult('coffee', Icons.coffee), ExpectedScanResult('burger', Icons.fastfood_rounded), ];

这会在扫描时添加我们接受的项目列表，包括相关的图标。
设置Barcode结果接下来我们必须做的是设置我们的Barcode结果和我们的QRViewController.
为此，我们将添加这些变量，但通过给它们添加后缀使它们可以为空?。我们这样做是因为在用户扫描条形码之前我们不会知道我们的条形码结果是什么，我们只能QRViewController在二维码扫描仪初始化后访问我们的：

Barcode? result; QRViewController? controller;

配置QRView小部件Flutter如何条码扫描器：现在，我们可以QRView在我们的小部件树中配置我们的小部件。在示例应用程序中，我们将 QR 扫描器放在一个Stack小部件中，这样我们就可以在 QR 码扫描器启动时告诉用户要扫描的内容。
让我们QRView像这样配置：

QRView( cameraFacing: CameraFacing.back, // Use the rear camera key: qrKey, // The global key for the scanner onQRViewCreated: _onQRViewCreated, // Function to call after the QR View is created overlay: QrScannerOverlayShape( // Configure the overlay to look nice borderRadius: 10, borderWidth: 5, borderColor: Colors.white, ), ),

在_onQRViewCreated函数中，我们拉入了我们希望看到的食物列表。然后，我们可以订阅从二维码扫描器接收到的事件。
Flutter创建条码扫描器实例：如果我们正在扫描的值在我们接受的列表中，我们会将用户带到另一个页面，他们可以像这样确认他们的订单：

void _onQRViewCreated(QRViewController controller) { this.controller = controller; // Retrieve the list of expected values final expectedCodes = recognisedCodes.map((e) => e.type); // Subscribe to the incoming events from our QR Code Scanner controller.scannedDataStream.listen((scanData) { // If the scanned code matches any of the items in our list... if (expectedCodes.any((element) => scanData.code == element)) { // ... then we open the page confirming the order with our user Navigator.of(context).push( MaterialPageRoute( builder: (context) => OrderPage( // Pass in the recognised item to the Order Page item: recognisedCodes.firstWhere((element) => element.type == scanData.code), ), ), ); } }); }

有了这个，我们已经为我们的应用程序中的二维码扫描仪奠定了基础。但是，我们现在有一个小问题：如果我们想扫描一张带有 QR 码的物理纸，那么将这个应用程序部署到物理设备上进行调试会很痛苦。
幸运的是，Android Emulator 自带了一个虚拟环境，我们可以在其中拍照。它还允许我们在环境中设置一个图像，我们可以用它来测试我们的 QR 码扫描。让我们看看如何做到这一点。
配置 Android 模拟器进行测试如何创建Flutter条码扫描器？一旦我们的代码可以运行或者我们已经克隆了示例应用程序，我们就可以启动 Android Emulator。根据你使用的是 Visual Studio Code 还是 Android Studio，你的操作方式会有所不同。
启动 Android Emulator 后，打开相机设置以设置图像。首先，点击菜单底部的三个点，然后点击Camera然后Add Image，如下图所示：

文章图片

Flutter如何条码扫描器

接下来，选择qrcodes目录中的图像之一。这使得代码出现在虚拟相机环境中。
如果你现在在模拟器中打开相机并按住左 ALT 键，使用 W 向前走，鼠标环顾四周以“走过去”到显示 QR 码的位置，如下所示：

文章图片

Flutter创建条码扫描器实例

我承认这很复杂，将二维码放在虚拟环境中的墙上；但它仍然比打印一张带有二维码的实体纸并扫描它要好。
而且，如果你在我们的示例应用程序中执行相同的操作，则 QR 码将被识别，并且用户将看到订购该项目的选项（如开场视频所示）。
总结如何创建Flutter条码扫描器？二维码和条形码是强大的工具，可用于快速光学识别数据。在本文中，我们学习了如何使用 Flutter 包来识别这些代码并对其进行处理。
我们还配置了一个模拟器来显示这些代码之一，这样我们就可以使用带有代码的物理纸，从而加快我们的工作流程。
可以在此处查看示例应用程序的完整代码。扫描愉快！