Custom Camera Preview

A component has developed with Flutter

Purpose

Instead of taking photos of a product and taking them one by one when users need to upload anywhere, they can use custom camera preview to take their photos on the same screen, see them as a list and remove them from the list if they want.

Instruction

The Camera Preview as the photo

Users can take photos via camera button and save in photo list as below

If the user would like to delete a photo from the list, the user should use ‘delete’ button over the image. We deleted dog photo (third photo) from the list (You can compare previous screenshot with photo below)

Camera Implementation

https://pub.dev/packages/camera

You need import ‘package:camera/camera.dart’ in the camera preview page. Also, you should initialize your camera controller in 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');
    });
  }

Usage

If the camera controller is null or uninitialized, return a loading indicator. If not, return custom camera preview with parameters that you must given a empty list with the type of File and a camera controller

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

Demo

customCameraPreview.mp4

GitHub

View Github