Flutterexperts

Working with the camera and using it in different apps is quite normal in apps but while implementing it you may face various problems — such as if you are working in an app which is basically an e-commerce app where we need to manage different things we need to select different items and also post our responses with images at that time we must need to write a single code base from where we can manage camera at different locations throughout the app.

---

So let’s go over its implementation from where we would see how we do that

Implementation:

For implementing we need to add some dependencies

camera: 
image_cropper:
image_picker:
path_provider: 

Note: image cropper needs to add a few things in manifest.xml file please look into it. you can find these changes in imageCropper plugin.

Camera plugin for accessing the camera, image cropper for editing the clicked or picked image, path provider for finding commonly used locations on the filesystem, image picker for picking images.

https://gist.github.com/shivanchalaeologic/f9e00f88174e9802d9ea30f2b8f20af2#file-camera_method-dart

Here in the above code, you can easily see that this method is returning a string file by a call back function which is capturedImageFile function by this function we will receive an image which has been clicked or picked by the method.

In this method, we are have created an instance variable of image picker…final ImagePicker _picker = ImagePicker();

and by using this variable we will get the image file through the getImage inbuilt method.

final pickedFile = await _picker.getImage(
  source: source,
);

Now we have a file in the pickedFile variable and we need to crop a file like this shown in the image below

val = await ImageCropper.cropImage(
  sourcePath: pickedFile.path,
  aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
  compressQuality: 100,
  maxHeight: 700,
  maxWidth: 700,
  compressFormat: ImageCompressFormat.jpg,
  androidUiSettings: AndroidUiSettings(
    toolbarColor: Colors.white,
    toolbarTitle: "genie cropper",
  ),
);

In this method ImageCropper.crop Image() different parameters are required where you need to provide your file path, you can provide the ratio in which you want to minimize your image and image’s dimensions as well as you can also set the format in which you want to receive the image.

Later on now after editing that picked image we need to return back the file and we do the same by providing the image to that callback function like this…

capturedImageFile(val.path);

Now the method has returned that image in string format.

Here in the image given below you can see that we have two different buttons by which we are calling two different methods one for the camera and another for the gallery.

onImageButtonPressed(
  ImageSource.camera,
  context: context,
  capturedImageFile: (s) {
    setState(() {
      _imageFile = s;
    });
  },
);

We call this method when the button is pressed. Here we are sending different parameters & One of the most is the parameter by which that method gets to know which action is going to take place.

• For the camera, we use ImageSource.camera and ImageSource.gallery for the gallery.
• CaputuredImageFile is a callback function bywhich we receive the file and use it according to our needs.

https://gist.github.com/shivanchalaeologic/a4ad36080a9c1ce3a7deb739b87ead54#file-home_page-dart

Conclusion

The fact is there are different ways to access Camera and picking images from the gallery but the most important thing is defining things in the simplest way and working with ease. in this example, I have shown these things in the simplest way I can show if you want to try that out you only need to copy these code files and add these dependencies and it will start working.

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

If this article has helped you a bit and found interesting please clap!👏

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.