Flutter自定义相机，Flutter相册选择照片

原创

早起的年轻人 2021-06-01 16:01:20 ©著作权

©著作权归作者所有：来自51CTO博客作者早起的年轻人的原创作品，请联系作者获取转载授权，否则将追究法律责任

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

github?	测试源码在这里	百度同步
CSDN	网易云课堂教程	掘金
知乎	Flutter系列文章	头条同步

Flutter自定义相机，Flutter相册选择照片_Flutter教程

实际项目开发中，谷歌官方推荐的几个相机插件总是满足不了需要，更令人不舒服的是在华为某些高版本系列的手机中使用系统相机拍照或者是选择照片会让应用闪退。

小编也分析了原因，在这些手机拍照的照片过大，在手机相机拍完的那一瞬间，手机系统还没有处理完照片，然后应用就去读取这个照片，导致系统异常崩溃。

至本插件编写的 0.0.1 版本时，各相机应用插件都未修复其兼容性，以小编的性格，那就是再造个轮子，于是乎本插件就诞生了。

0.0.1 版本只支持 Android （已发布 2020-09-09）
0.0.3 版本同时支持 iOS (已发布 2020-09-12)
0.0.5 版本自定义相机同时支持 iOS (已发布 2020-09-15)

0.0.5 版本的功能修复
iOS平台的图片资源策略修改

本插件实现的最终目标：

1、调用原生默认的自定义相机
2、调用原生的系统相机、相册选择图片
3、拍照或者选择照片后调用系统裁剪（自定义）功能
4、在 Flutter Widget 中嵌入自定义相机，允许使用 Widget 开发的页面布局来操作相机

如下图是默认情况下自定义相机的页面效果：

Flutter自定义相机，Flutter相册选择照片_Flutter教程_02

1 添加依赖

小编以将这个自定义相机封装成一个插件组件，直接使用flutter_custom_camera_pugin插件就可使用，一般小编的作风就是提供两种集成方式如下：

通过pub仓库添加依赖，代码如下：最新版本查看这里

  dependencies:
   flutter_custom_camera_pugin: ^0.0.1

或者是通过 github 点击查看github方式添加依赖，代码如下：

dependencies:
  shake_animation_widget:
        git:
          url: https://github.com/zhaolongs/FlutterCustomCameraPugin.git
          ref: master

然后加载依赖，代码如下：

flutter pub get

然后在使用的地方导包，代码如下：

import 'package:flutter_custom_camera_pugin/flutter_custom_camera_pugin.dart';

2 打开自定义相机拍照

你可以使用 FlutterCustomCameraPugin 的 openCamera 方法来打开自定义相机拍照页面，其中可选参数 cameraConfigOptions 用来配置自定义相机页面的的按钮是否显示，如下代码清单 2-1：

  ///代码清单 2-1 
  ///打开相机
  void openCamera() async {
    CameraConfigOptions options = new CameraConfigOptions();

    ///默认自定义相册是否显示 相册切换
    options.isShowSelectCamera = true;

    ///默认自定义相册是否显示 前后镜头切换
    options.isShowPhotoAlbum = true;

    ///默认自定义相册是否显示 闪光灯开关按钮
    options.isShowFlashButtonCamera = true;

    ///调起自定义相机
    ///拍照的返回结果
    CameraResultInfo resultInfo =
        await FlutterCustomCameraPugin.openCamera(cameraConfigOptions: options);

    if (resultInfo.code == 200) {
      imageFile = new File(resultInfo.data["lImageUrl"]);
    }else if (resultInfo.code == 201) {
     ///201 是拍照取消 如点击了关闭按钮 
     ///或者是 Android 手机的后退按钮
    }
    setState(() {});
  }

CameraConfigOptions 用来配置相机参数，如下所示：

/// 相册配置使用参数
class CameraConfigOptions {

  ///0.0.1 版本 
  ///默认自定义相册是否显示 相册切换
  bool isShowPhotoAlbum = true;

  ///默认自定义相册是否显示 前后镜头切换
  bool isShowSelectCamera = true;

  ///默认自定义相册是否显示 闪光灯开关按钮
  bool isShowFlashButtonCamera = true;

}

CameraResultInfo 是拍照或者相册选择结果封闭，拍照成功、拍照取消、相册选择成功、相册选择失败均会回调：

class CameraResultInfo {
  ///消息标识 
  int code;
  ///回调的消息
  String message ='';
  ///回调的数据
  dynamic data ;
  ///回调的方法名
  String method ='';
}

3 打开相册选择照片

  ///打开相册
  void openPhotoAlbum() async {
    /// 相册的选择返回结果
    /// 选择成功与取消都会回调
    CameraResultInfo resultInfo =await FlutterCustomCameraPugin.openPhotoAlbum();
    if (resultInfo.code == 200) {
      imageFile = new File(resultInfo.data["lImageUrl"]);
    }
  }

4 打开一个弹框选择

Flutter自定义相机，Flutter相册选择照片_Flutter学习_03

 void openSystemAlert() async {
   /// 相册的选择返回结果
   /// 选择成功与取消都会回调
   CameraResultInfo resultInfo =await FlutterCustomCameraPugin.openSystemAlert();
   
   if (resultInfo.code == 200) {
     imageFile = new File(resultInfo.data["lImageUrl"]);
   }

   setState(() {});
 }