Flutter二维码扫描插件sh_qrscan的使用
Flutter二维码扫描插件sh_qrscan的使用
简介
sh_qrscan 是一个用于二维码扫描的 Flutter 插件。它支持 Android 平台，并提供了丰富的功能来处理二维码和条形码。
项目地址：github
权限设置
在 AndroidManifest.xml 文件中添加以下权限：
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
安装
在项目的 pubspec.yaml 文件中添加以下依赖：
dependencies:
qrscan: ^0.3.2
然后运行以下命令安装依赖：
flutter pub get
使用示例
扫描二维码或条形码
import 'package:qrscan/qrscan.dart' as scanner;
String cameraScanResult = await scanner.scan();
分析照片中的二维码或条形码
String photoScanResult = await scanner.scanPhoto();
扫描指定路径的图片
String barcode = await scanner.scanPath(path);
解析 uint8list 类型的二维码
File file = await ImagePicker.pickImage(source: ImageSource.camera);
Uint8List bytes = file.readAsBytesSync();
String barcode = await scanner.scanBytes(uint8list);
生成二维码
Uint8List result = await scanner.generateBarCode('https://github.com/leyan95/qrcode_scanner');
功能支持
- ✅ 扫描 BR-CODE
- ✅ 扫描 QR-CODE
- ✅ 控制扫描时的手电筒开关
- ✅ 申请相机权限
- ✅ 从相册中扫描 BR-CODE 或 QR-CODE
- ✅ 将
uint8list转换为二维码字符串 - ✅ 扫描指定路径的图片
- ✅ 根据光线强度显示手电筒开关按钮
- ✅ 生成 QR-CODE
示例代码
以下是完整的示例代码，展示了如何使用 sh_qrscan 插件实现二维码扫描和生成功能。
import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:image_picker/image_picker.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:qrscan/sh_qrscan.dart' as scanner;
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Uint8List bytes = Uint8List(0);
TextEditingController _inputController;
TextEditingController _outputController;
[@override](/user/override)
initState() {
super.initState();
this._inputController = new TextEditingController();
this._outputController = new TextEditingController();
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[300],
body: Builder(
builder: (BuildContext context) {
return ListView(
children: <Widget>[
_qrCodeWidget(this.bytes, context),
Container(
color: Colors.white,
child: Column(
children: <Widget>[
TextField(
controller: this._inputController,
keyboardType: TextInputType.url,
textInputAction: TextInputAction.go,
onSubmitted: (value) => _generateBarCode(value),
decoration: InputDecoration(
prefixIcon: Icon(Icons.text_fields),
helperText:
'Please input your code to generage qrcode image.',
hintText: 'Please Input Your Code',
hintStyle: TextStyle(fontSize: 15),
contentPadding:
EdgeInsets.symmetric(horizontal: 7, vertical: 15),
),
),
SizedBox(height: 20),
TextField(
controller: this._outputController,
maxLines: 2,
decoration: InputDecoration(
prefixIcon: Icon(Icons.wrap_text),
helperText:
'The barcode or qrcode you scan will be displayed in this area.',
hintText:
'The barcode or qrcode you scan will be displayed in this area.',
hintStyle: TextStyle(fontSize: 15),
contentPadding:
EdgeInsets.symmetric(horizontal: 7, vertical: 15),
),
),
SizedBox(height: 20),
this._buttonGroup(),
SizedBox(height: 70),
],
),
),
],
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => _scanBytes(),
tooltip: 'Take a Photo',
child: const Icon(Icons.camera_alt),
),
),
);
}
Widget _qrCodeWidget(Uint8List bytes, BuildContext context) {
return Padding(
padding: EdgeInsets.all(20),
child: Card(
elevation: 6,
child: Column(
children: <Widget>[
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.verified_user, size: 18, color: Colors.green),
Text(' Generate Qrcode', style: TextStyle(fontSize: 15)),
Spacer(),
Icon(Icons.more_vert, size: 18, color: Colors.black54),
],
),
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 9),
decoration: BoxDecoration(
color: Colors.black12,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4), topRight: Radius.circular(4)),
),
),
Padding(
padding:
EdgeInsets.only(left: 40, right: 40, top: 30, bottom: 10),
child: Column(
children: <Widget>[
SizedBox(
height: 190,
child: bytes.isEmpty
? Center(
child: Text('Empty code ... ',
style: TextStyle(color: Colors.black38)),
)
: Image.memory(bytes),
),
Padding(
padding: EdgeInsets.only(top: 7, left: 25, right: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 5,
child: GestureDetector(
child: Text(
'remove',
style:
TextStyle(fontSize: 15, color: Colors.blue),
textAlign: TextAlign.left,
),
onTap: () =>
this.setState(() => this.bytes = Uint8List(0)),
),
),
Text('|',
style:
TextStyle(fontSize: 15, color: Colors.black26)),
Expanded(
flex: 5,
child: GestureDetector(
onTap: () async {
final success =
await ImageGallerySaver.saveImage(this.bytes);
SnackBar snackBar;
if (success) {
snackBar = new SnackBar(
content:
new Text('Successful Preservation!'));
Scaffold.of(context).showSnackBar(snackBar);
} else {
snackBar = new SnackBar(
content: new Text('Save failed!'));
}
},
child: Text(
'save',
style:
TextStyle(fontSize: 15, color: Colors.blue),
textAlign: TextAlign.right,
),
),
),
],
),
)
],
),
),
Divider(height: 2, color: Colors.black26),
Container(
child: Row(
children: <Widget>[
Icon(Icons.history, size: 16, color: Colors.black38),
Text(' Generate History',
style: TextStyle(fontSize: 14, color: Colors.black38)),
Spacer(),
Icon(Icons.chevron_right, size: 16, color: Colors.black38),
],
),
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 9),
)
],
),
),
);
}
Widget _buttonGroup() {
return Row(
children: <Widget>[
Expanded(
flex: 1,
child: SizedBox(
height: 120,
child: InkWell(
onTap: () => _generateBarCode(this._inputController.text),
child: Card(
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Image.asset('images/generate_qrcode.png'),
),
Divider(height: 20),
Expanded(flex: 1, child: Text("Generate")),
],
),
),
),
),
),
Expanded(
flex: 1,
child: SizedBox(
height: 120,
child: InkWell(
onTap: _scan,
child: Card(
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Image.asset('images/scanner.png'),
),
Divider(height: 20),
Expanded(flex: 1, child: Text("Scan")),
],
),
),
),
),
),
Expanded(
flex: 1,
child: SizedBox(
height: 120,
child: InkWell(
onTap: _scanPhoto,
child: Card(
child: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Image.asset('images/albums.png'),
),
Divider(height: 20),
Expanded(flex: 1, child: Text("Scan Photo")),
],
),
),
),
),
),
],
);
}
Future _scan() async {
await Permission.camera.request();
String barcode = await scanner.scan();
if (barcode == null) {
print('nothing return.');
} else {
this._outputController.text = barcode;
}
}
Future _scanPhoto() async {
await Permission.storage.request();
String barcode = await scanner.scanPhoto();
this._outputController.text = barcode;
}
Future _scanPath(String path) async {
await Permission.storage.request();
String barcode = await scanner.scanPath(path);
this._outputController.text = barcode;
}
Future _scanBytes() async {
File file =
await ImagePicker().getImage(source: ImageSource.camera).then((picked) {
if (picked == null) return null;
return File(picked.path);
});
if (file == null) return;
Uint8List bytes = file.readAsBytesSync();
String barcode = await scanner.scanBytes(bytes);
this._outputController.text = barcode;
}
Future _generateBarCode(String inputCode) async {
Uint8List result = await scanner.generateBarCode(inputCode);
this.setState(() => this.bytes = result);
}
}
更多关于Flutter二维码扫描插件sh_qrscan的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter二维码扫描插件sh_qrscan的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
sh_qrscan 是一个用于 Flutter 的二维码扫描插件，它基于 MLKit 和 ZBar 实现，支持 Android 和 iOS 平台。使用 sh_qrscan 可以轻松地在 Flutter 应用中集成二维码扫描功能。
安装
首先，你需要在 pubspec.yaml 文件中添加 sh_qrscan 依赖：
dependencies:
flutter:
sdk: flutter
sh_qrscan: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
配置
Android
在 android/app/build.gradle 文件中，确保 minSdkVersion 至少为 21：
android {
defaultConfig {
minSdkVersion 21
}
}
iOS
在 ios/Podfile 文件中，确保 platform 设置为 10.0 或更高版本：
platform :ios, '10.0'
使用
1. 导入包
import 'package:sh_qrscan/sh_qrscan.dart';
2. 启动二维码扫描
你可以使用 ShQrscan.scan() 方法来启动二维码扫描界面。该方法返回一个 Future<String?>，表示扫描到的二维码内容。
void scanQRCode() async {
String? result = await ShQrscan.scan();
if (result != null) {
print("Scanned QR Code: $result");
} else {
print("No QR Code scanned.");
}
}
3. 处理权限
在 Android 和 iOS 上，二维码扫描需要相机权限。你可以使用 permission_handler 插件来请求相机权限。
首先，添加 permission_handler 依赖：
dependencies:
permission_handler: ^10.0.0 # 请使用最新版本
然后，请求相机权限：
import 'package:permission_handler/permission_handler.dart';
void requestCameraPermission() async {
var status = await Permission.camera.status;
if (!status.isGranted) {
status = await Permission.camera.request();
if (status.isGranted) {
scanQRCode();
} else {
print("Camera permission denied");
}
} else {
scanQRCode();
}
}
4. 完整示例
以下是一个完整的示例，展示了如何在 Flutter 应用中使用 sh_qrscan 进行二维码扫描：
import 'package:flutter/material.dart';
import 'package:sh_qrscan/sh_qrscan.dart';
import 'package:permission_handler/permission_handler.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: QRScanScreen(),
);
}
}
class QRScanScreen extends StatelessWidget {
void scanQRCode() async {
String? result = await ShQrscan.scan();
if (result != null) {
print("Scanned QR Code: $result");
} else {
print("No QR Code scanned.");
}
}
void requestCameraPermission() async {
var status = await Permission.camera.status;
if (!status.isGranted) {
status = await Permission.camera.request();
if (status.isGranted) {
scanQRCode();
} else {
print("Camera permission denied");
}
} else {
scanQRCode();
}
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('QR Code Scanner'),
),
body: Center(
child: ElevatedButton(
onPressed: requestCameraPermission,
child: Text('Scan QR Code'),
),
),
);
}
}