Implementing camera feature in Flutter
Camera feature is required in many of the apps and we all use it on a daily basis. I got an opportunity to implement this feature in current app I’m working on and I learnt lot of new things that I would like to share with you in this blogpost.
Flutter provides two main plugins to implement camera in your app.
Honestly, when I started to implement camera feature, I didn’t know the difference between these two plugins and was undecided which one to use, but when I explored deep on these and came to know the purpose of each along with it’s use case, I decided to go for image-picker, since image-picker was better suited for my requirement. You can read here more about their main difference, usage and implementation purpose.
For instance, let’s say we have a camera icon in a dart file (main.dart), tapping on it will show two options for user in the form of alertDialog:
- Take a photo (opens camera preview)
- Select from gallery (opens device’s image gallery to select pictures from)
Since, we now decided to use image-picker, we will need to add that as a dependency in pubspec.yaml file and run flutter packages get to install referenced package.
Next, we will import image_picker.dart package in dart file that will allow us to use ImagePicker class and its methods for our camera implementation.
import 'package:image_picker/image_picker.dart';In many of the apps we install and use, first step is to register with them and create a profile as part of on-boarding and have an option to upload user picture. Here, having an option to open camera preview or select images from phone album / gallery is critical since users of the app would like to personalize their profile. In this step, they have an option to either take a live picture using camera or select from gallery. Likewise, for demo purpose, we will implement a very basic alertDialog that will display these options to the user to choose from.
Future<void> _optionsDialogBox() {
return showDialog(context: context,
builder: (BuildContext context) {
return AlertDialog(
content: new SingleChildScrollView(
child: new ListBody(
children: <Widget>[
GestureDetector(
child: new Text('Take a picture'),
onTap: openCamera,
),
Padding(
padding: EdgeInsets.all(8.0),
),
GestureDetector(
child: new Text('Select from gallery'),
onTap: openGallery,
),
],
),
),
);
});
}Above code will show alertDialog on screen as below:
Once we tap on Take a picture, the app will request permission to allow to use audio and video file. This request will be displayed only for the first time after installing the app. Allowing the permission will open camera preview app that provides a button to capture the image, a button to close the camera preview and a button to rotate and change camera angle. How cool is that !! since we don’t need to customize and implement our own buttons in it, however, you can always customize the camera preview and add more features to it such as video recording etc according to the requirement which can be achieved using camera plugin as discussed earlier.
Let’s look at the code which opens camera preview. Inside openCamera method that is called after tapping on Take a picture:
var picture = await ImagePicker.pickImage(
source: ImageSource.camera,
);ImagePicker class provides a method named pickImage which greatly serves our purpose to open either a camera or gallery as source. Note that, image-picker returns a File (image file for instance) to our app.
Simply providing source: ImageSource.camera will enable our app to open camera preview as below:
You can explore more on the buttons displayed on the camera preview.
Coming to opening an image gallery, we simply need to change ImageSource from camera to gallery inside openGallery method and that’s it. Our app will seamlessly open default image gallery of the emulator / physical device to allow us to select picture of our choice.
var gallery = await ImagePicker.pickImage(
source: ImageSource.gallery,
);Note: If you are accessing gallery for the first time from your device, it will request a separate permission to access photos, media and files on your device. Allowing the permission will open image gallery as below:
Since, image-picker opens a separate gallery application on the device, on Android, it by default provides a cool navigation drawer to select image of your choice from various options as below:
This was on Android side and seem very easy to implement, right ? Let’s now look at iOS:
On iOS, we just need to add couple of lines in Info.plist file located at path ios/Runner/.
Note : If you are using ios simulator, you won’t be able to access it’s camera. You will need physical device to open camera preview on ios client.
Open Info.plist and add below lines of code anywhere inside <dict> </dict> tag.
<key>NSPhotoLibraryUsageDescription</key>
<string>Can I use the PhotoLibrary please?</string><key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>
<key>NSCameraUsageDescription</key>
<string>Can I use camera please?</string>And that’s it !!. If we run the app on iOS simulator and tap on Select from gallery, it will seamlessly open image gallery to choose picture of your choice.
You can do much more using image-picker once you have access to camera preview and image gallery, such as displaying the selected / captured image in an image widget on screen and then storing / retrieving that image using backend and NetworkImage widget. Firebase storage is a very good candidate to perform operations like storing and retrieving images.
I hope the information shared in this article will be helpful for newbies and to those who are looking to implement similar kind of feature in their app.
Thanks for reading and feel free to comment below your thoughts or any suggestions / feedback on this article and I will be happy to incorporate those in my next piece and reply to any questions on this very topic.
My social media links :
