Flutter条形码生成与扫描插件barcode_widgets的使用
Flutter条形码生成与扫描插件barcode_widgets的使用
简介
barcode_widgets
是一个用于在Flutter中简单快速地渲染条形码的库。这个项目是从 barcode_flutter
复制过来的,并且支持Null Safety。
更新日志
barcode_widgets
- 2.0.0: 支持 Null Safe
barcode_flutter
- 1.1.2: 添加 Codabar 支持,修复 Code128 的值 102 的错误模式
- 1.1.0: 添加 ITF 支持,添加 BarCodeParams 类以备未来扩展
- 1.0.2: 修复 EAN8 代码无效校验和的错误
- 1.0.1: 修复当 code128 包含字符 ‘M’ 时的扫描问题
- 1.0.0: 初始发布
特性
- 支持以下条形码类型:Code39、Code93、Code128、EAN13、EAN8、UPCA、UPCE
- 支持带或不带文本标签的渲染
- 支持调整条宽
- 不需要互联网连接
安装
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
barcode_flutter: ^2.0.0
然后运行 flutter packages get
或者使用IDE更新包。
入门指南
首先,在代码中导入依赖:
import 'package:barcode_flutter/barcode_flutter.dart';
接下来,可以通过以下代码渲染一个条形码(例如 Code39):
BarCodeImage(
params: Code39BarCodeParams(
"1234ABCD",
lineWidth: 2.0, // 单个黑白条的宽度 (默认: 2.0)
barHeight: 90.0, // 整个部件的高度 (默认: 100.0)
withText: true, // 是否带有文本标签 (默认: false)
),
onError: (error) { // 错误处理
print('error = $error');
},
);
注意:可以通过调整 lineWidth
参数来改变整个部件的宽度。但值小于 2.0
可能会使条形码扫描器难以正确识别结果。2.0
是所有代码类型的安全值。
示例代码
以下是一个完整的示例,展示如何使用 barcode_widgets
库生成不同类型的条形码:
import 'package:barcode_widgets/barcode_flutter.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Barcode Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(
barcodes: [
BarCodeItem(
description: "Code39 with text",
image: BarCodeImage(
params: Code39BarCodeParams(
"CODE39",
withText: true,
),
),
),
BarCodeItem(
description: "Code39",
image: BarCodeImage(
params: Code39BarCodeParams(
"CODE39",
),
),
),
// 其他条形码类型...
],
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({required this.barcodes});
final List<BarCodeItem> barcodes;
final String title = "BarCode Flutter";
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
children: widget.barcodes.map((element) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Card(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
element.description,
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.black45,
),
),
),
Center(
child: Container(
padding: const EdgeInsets.all(10.0),
child: element.image,
),
)
],
),
),
);
}).toList(),
),
);
}
}
class BarCodeItem {
String description;
BarCodeImage image;
BarCodeItem({
required this.image,
required this.description,
});
}
常见问题解答
这个库是否在生产环境中测试过?可以在生产环境中使用吗?
是的!我已经在 Android 和 iOS 设备上进行了测试。请随意使用任何条形码扫描器进行测试。
其他条形码类型呢?
我只实现了最常用的条形码类型。如果你有其他条形码类型的需求,请随时提交 PR。
许可证
barcode_flutter
在 BSD 许可证下发布。详见 LICENSE 文件。
更多关于Flutter条形码生成与扫描插件barcode_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter条形码生成与扫描插件barcode_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用barcode_widgets
插件来生成和扫描条形码的示例代码。barcode_widgets
通常与barcode_scan
和barcode_flutter
等插件一起使用,以实现条形码生成和扫描功能。不过,需要注意的是,barcode_widgets
本身可能不是非常流行或更新频繁的插件,所以这里我会结合barcode_scan
和barcode_flutter
来展示完整的流程。
首先,确保在pubspec.yaml
文件中添加必要的依赖:
dependencies:
flutter:
sdk: flutter
barcode_scan: ^5.0.0 # 用于扫描条形码
barcode_flutter: ^2.0.0 # 用于生成条形码(注意:barcode_widgets不是官方或广泛使用的库,这里使用barcode_flutter作为替代)
然后运行flutter pub get
来安装这些依赖。
生成条形码
下面是一个使用barcode_flutter
生成条形码的简单示例:
import 'package:flutter/material.dart';
import 'package:barcode_flutter/barcode_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Barcode Generator'),
),
body: Center(
child: BarcodeWidget(
barcode: Barcode.ean13()
..addData('123456789102'), // 数据内容
width: 250,
height: 100,
colorBlack: Colors.black,
colorWhite: Colors.white,
),
),
),
);
}
}
扫描条形码
接下来是使用barcode_scan
插件来扫描条形码的示例:
首先,确保在AndroidManifest.xml
中添加必要的权限:
<uses-permission android:name="android.permission.CAMERA" />
然后,在你的Flutter代码中添加扫描功能:
import 'package:flutter/material.dart';
import 'package:barcode_scan/barcode_scan.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Barcode Scanner'),
),
body: Center(
child: ElevatedButton(
onPressed: _scanQRAndBarcode,
child: Text('Scan a barcode'),
),
),
),
);
}
Future _scanQRAndBarcode() async {
try {
String result = await BarcodeScanner.scan();
print('Barcode result: $result');
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.cameraAccessDenied) {
print('The user did not grant the permission to use the camera.');
} else {
print('Unknown error: $e');
}
}
}
}
结合生成与扫描
你可以将生成和扫描功能结合到一个应用中,通过导航在不同的页面之间切换。这里是一个简单的示例,展示如何结合两者:
import 'package:flutter/material.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:barcode_flutter/barcode_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/scan': (context) => ScanScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Barcode App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BarcodeWidget(
barcode: Barcode.ean13()
..addData('123456789102'),
width: 250,
height: 100,
colorBlack: Colors.black,
colorWhite: Colors.white,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/scan');
},
child: Text('Scan a barcode'),
),
],
),
),
);
}
}
class ScanScreen extends StatefulWidget {
@override
_ScanScreenState createState() => _ScanScreenState();
}
class _ScanScreenState extends State<ScanScreen> {
String _result = 'No result';
Future _scanQRAndBarcode() async {
try {
String result = await BarcodeScanner.scan();
setState(() {
_result = 'Barcode result: $result';
});
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.cameraAccessDenied) {
setState(() {
_result = 'The user did not grant the permission to use the camera.';
});
} else {
setState(() {
_result = 'Unknown error: $e';
});
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scan Barcode'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_result),
SizedBox(height: 20),
ElevatedButton(
onPressed: _scanQRAndBarcode,
child: Text('Scan again'),
),
],
),
),
);
}
}
这个示例展示了如何创建一个简单的Flutter应用,其中包括生成EAN-13条形码和扫描条形码的功能。希望这对你有所帮助!