Camera template

Using Flutter in a mobile app you have two choices to use the camera:

  • Call the native camera app and wait for the result
  • Use the camera plugin and build your own UI to embed it in your app

The first solution is easy to implement but you have no control on the UI and the user experience. The second solution is more complex to implement but you can customize the UI and the user experience.

As we worked for years on a camera plugin for Flutter, we decided to share our experience and to provide a camera template to help you to build your own camera UI. Our plugin is available on pub.dev and the source code is available on Github.

Using ApparenceKit we will install all dependencies and generate a page with the plugin already configured.

Generate the camera template

To generate the camera template, you have to run the following command:

dart pub global run apparence_cli camera --exifLocation=true --uiType=basic .
  • --exifLocation=true will enable the location in the EXIF metadata of the picture Because of this you will have to provide extra permissions in your app (see below)
  • --uiType=basic will generate a basic UI with a button to take a picture and a button to switch between the front and the back camera

Permissions

Android

To enable the camera in your app, you have to add the following permission in your AndroidManifest.xml file:

<uses-permission android:name="android.permission.CAMERA" />

To enable the location in the EXIF metadata of the picture, you have to add the following permission in your AndroidManifest.xml file:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

iOS

To enable the camera in your app, you have to add the following permission in your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>

To enable the location in the EXIF metadata of the picture, you have to add the following permission in your Info.plist file:

<key>NSLocationWhenInUseUsageDescription</key>
<string>Location permission description</string>

⚠️ Be careful. You need to edit the Info.plist file in the ios/Runner using Xcode. Using VSCode or Android Studio will not work and your project may not compile.