自定义相机预览

使用 Flutter 开发的组件

目的

与一次拍摄产品照片并在用户需要上传时一张一张地处理不同，他们可以使用自定义相机预览在同一屏幕上拍摄照片，将它们显示为列表，并在需要时从列表中删除。

说明

相机预览（如照片所示）

用户可以通过相机按钮拍照，并将其保存到照片列表中，如下所示：

如果用户想从列表中删除照片，用户应该使用图像上方的“删除”按钮。我们从列表中删除了狗的照片（第三张照片）（您可以将之前的屏幕截图与下面的照片进行比较）

相机实现

https://pub.dev/packages/camera

您需要在相机预览页面导入“package:camera/camera.dart”。此外，您应该在 initState 中初始化您的相机控制器

@override
  void initState() {
    super.initState();
    availableCameras().then((availableCameras) {
      cameras = availableCameras;
      if (cameras.isNotEmpty) {
        setState(() {
          selectedCameraIdx = 0;
        });
        _initCameraController(cameras[selectedCameraIdx]).then((void v) {});
      } else {
        print("No camera available");
      }
    }).catchError((err) {
      print('Error: $err.code\nError Message: $err.message');
    });
  }

用法

如果相机控制器为空或未初始化，则返回加载指示器。如果不是，则使用您必须提供的 File 类型空列表和相机控制器返回自定义相机预览

if (controller == null || !controller!.value.isInitialized) {
   return const Center(
     child: CircularProgressIndicator(
       color: Colors.red,
     ));
   }
   return CustomCameraPreview(
     imageFiles: _homeController.imageFiles,
     cameraController: controller!,
);

演示

customCameraPreview.mp4


GitHub

查看 Github