flutter camera调用摄像头拍照及遇到的问题

Flutter相机使用教程：拍照、闪光灯与摄像头切换

最新推荐文章于 2025-10-31 10:32:59 发布

原创最新推荐文章于 2025-10-31 10:32:59 发布 · 4.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

flutter 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在Flutter项目中使用fishRedux框架集成camera包实现拍照功能的详细步骤，包括相机初始化、权限申请、镜头预览、拍照、显示图片以及闪光灯和摄像头切换的实现。在实践中遇到的问题包括SDK最低版本设置和camera包版本匹配等。

注意！！！项目使用fishRedux框架，除状态管理和flutter原生不一样外，包的使用步骤是一样的

项目中的需求是前后置摄像头均可拍摄，当用前后置中的某一个拍摄成功后自动转换用另一个摄像头拍摄，同时有闪光灯、拍照按钮、转换摄像头三个功能键。

实现拍照功能

实现步骤如下：

1.引入camera包，注意包的版本，在changelog中查看更新日志，使用符合flutter最低版本的包版本

camera: ^0.10.0+2

2.申请相机权限

这里需要使用permission_handler权限管理包，判断是否有相机权限，有相机权限时可以直接进行初始化相机的操作，若没有则需要先申请相机权限。这里只贴代码，关于permission_handler的相关配置不做阐述。

//effect.dart文件
bool hasCameraPermission = await requestCameraPermission(); //获取当前是否有相机权限

//申请相机权限
Future<bool> requestCameraPermission() async {
  //获取当前的权限
  var status = await Permission.camera.status;
  if (status == PermissionStatus.granted) {
    print('已授权');
    //已经授权
    return true;
  } else {
    //未授权则发起一次申请
    status = await Permission.camera.request();
    print('未授权');
    if (status == PermissionStatus.granted) {
      return true;
    } else {
      return false;
    }
  }
}

3.定义一些会使用到的变量

//state.dart文件
import 'package:camera/camera.dart';

List<CameraDescription> cameras; //代表所有的相机，例如前置、后置，因此是一个集合
CameraController controller; //相机的实例化对象
XFile afterImageFile; //后置拍照文件
XFile frontImageFile; //前置拍照文件

4.相机初始化

cameras数组是所有的相机列表，cameras[0]表示后置摄像头，cameras[1]表示前置摄像头。

//effect.dart文件
await availableCameras().then((value) async { //获取设备相机列表
    ctx.dispatch(PhotographPublishActionCreator.getCamera(value)); //这个方法相当于原生的setState()
    if(ctx.state.cameras != null){ //判断是否有可用摄像头
      ctx.state.controller = await CameraController(ctx.state.cameras[0], ResolutionPreset.medium); //实例化相机对象--后置
      ctx.state.controller.initialize().then((_) async { //相机初始化
        await ctx.dispatch(PhotographPublishActionCreator.getCameraController(ctx.state.controller));
        if (!ctx.state.controller.value.isInitialized) { //判断是否初始化成功
          return;
        }
      });
    }
});

//action.dart文件
import 'package:camera/camera.dart';
//获取设备相机列表
static Action getCamera(List<CameraDescription> camera) {
    return Action(PhotographPublishAction.getCamera,payload: camera);
}

//获取相机实例化对象
static Action getCameraController(CameraController controller) {
    return Action(PhotographPublishAction.getCameraController,payload: controller);
}

//reducer.dart文件
//获取设备相机列表
PhotographPublishState _getCamera(PhotographPublishState state, Action action) {
  final PhotographPublishState newState = state.clone();
  newState.cameras = action.payload;
  return newState;
}

//获取相机实例化对象
PhotographPublishState _getCameraController(PhotographPublishState state, Action action) {
  final PhotographPublishState newState = state.clone();
  newState.controller = action.payload;
  return newState;
}

5.镜头预览

当相机初始化成功后可以在CameraPreview()进行镜头预览

//view.dart
Widget _cameraView(final size, final deviceRatio){
  if (!_state.controller?.value?.isInitialized ?? false) {
    return Container();
  }
  return Stack(
    children: [
      CameraPreview(_state.controller),
    ],
  );
}

6.点击拍照

//effect.dart文件
//拍照按钮的点击方法
void _takePicture(Action action, Context<PhotographPublishState> ctx) async {
  takePicture(ctx).then((XFile afterFile) async {
    if(ctx.state.controller.value.isInitialized){
      ctx.dispatch(PhotographPublishActionCreator.getAfterImageFile(afterFile))
      if(afterFile != null){
        print('第一张图片保存在------${afterFile.path}---------');
      }
    }
  });
}

