Flutter_barcode_scan

关于 | 特性 | 需求 | 开始 | 许可证 | 作者

🎯 关于 #

用于Android和iOS的Flutter条形码扫描插件。

✨ 特性 #

✔️ 扫描条形码；
✔️ 扫描二维码；

✅ 需求 #

Flutter版本 3.24.4
Gradle 8.1.0

🏁 开始 #

final qrCode = await FlutterBarcodeScan.scanBarcode(
        "#ff6666",
        "取消",
        true,
        ScanMode.QR,
      );

📝 许可证 #

该项目受BSD 2-Clause License保护。详情请参阅<LICENSE>文件。

由<{{Jhonathan Queiroz}}>用心制作。

返回顶部

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_barcode_scan/flutter_barcode_scan.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          children: [
            ListTile(
              title: const Text('打开条形码扫描器'),
              onTap: () {
                // 打开条形码扫描器
                FlutterBarcodeScan.scanBarcode(
                  "#ff6666", // 设置颜色
                  "取消", // 设置取消按钮文本
                  true, // 显示顶部导航栏
                  ScanMode.BARCODE, // 设置扫描模式为条形码
                );
              },
            ),
            ListTile(
              title: const Text('打开二维码扫描器'),
              onTap: () {
                // 打开二维码扫描器
                FlutterBarcodeScan.scanBarcode(
                  "#ff6666", // 设置颜色
                  "取消", // 设置取消按钮文本
                  true, // 显示顶部导航栏
                  ScanMode.QR, // 设置扫描模式为二维码
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter条形码扫描插件flutter_scan_barcode的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼

更多关于Flutter条形码扫描插件flutter_scan_barcode的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_scan_barcode插件来实现条形码扫描功能的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_scan_barcode依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_scan_barcode: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以创建一个新的页面或修改现有页面来添加条形码扫描功能。以下是一个简单的示例，展示如何使用flutter_scan_barcode插件：

import 'package:flutter/material.dart';
import 'package:flutter_scan_barcode/flutter_scan_barcode.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barcode Scanner Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BarcodeScannerPage(),
    );
  }
}

class BarcodeScannerPage extends StatefulWidget {
  @override
  _BarcodeScannerPageState createState() => _BarcodeScannerPageState();
}

class _BarcodeScannerPageState extends State<BarcodeScannerPage> {
  String _result = '';

  Future<void> _scanBarcode() async {
    String barcodeResult = await FlutterScanBarcode.scanBarcode(
      '#ff0000', // 矩形框颜色 (可选)
      'Cancel',  // 取消按钮文本 (可选)
      true,      // 是否振动 (可选)
      true,      // 是否发出扫描声 (可选)
      true,      // 是否显示闪光灯按钮 (可选)
    );

    setState(() {
      _result = barcodeResult;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Scan Result:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 10),
            Text(
              _result,
              style: TextStyle(fontSize: 24, color: Colors.blue),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _scanBarcode,
              child: Text('Scan Barcode'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

依赖添加：在pubspec.yaml文件中添加flutter_scan_barcode依赖。
主应用：创建一个MyApp类，它是应用的根Widget。
扫描页面：创建一个BarcodeScannerPage类，这是显示扫描结果和扫描按钮的页面。
扫描函数：定义一个_scanBarcode异步函数，它调用FlutterScanBarcode.scanBarcode方法来启动条形码扫描。
UI布局：使用Scaffold、AppBar、Center、Column和Text等Widget来构建用户界面，显示扫描结果和一个按钮来触发扫描。

运行这个Flutter应用，点击“Scan Barcode”按钮将启动条形码扫描界面。扫描成功后，扫描结果将显示在屏幕上。