Flutter如何实现仅占页面三分之一的无拍摄按钮前置摄像头实时预览？

你可以通过官方维护的camera插件实现需求，具体步骤如下：

• 第一步：添加依赖
  在项目pubspec.yaml的dependencies节点下添加camera插件依赖，执行flutter pub get完成安装。
• 第二步：配置权限
  • 安卓端：在android/app/src/main/AndroidManifest.xml的<manifest>标签内添加相机权限声明：

    <uses-permission android:name="android.permission.CAMERA" />
    

  • iOS端：在ios/Runner/Info.plist的<dict>标签内添加相机使用说明：

    <key>NSCameraUsageDescription</key>
    <string>需要调用前置摄像头进行实时预览</string>
    

• 第三步：核心代码实现
  1. 初始化时优先获取前置摄像头实例，初始化相机控制器
  2. 界面层用高度限定为屏幕1/3的容器包裹CameraPreview组件即可，无需添加任何拍摄相关按钮控件

以下是简化的示例代码：

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

late List<CameraDescription> _cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  _cameras = await availableCameras();
  runApp(const MyApp());
}

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

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

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

  @override
  State<CameraPreviewPage> createState() => _CameraPreviewPageState();
}

class _CameraPreviewPageState extends State<CameraPreviewPage> {
  late CameraController _controller;

  @override
  void initState() {
    super.initState();
    // 筛选前置摄像头
    final frontCamera = _cameras.firstWhere(
      (cam) => cam.lensDirection == CameraLensDirection.front,
    );
    _controller = CameraController(
      frontCamera,
      ResolutionPreset.medium, // 可按需调整分辨率降低性能消耗
    );
    _controller.initialize().then((_) {
      if (!mounted) return;
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    if (!_controller.value.isInitialized) {
      return const SizedBox.shrink();
    }
    return Scaffold(
      body: Column(
        children: [
          // 限定高度为屏幕的1/3，仅展示预览画面
          SizedBox(
            height: MediaQuery.of(context).size.height / 3,
            width: double.infinity,
            child: CameraPreview(_controller),
          ),
          // 页面其余区域可自定义其他内容
          Expanded(child: Container(color: Colors.white)),
        ],
      ),
    );
  }
}

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