Flutter二维码扫描插件in_app_scanner的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter二维码扫描插件in_app_scanner的使用

in_app_scanner 是一个用于通过单个相机进行条形码扫描和图像捕捉的 Flutter 小部件。

功能

  • 使用设备的相机捕获图像。
  • 从捕获的图像中扫描条形码。
  • 显示捕获的条形码结果。

开始使用

前提条件

  • 在您的机器上安装了 Flutter SDK。
  • 具有摄像头的设备（建议使用物理设备进行测试）。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  in_app_scanner: ^1.0.0 # 使用最新版本

运行 flutter pub get 以安装依赖项。

使用方法

创建一个新的小部件，通过扩展 InAppScannerBuilder 来实现：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: _Page(),
    );
  }
}

class _Page extends StatelessWidget {
  const _Page();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) {
                  return const _Scanner();
                },
              ),
            );
          },
          child: const Text("Scan"),
        ),
      ),
    );
  }
}

class _Scanner extends StatelessWidget {
  const _Scanner();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: InAppScannerBuilder(
        controller: InAppScannerController(),
        autoInitMode: true,
        autoDisposeMode: true,
        builder: (context, controller) {
          return ListenableBuilder(
            listenable: controller,
            builder: (context, child) {
              // 如果相机已经初始化，则显示相机预览
              if (controller.isCameraInitialized) {
                return Column(
                  children: [
                    Expanded(
                      child: InAppScannerView(
                        controller: controller,
                      ),
                    ),
                  ],
                );
              } else {
                // 否则显示加载指示器
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          );
        },
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用in_app_scanner插件来实现二维码扫描功能的代码示例。

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

dependencies:
  flutter:
    sdk: flutter
  in_app_scanner: ^0.1.0  # 请检查最新版本号并替换

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter应用中，你可以按照以下步骤实现二维码扫描功能：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:in_app_scanner/in_app_scanner.dart';
  1. 创建一个扫描页面：
class ScanPage extends StatefulWidget {
  @override
  _ScanPageState createState() => _ScanPageState();
}

class _ScanPageState extends State<ScanPage> {
  late InAppScannerController _controller;
  String? _scanResult;

  @override
  void initState() {
    super.initState();
    _controller = InAppScannerController()
      ..addListener(() {
        if (mounted) {
          setState(() {});
        }
      });
    _controller.initialize().then((_) {
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('二维码扫描'),
      ),
      body: Center(
        child: _controller.isScanning
            ? AspectRatio(
                aspectRatio: _controller.aspectRatio,
                child: InAppScannerView(controller: _controller),
              )
            : (_scanResult != null
                ? Text('扫描结果: $_scanResult')
                : Text('请点击按钮开始扫描')),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          if (!_controller.isScanning) {
            try {
              var scanResult = await _controller.startScan(
                beepOnScan: true,
                scanArea: Rect.fromLTWH(
                  0,
                  0,
                  _controller.previewSize!.width,
                  _controller.previewSize!.height,
                ),
              );
              setState(() {
                _scanResult = scanResult;
              });
            } catch (e) {
              print('扫描错误: $e');
            }
          } else {
            _controller.stopScan();
          }
        },
        tooltip: _controller.isScanning ? '停止扫描' : '开始扫描',
        child: Icon(
          _controller.isScanning ? Icons.stop : Icons.scan_wifi,
        ),
      ),
    );
  }
}
  1. 在main.dart中使用扫描页面：
import 'package:flutter/material.dart';
import 'scan_page.dart'; // 导入你创建的扫描页面

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

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

以上代码展示了如何使用in_app_scanner插件在Flutter应用中实现二维码扫描功能。用户点击浮动操作按钮（FAB）开始扫描，扫描结果会显示在屏幕上。如果扫描过程中发生错误，错误会被捕获并打印到控制台。

请注意，实际使用时，你应该根据插件的最新文档和API调整代码，因为插件的API可能会随时间发生变化。此外，确保在Android和iOS项目中配置了必要的权限，特别是在AndroidManifest.xml和Info.plist文件中添加相机权限。

回到顶部