Custom Camera Preview

A component has developed with Flutter


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.


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

You need import ‘package:camera/camera.dart’ in the camera preview page. Also, you should initialize your camera controller in initState

  void 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');


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(
   return CustomCameraPreview(
     imageFiles: _homeController.imageFiles,
     cameraController: controller!,




View Github