Flutter相机功能插件camera_plugin的使用

Flutter相机功能插件camera_plugin的使用

在本教程中，我们将详细介绍如何在Flutter应用中使用camera_plugin插件来实现相机功能。该插件允许你轻松地访问设备上的摄像头，并进行预览和扫描。

准备工作

首先，确保你的项目依赖了camera_plugin库。你需要在pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  camera_plugin: ^版本号

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

示例代码

下面是一个完整的示例代码，展示了如何使用camera_plugin插件来实现相机预览功能。

main.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:camera_plugin/camera_plugin.dart';

late List _myCameras;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  _myCameras = await availableCameras();
  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  CameraController? cameraController;

  double previewWidth = 1, previewHeight = 1;

  [@override](/user/override)
  void initState() {
    super.initState();
    initCamera();
  }

  Future<void> initCamera() async {
    if (_myCameras.isNotEmpty) {
      cameraController = CameraController(
        _myCameras.first,
        ResolutionPreset.high,
        enableAudio: false,
        scanCaptureChanged: (value) {
          print("returnScanResult: $value");
        },
      );

      await cameraController!.initialize();

      print("camera value: ${cameraController!.value}");

      previewWidth = cameraController!.value.previewSize!.width;
      previewHeight = cameraController!.value.previewSize!.height;
      if (!mounted) {
        return;
      }

      setState(() {});
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    double width = 300;
    double height = (previewWidth / previewHeight) * width;

    double scale = 0.5;

    print("previewWidth: $previewWidth, previewHeight: $previewHeight");

    double scanWidth = width * scale;

    return MaterialApp(
      home: Scaffold(
          body: cameraController == null
              ? Container()
              : Center(
                  child: SizedBox(
                    width: width,
                    height: height,
                    child: Stack(
                      fit: StackFit.expand,
                      children: [
                        CameraPreview(
                          cameraController!,
                          child: TextButton(
                            onPressed: () async {
                              cameraController!.stopScan();
                            },
                            child: Text("turn"),
                          ),
                        ),
                        // Positioned(
                        //     left: width / 2 - scanWidth / 2,
                        //     top: height / 2 - scanWidth / 2,
                        //     child: Container(
                        //       width: scanWidth,
                        //       height: scanWidth,
                        //       color: Colors.red,
                        //     ))
                      ],
                    ),
                  ),
                )),
    );
  }
}

代码解释

• 导入必要的包：

  import 'package:flutter/material.dart';
  import 'dart:async';
  import 'package:camera_plugin/camera_plugin.dart';
  

• 初始化摄像头：

  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    _myCameras = await availableCameras();
    runApp(const MyApp());
  }
  

• 定义MyApp类并初始化摄像头控制器：

  class _MyAppState extends State<MyApp> {
    CameraController? cameraController;
  
    double previewWidth = 1, previewHeight = 1;
  
    [@override](/user/override)
    void initState() {
      super.initState();
      initCamera();
    }
  
    Future<void> initCamera() async {
      if (_myCameras.isNotEmpty) {
        cameraController = CameraController(
          _myCameras.first,
          ResolutionPreset.high,
          enableAudio: false,
          scanCaptureChanged: (value) {
            print("returnScanResult: $value");
          },
        );
  
        await cameraController!.initialize();
  
        print("camera value: ${cameraController!.value}");
  
        previewWidth = cameraController!.value.previewSize!.width;
        previewHeight = cameraController!.value.previewSize!.height;
        if (!mounted) {
          return;
        }
  
        setState(() {});
      }
    }
  

• 构建UI：

  [@override](/user/override)
  Widget build(BuildContext context) {
    double width = 300;
    double height = (previewWidth / previewHeight) * width;
  
    double scale = 0.5;
  
    print("previewWidth: $previewWidth, previewHeight: $previewHeight");
  
    double scanWidth = width * scale;
  
    return MaterialApp(
      home: Scaffold(
          body: cameraController == null
              ? Container()
              : Center(
                  child: SizedBox(
                    width: width,
                    height: height,
                    child: Stack(
                      fit: StackFit.expand,
                      children: [
                        CameraPreview(
                          cameraController!,
                          child: TextButton(
                            onPressed: () async {
                              cameraController!.stopScan();
                            },
                            child: Text("turn"),
                          ),
                        ),
                        // Positioned(
                        //     left: width / 2 - scanWidth / 2,
                        //     top: height / 2 - scanWidth / 2,
                        //     child: Container(
                        //       width: scanWidth,
                        //       height: scanWidth,
                        //       color: Colors.red,
                        //     ))
                      ],
                    ),
                  ),
                )),
    );
  }