Flutter动态动画条码扫描插件flutter_animated_barcode_scanner的使用

Flutter动态动画条码扫描插件flutter_animated_barcode_scanner的使用

这个插件使得在您的移动应用中添加条码扫描功能变得非常简单。它包含了一个带有动画的条码查找器，引导用户轻松扫描条码，并且会高亮显示每个找到的条码。这是一个强大的工具，可以让您的应用更加出色！

更多由 Romantic Developer 提供的插件可以在 这里 查看。

关键特性

• 简易动画条码扫描：通过最少的设置即可快速为您的应用添加条码扫描功能。
• 酷炫动画查找器：一个动画查找器帮助用户轻松扫描条码。
• 智能条码高亮：自动在所有检测到的条码周围显示矩形。
• 可定制化：更改扫描器的外观和行为以匹配您的应用风格。
• 广泛的条码支持：适用于多种类型的条码，满足各种需求。
• 高性能：快速准确的条码扫描确保了流畅的用户体验。

使用方法

完整的实现可以在 这里 的项目中查看。

BarcodeScannerPreviewWrapper(
    barcodeScannerPreview: BarcodeScannerPreview(
      cameraControllerBuilder: () async => CameraController(
        (await availableCameras()).first,
        Platform.isAndroid
            ? ResolutionPreset.high
            : ResolutionPreset.medium,
        enableAudio: false,
        imageFormatGroup: ImageFormatGroup.bgra8888,
        fps: 25,
      ),
      originalPreferredOrientations: [
        DeviceOrientation.portraitUp,
        DeviceOrientation.landscapeLeft,
      ],
      barcodesBuilder: (context, barcodes) {
        return Stack(
          children: barcodes
              .map(
                (e) => BasicBarcodeRectangle(
                  cornerPoints: e.cornerPoints,
                  imageSize: e.imageSize,
                  color: Colors.green,
                  strokeWidth: 2,
                ),
              )
              .toList(growable: false),
        );
      },
      onCameraIsReady: (controller) {},
      onBarcodesFound: (barcodes) {},
      onCameraIsStreaming: (image) {},
      onFailedToProcessBarcode: (image, error, stace) {},
    ),
    mode: BarcodeScannerPreviewMode.square,
    finderWidget: AnimatedBarcodeFinder(
      lineColor: Colors.lightGreen,
      borderColor: Colors.lightGreenAccent,
      borderStrokeWidth: 4,
      lineStrokeWidth: 4,
    ),
  ),

开发环境

[!] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.19045.5131], locale en-US)
    • Flutter version 3.24.3 on channel stable at C:\Users\admin\fvm\default
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (3 months ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

完整示例代码

import 'dart:io';

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animated_barcode_scanner/flutter_animated_barcode_scanner.dart';

const kPreferredOrientations = [
  DeviceOrientation.portraitUp,
  DeviceOrientation.landscapeLeft,
];

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(kPreferredOrientations);
  runApp(MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData.from(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/barcodeScanner': (context) => BarcodeScannerScreen(),
        '/dummy': (context) => DummyScreen(),
      },
    );
  }
}

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

  [@override](/user/override)
  State<BarcodeScannerScreen> createState() => _BarcodeScannerScreenState();
}

class _BarcodeScannerScreenState extends State<BarcodeScannerScreen> {
  BarcodeScannerPreviewMode mode = BarcodeScannerPreviewMode.square;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner'),
        actions: BarcodeScannerPreviewMode.values
            .map(
              (e) => TextButton(
                child: Text(e.name),
                onPressed: () {
                  setState(() {
                    mode = e;
                  });
                },
              ),
            )
            .toList(growable: false),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: SingleChildScrollView(
              //因为全屏模式下，预览尺寸大于屏幕尺寸。
              child: BarcodeScannerPreviewWrapper(
                barcodeScannerPreview: BarcodeScannerPreview(
                  cameraControllerBuilder: () async => CameraController(
                    (await availableCameras()).first,
                    Platform.isAndroid
                        ? ResolutionPreset.high
                        : ResolutionPreset.medium,
                    enableAudio: false,
                    imageFormatGroup: ImageFormatGroup.bgra8888,
                    fps: 25,
                  ),
                  originalPreferredOrientations: kPreferredOrientations,
                  barcodesBuilder: (context, barcodes) {
                    return Stack(
                      children: barcodes
                          .map(
                            (e) => BasicBarcodeRectangle(
                              cornerPoints: e.cornerPoints,
                              imageSize: e.imageSize,
                              color: Colors.green,
                              strokeWidth: 2,
                            ),
                          )
                          .toList(growable: false),
                    );
                  },
                  onCameraIsReady: (controller) {},
                  onBarcodesFound: (barcodes) {},
                  onCameraIsStreaming: (image) {},
                  onFailedToProcessBarcode: (image, error, stace) {},
                ),
                mode: mode,
                finderWidget: AnimatedBarcodeFinder(
                  lineColor: Colors.lightGreen,
                  borderColor: Colors.lightGreenAccent,
                  borderStrokeWidth: 4,
                  lineStrokeWidth: 4,
                ),
              ),
            ),
          ),
          FilledButton(
            onPressed: () {
              Navigator.pushNamed(context, '/dummy');
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: Column(
        children: [
          FilledButton(
            onPressed: () {
              Navigator.pushNamed(context, '/barcodeScanner');
            },
            child: Text('Open barcode scanner'),
          ),
          FilledButton(
            onPressed: () {
              if (MediaQuery.of(context).orientation == Orientation.portrait) {
                SystemChrome.setPreferredOrientations(
                    kPreferredOrientations.reversed.toList(growable: false));
              } else {
                SystemChrome.setPreferredOrientations(kPreferredOrientations);
              }
            },
            child: const Text('Toggle Orientation'),
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DummyScreen'),
      ),
      body: Placeholder(),
    );
  }
}