Handling HEIC/HEIF Images in Flutter

We can’t run away from them.

When we develop for iOS, those devices do generate HEIC/HEIF images and previewing user-selected image in those format may be a hassle since Flutter didn’t provide first-party support for HEIC/HEIF images (source: https://github.com/flutter/flutter/issues/20522), leaving our custom image picker and asset preview implementation with blank spaces since we can’t preview HEIC/HEIF natively.

But don’t fret, we have another trick up our sleeve: converting them to supported format (JPG), in this short article, we will use a package named flutter_image_compress to get our job done.

Let’s add this line to your pubspec.yaml file:

dependencies:
  flutter_image_compress: ^1.0.0-nullsafety

and run flutter pub get, then go to your custom image picker code and import:

import 'package:flutter_image_compress/flutter_image_compress.dart';

and now, go to your post-image picker result path processing code and do the following:

// assuming that the image path variable is named imagePath

final String imagePathLowerCase = imagePath.toLowerCase();
  
// you may also add another conditional to check, that is the platform iOS or macOS
if (imagePath.contains('heic') || imagePath.contains('heif)) {
  final tmpDir = (await getTemporaryDirectory()).path;
  final target = '$tmpDir/${DateTime.now().millisecondsSinceEpoch}.jpg';
  final result = await FlutterImageCompress.compressAndGetFile(
    imagePath,
    target,
    format: CompressFormat.jpg,
    quality: 90,
  );

  if (result == null) {
   // error handling here
  }
}

this code snippet will happily convert your HEIC/HEIF selected image to JPG and now you can preview them in your Flutter app with no hassle.

That’s all for this article and see you in the next article.