Flutter实时相机叠加图片功能实现求助

嘿，作为Flutter新手想实现这种相机实时画面叠加图片的效果完全没问题！我给你准备了一套可以直接参考的代码，能完美实现你想要的那种上层叠加图片的效果👇

前置准备 #

1. 首先在pubspec.yaml中添加相机依赖（可以用最新版本）：

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.5+5

执行flutter pub get完成依赖安装。

2. 把你要叠加的图片放到项目的assets/images/文件夹下，同时在pubspec.yaml中配置资源路径：

flutter:
  assets:
    - assets/images/overlay_image.png # 替换成你的实际图片路径

完整示例代码 #

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

List<CameraDescription>? cameras;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 获取设备可用相机列表
  cameras = await availableCameras();
  runApp(const MyCameraApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraOverlayScreen(),
    );
  }
}

class CameraOverlayScreen extends StatefulWidget {
  @override
  _CameraOverlayScreenState createState() => _CameraOverlayScreenState();
}

class _CameraOverlayScreenState extends State<CameraOverlayScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    // 使用第一个可用相机初始化控制器，设置分辨率
    _controller = CameraController(
      cameras![0],
      ResolutionPreset.medium,
    );
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // 页面销毁时释放相机资源
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // 用Stack实现相机预览与图片的层级叠加
            return Stack(
              fit: StackFit.expand,
              children: [
                // 底层：实时相机预览画面
                CameraPreview(_controller),
                // 上层：叠加的图片，可调整位置、透明度和适配方式
                Positioned.fill(
                  child: Opacity(
                    opacity: 0.7, // 可根据需求调整图片透明度
                    child: Image.asset(
                      'assets/images/overlay_image.png',
                      fit: BoxFit.contain, // 保持图片比例适配屏幕，可选cover等其他方式
                    ),
                  ),
                ),
              ],
            );
          } else {
            // 相机初始化过程中显示加载指示器
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

关键细节说明 #

• Stack布局：这是实现层级叠加的核心，CameraPreview作为底层元素，叠加图片放在上层，完全覆盖相机画面。
• 图片适配：通过BoxFit参数可以调整图片的显示逻辑，比如BoxFit.cover会让图片铺满整个屏幕，BoxFit.contain会保持图片比例完整显示。
• 透明度控制：Opacity组件可以灵活调整叠加图片的透明度，让相机画面更好地透出。

内容的提问来源于stack exchange，提问作者Sachin Malusare