//拍照
Future<XFile> takePicture(Context<PhotographPublishState> ctx) async {
  if (!ctx.state.controller.value.isInitialized) { //相机初始化判断
    print('没有可用相机');
    return null;
  }
  if (ctx.state.controller.value.isTakingPicture) {
    return null;
  }
  try {
    final XFile afterFile = await ctx.state.controller.takePicture(); //后置拍照
    return afterFile;
  } on CameraException catch (e) {
    print("出现异常$e");
    return null;
  }
}

//action.dart文件
//获取后置拍摄的文件
static Action getAfterImageFile(XFile file) {
    return Action(PhotographPublishAction.getAfterImageFile,payload: file);
}

//reducer.dart文件
//获取后置拍摄的文件
PhotographPublishState _getAfterImageFile(PhotographPublishState state, Action action) {
  final PhotographPublishState newState = state.clone();
  newState.afterImageFile = action.payload;
  return newState;
}

执行以上操作后afterImageFile即为拍摄成功后的图片文件

7.展示拍摄的图片

//view.dart文件
Widget _showContent(){
  return Container(
    child: _state.afterImageFile == null
        ? Container()
        : Container(
                width: MediaQuery.of(_context).size.width,
                child: Image.file(
                  File(_state.afterImageFile.path),
                  fit: BoxFit.cover,
                ),
          ),
  );
}

以上就实现了最基本的拍摄功能。

闪光灯功能

实现闪光灯功能的其实只需要一行代码：ctx.state.controller.setFlashMode(FlashMode.torch)。setFlashMode的参数有很多，不同参数代表闪光灯的不同状态，off(关闭)、auto(根据环境决定)、always(拍照时打开闪光灯)、torch(常量)，可以根据自己的需求进行选择

用一个变量管理闪光灯的开关状态，此处只展示takePicture()方法中关于闪光灯的部分，管理闪光灯的开关不做展示

//拍照
Future<XFile> takePicture(Context<PhotographPublishState> ctx) async {
  if (!ctx.state.controller.value.isInitialized) { //相机初始化判断
    print('没有可用相机');
    return null;
  }
  if (ctx.state.controller.value.isTakingPicture) {
    return null;
  }
  ctx.state.controller.setFlashMode(FlashMode.torch)
  try {
    final XFile afterFile = await ctx.state.controller.takePicture(); //后置拍照
    return afterFile;
  } on CameraException catch (e) {
    print("出现异常$e");
    return null;
  }
}

转换摄像头

前面提到cameras[0]表示后置摄像头，cameras[1]表示前置摄像头，因此分别写两个方法initAfterCamera()初始化后置和initFrontCamera()初始化前置

//effect.dart文件
//初始化后置
void initAfterCamera(Context<PhotographPublishState> ctx) async {
  await availableCameras().then((value) async { //获取设备相机列表
    ctx.dispatch(PhotographPublishActionCreator.getCamera(value));
    if(ctx.state.cameras != null){ //判断是否有可用摄像头
      ctx.state.controller = await CameraController(ctx.state.cameras[0], ResolutionPreset.medium); //实例化相机对象--后置
      ctx.state.controller.initialize().then((_) async { //相机初始化
        await ctx.dispatch(PhotographPublishActionCreator.getCameraController(ctx.state.controller));
        if (!ctx.state.controller.value.isInitialized) { //判断是否初始化成功
          return;
        }
      });
    }
});
}

//初始化前置
void initFrontCamera(Context<PhotographPublishState> ctx) async {
  await availableCameras().then((value) async { //获取设备相机列表
    ctx.dispatch(PhotographPublishActionCreator.getCamera(value));
    if(ctx.state.cameras != null){ //判断是否有可用摄像头
      ctx.state.controller = await CameraController(ctx.state.cameras[1], ResolutionPreset.medium); //实例化相机对象--前置
      ctx.state.controller.initialize().then((_) async { //相机初始化
        await ctx.dispatch(PhotographPublishActionCreator.getCameraController(ctx.state.controller));
        if (!ctx.state.controller.value.isInitialized) {
          return;
        }
      });
    }
  });
}

用一个bool变量afterCamera管理此时初始化的是前置还是后置，为true时展示后置，false展示前置。点击后需要改变afterCamera的值，改变值的方法在此处不展示。

//effect.dart
//切换镜头前后置的点击方法
void _changeCameraInit(Action action, Context<PhotographPublishState> ctx) async {
  ctx.state.afterCamera ? initAfterCamera(ctx) : initFrontCamera(ctx);
}