How to fix flutter camera image picker rotation issue?

How to fix flutter image picker orientation rotation fix
How to fix flutter image picker orientation rotation fix

Flutter camera image picker has a known issue of returning images with wrong unexpected rotation. The issue has been raised in the GitHub and marked as closed, but still occurs in the latest stable release. The issue can, however, be resolved easily with the help of exif-rotation plugin. This issue is known to be affecting both iOS and Android platforms.

Why the image is rotated

When we take an image from the camera, we could be holding the phone in any orientation. Sometimes we take photos in landscape mode, sometimes portait and so on. The camera app takes the photo and adds special metadata entries (EXIF data) to the file so that it can be rotated properly in image viewers.

Flutter image_picker has a bug where it doesn’t process the image with the given EXIF data which makes the image appear in the wrong rotation. However, we can fix it by considering the EXIF data and rotating the image manually as the metadata suggests.

How to fix the rotation?

To fix the unwanted image rotation, we need to rotate the image based on the metadata available. Luckily, a library named flutter_exif_rotation is available. Once the image is taken from the image-picker, give it to the FlutterExifRotation library. The library will rotate it, if needed, based on the available EXIF data.

Let’s have a look into the sample code.

Firstly, add the flutter_exif_rotation library to your pubspec.yaml file.

dependencies:
  ...
  flutter_exif_rotation: ^0.5.1
  ...

Sample code for image pick and rotation fix

import 'dart:async';
import 'dart:io';

import 'package:flutter_exif_rotation/flutter_exif_rotation.dart'; //EXIF rotation library
import 'package:image_picker/image_picker.dart'; //Image picker library

class CameraService {

  Future<XFile?> pickImage() async {
    //Take a photo from camera
    final XFile? image = await ImagePicker().pickImage(
      source: ImageSource.camera, maxWidth: 1200, maxHeight: 1200, requestFullMetadata: true
    );
    if (image != null) {
      // Rotate the image to fix the wrong rotation coming from ImagePicker
      File rotatedImage = await FlutterExifRotation.rotateImage(path: image.path);
      return XFile(rotatedImage.path); //Return the file
    }
    return image;
  }

}

In the above code, The function FlutterExifRotation#rotateImage will fix the rotation of the image by considering the EXIF orientation tags. This solution has been proposed in the GitHub and many people supported this as the best way available at the moment.

If you have liked this article, you might also like other Fltuter tutorials I have written.

Muhammed Afsal Villan
Muhammed Afsal Villan
https://afsalv.com
Muhammed Afsal Villan is an experienced full-stack developer, specialized in desktop and mobile application development. He also regularly publishes quality tutorials on his YouTube channel named 'Genuine Coder'. He likes to contribute to open-source projects and is always enthusiastic about new technologies.
Facebook Instagram Linkedin Mail Youtube

RELATED ARTICLESMORE FROM AUTHOR

62 COMMENTS