Flutter 扫描二维码

在今天的移动开发中二维码扫描已经成为了常见的功能之一。Flutter作为一款跨平台的开发框架提供了丰富的插件和功能使得开发者可以轻松实现二维码扫描以及图像识别功能。本文将介绍如何在Flutter中通过结合scan插件、permission_handler插件以及image_picker插件实现二维码扫描和从相册选择二维码图片的功能。效果图1、相机扫描二维码2、相册选择二维码并扫描1、项目依赖首先我们需要在pubspec.yaml文件中添加以下依赖dependencies: flutter: sdk: flutter scan: ^1.6.0 # 用于扫描二维码 permission_handler: ^10.2.0 # 用于权限请求 image_picker: ^1.0.7 # 用于从相册选择图片这些插件的作用如下scan提供二维码扫描功能。permission_handler用于请求相机权限确保用户授权后才能使用相机进行二维码扫描。image_picker允许从相册选择图片便于用户上传二维码图片进行识别。2、配置权限在 Android 平台上为了使用相机功能需要在AndroidManifest.xml文件中添加必要的权限uses-permission android:nameandroid.permission.CAMERA/在 IOS平台上修改Info.plist文件打开ios/Runner/Info.plist文件确保添加以下配置iOS用虚拟机是调试不了的实测打不开相机keyNSCameraUsageDescription/key string需要访问相机用于二维码扫描/string keyNSPhotoLibraryUsageDescription/key string需要访问相册选择图片/string3、实现二维码扫描功能接下来我们来看看如何实现二维码扫描功能。我们需要创建一个主界面在其中添加按钮来请求相机权限并进行二维码扫描。没有二维码的小伙伴可以查看上一篇文章Flutter 生成二维码import package:flutter/material.dart; import package:scan/scan.dart; // 导入 scan 插件 import package:permission_handler/permission_handler.dart; // 导入权限请求插件 import package:image_picker/image_picker.dart; // 导入相册选择插件 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: QRScannerScreen(), ); } } class QRScannerScreen extends StatefulWidget { override _QRScannerScreenState createState() _QRScannerScreenState(); } class _QRScannerScreenState extends StateQRScannerScreen { ScanController controller ScanController(); // 创建扫描控制器 String qrcode Unknown; // 默认二维码内容 // 执行二维码扫描前请求权限 _requestPermissions() async { var cameraStatus await Permission.camera.request(); if (cameraStatus.isGranted) { // 权限已授予开始扫描 print(相机权限已授予开始扫描); // 点击按钮后跳转到全屏扫描界面 Navigator.push( context, MaterialPageRoute(builder: (context) QRScanPage(controller: controller)), ).then((result) { controller.pause(); // 暂停扫描 // 扫描完成后获取返回的二维码数据并更新显示 if (result ! null) { setState(() { qrcode result; // 更新二维码内容 }); } }); } else { // 权限被拒绝或未授权 print(相机权限未授予请授权); // 可以引导用户去设置页面 } } // 选择相册中的二维码图片 _selectImageFromGallery() async { final picker ImagePicker(); final pickedFile await picker.pickImage(source: ImageSource.gallery); if (pickedFile ! null) { String result await Scan.parse(pickedFile.path) ?? ; // 解析选中的图片 setState(() { qrcode result; // 更新二维码内容 }); } } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(二维码扫描器), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ // 显示二维码扫描结果 const Text( 二维码扫描结果:, style: TextStyle(fontSize: 18), ), const SizedBox(height: 10), Text( qrcode, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), const SizedBox(height: 30), // 扫描按钮 ElevatedButton( onPressed: _requestPermissions, // 执行权限请求 child: const Text(请求权限并开始扫描), ), const SizedBox(height: 30), // 选择相册按钮 ElevatedButton( onPressed: _selectImageFromGallery, // 选择相册 child: const Text(从相册选择二维码图片), ), ], ), ), ); } }代码解释权限请求我们通过permission_handler插件请求相机权限。用户允许后才能进行二维码扫描。扫描功能我们使用ScanController来控制扫描过程。点击按钮后跳转到全屏扫描页面QRScanPage在该页面用户可以通过相机扫描二维码。从相册选择图片我们利用image_picker插件允许用户从相册选择图片并解析二维码。4、全屏扫描页面当用户点击扫描按钮时应用会进入一个全屏扫描页面。在该页面中二维码扫描功能全屏展示并且添加了一个“选择相册”按钮让用户可以在扫描时直接选择图片。class QRScanPage extends StatelessWidget { final ScanController controller; const QRScanPage({super.key, required this.controller}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(扫描二维码)), body: Stack( alignment: Alignment.center, children: [ // 使用 ScanView 进行全屏扫描 ScanView( controller: controller, scanAreaScale: 0.8, // 设置扫描区域占满整个屏幕 scanLineColor: Colors.green.shade400, // 设置扫描线颜色 onCapture: (data) { // 扫描到二维码后返回数据 controller.pause(); // 暂停扫描 Navigator.pop(context, data); // 返回扫描结果 }, ), // 在屏幕上添加选择相册按钮 Positioned( bottom: 100, child: ElevatedButton( onPressed: () async { // 选择相册 final picker ImagePicker(); final pickedFile await picker.pickImage(source: ImageSource.gallery); if (pickedFile ! null) { String result await Scan.parse(pickedFile.path) ?? ; // 解析选中的图片 Navigator.pop(context, result); // 返回二维码结果 } }, child: const Text( 选择相册, style: TextStyle( fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), ], ), ); } }代码解释ScanView提供扫描界面支持自定义扫描区域和扫描线颜色。onCapture当扫描到二维码时会返回扫描结果并暂停扫描。选择相册按钮点击按钮可以让用户从相册选择二维码图片进行解析。完整demo可以直接复制到新项目跑起来import package:flutter/material.dart; import package:scan/scan.dart; // 导入 scan 插件 import package:permission_handler/permission_handler.dart; // 导入权限请求插件 import package:image_picker/image_picker.dart; // 导入相册选择插件 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: QRScannerScreen(), ); } } class QRScannerScreen extends StatefulWidget { override _QRScannerScreenState createState() _QRScannerScreenState(); } class _QRScannerScreenState extends StateQRScannerScreen { ScanController controller ScanController(); // 创建扫描控制器 String qrcode Unknown; // 默认二维码内容 // 执行二维码扫描前请求权限 _requestPermissions() async { var cameraStatus await Permission.camera.request(); if (cameraStatus.isGranted) { // 权限已授予开始扫描 print(相机权限已授予开始扫描); // 点击按钮后跳转到全屏扫描界面 Navigator.push( context, MaterialPageRoute(builder: (context) QRScanPage(controller: controller)), ).then((result) { controller.pause(); // 暂停扫描 // 扫描完成后获取返回的二维码数据并更新显示 if (result ! null) { setState(() { qrcode result; // 更新二维码内容 }); } }); } else { // 权限被拒绝或未授权 print(相机权限未授予请授权); // 可以引导用户去设置页面 } } // 选择相册中的二维码图片 _selectImageFromGallery() async { final picker ImagePicker(); final pickedFile await picker.pickImage(source: ImageSource.gallery); if (pickedFile ! null) { String result await Scan.parse(pickedFile.path) ?? ; // 解析选中的图片 setState(() { qrcode result; // 更新二维码内容 }); } } override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(二维码扫描器), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: Widget[ // 显示二维码扫描结果 const Text( 二维码扫描结果:, style: TextStyle(fontSize: 18), ), const SizedBox(height: 10), Text( qrcode, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), const SizedBox(height: 30), // 扫描按钮 ElevatedButton( onPressed: _requestPermissions, // 执行权限请求 child: const Text(请求权限并开始扫描), ), const SizedBox(height: 30), // 选择相册按钮 ElevatedButton( onPressed: _selectImageFromGallery, // 选择相册 child: const Text(从相册选择二维码图片), ), ], ), ), ); } } class QRScanPage extends StatelessWidget { final ScanController controller; const QRScanPage({super.key, required this.controller}); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(扫描二维码)), body: Stack( alignment: Alignment.center, children: [ // 使用 ScanView 进行全屏扫描 ScanView( controller: controller, scanAreaScale: 0.8, // 设置扫描区域占满整个屏幕 scanLineColor: Colors.green.shade400, // 设置扫描线颜色 onCapture: (data) { // 扫描到二维码后返回数据 controller.pause(); // 暂停扫描 Navigator.pop(context, data); // 返回扫描结果 }, ), // 在屏幕上添加选择相册按钮 Positioned( bottom: 100, child: ElevatedButton( onPressed: () async { // 选择相册 final picker ImagePicker(); final pickedFile await picker.pickImage(source: ImageSource.gallery); if (pickedFile ! null) { String result await Scan.parse(pickedFile.path) ?? ; // 解析选中的图片 Navigator.pop(context, result); // 返回二维码结果 } }, child: const Text( 选择相册, style: TextStyle( fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), ], ), ); } }总结本文展示了如何在 Flutter 中实现二维码扫描和从相册选择二维码图片的功能。通过使用scan、permission_handler和image_picker插件我们可以轻松地添加二维码扫描和图片识别功能。在开发实际应用时可能还需要处理更多细节例如处理不同平台的权限请求、优化扫描体验等。希望这篇文章能帮助你更好地理解如何在 Flutter 中实现二维码扫描功能并能够应用到你的项目中。