Guide To Extracting Image Metadata In Flutter

Images play a crucial role in many Flutter applications, from profile pictures to product images. However, sometimes you might need more than just the visual content of an image. You may need additional information embedded within the image, such as its metadata. In this guide, we’ll explore how to extract image metadata in a Flutter app and display it alongside the image.

What Is Image Metadata?

Image metadata, also known as Exif data, is additional information stored within an image file. This metadata can include details such as:

• Image dimensions

• File size

• Creation date

• Camera make and model

• GPS coordinates

• and much more

Implementing Image Metadata Extraction In Flutter:

Step 1: Adding Dependencies

We’ll use the image_picker and exif packages to handle image selection and metadata extraction, respectively. First, add the dependencies to your pubspec.yaml file:

dependencies: flutter: 
sdk: flutter 
image_picker: ^0.8.4+4 
exif: ^1.0.3

In the info.plist file – ios/runner/info.plist

<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

Step 2: Designing The User Interface

We’ll create a simple user interface with an image display area, a button to choose an image, and a section to display metadata. Here’s the code for the UI:

import 'dart:io'; 
import 'package:flutter/material.dart'; 
import 'package:image/image.dart' as img; 
import 'package:exif/exif.dart'; 
import 'package:image_picker/image_picker.dart'; 

void main() { 
runApp(MaterialApp( home: ImageMetadataScreen(), ));
 } 
class ImageMetadataScreen extends StatefulWidget { 
@override _ImageMetadataScreenState createState() => _ImageMetadataScreenState(); } 
class _ImageMetadataScreenState extends State<ImageMetadataScreen> { 
File? _image; Map<String, dynamic>? _metadata; 

Future<void> _getImage() async {
 final picker = ImagePicker(); 
 final pickedImage = await picker.pickImage(source: ImageSource.gallery); 
     if (pickedImage != null) { 
     setState(() { 
       _image = File(pickedImage.path); 
       _metadata = null; // Reset metadata when a new image is selected 
     });
   _extractMetadata(); 
   }
} 

Future<void> _extractMetadata() async { 
try { 
  final bytes = await _image!.readAsBytes(); 
  final image = img.decodeImage(bytes); 
  if (image != null) { 
    final exifData = await readExifFromBytes(bytes);
    setState(() { _metadata = exifData; }); } 
  }catch (e) { 
  print('Error extracting metadata: $e'); 
 }
} 

Widget _buildMetadataList() { 
  if (_metadata == null) { 
    return Container(); // Return an empty container if no metadata available } 
  List<Widget> metadataWidgets = []; 
  _metadata!.forEach((key, value) { 
    metadataWidgets.add( 
    ListTile( 
      title: Text(key), 
      subtitle: Text(value.toString()),
      ),
    );
  }); 
  return Column( 
    crossAxisAlignment: CrossAxisAlignment.start, 
    children: metadataWidgets, 
    ); 
} 

@override Widget build(BuildContext context) { 
  return Scaffold( 
    appBar: AppBar( 
    title: Text('Image Metadata'), ), 
    body: Column( 
      crossAxisAlignment: CrossAxisAlignment.stretch, 
      children: [ 
        _image != null ? Expanded( 
          child: Image.file( _image!, fit: BoxFit.cover, ), ) 
        : Placeholder(), // Placeholder if no image is selected ElevatedButton(
        onPressed: _getImage, 
        child: Text('Choose Image'), 
       ), 
    Expanded( 
      child: SingleChildScrollView( 
        child: Padding( 
          padding: const EdgeInsets.all(16.0), 
          child: _buildMetadataList(), 
          ), 
        ), 
      ), 
    ], 
   ), 
  ); 
 } 
}

Step 3: Running The Application

Now, you can run your Flutter application on an emulator or a physical device. When you tap the “Choose Image” button, you’ll be prompted to select an image from your device’s gallery. Once selected, the image will be displayed, along with its metadata below.

Conclusion:

In this guide, we’ve learned how to extract image metadata in a Flutter application using the image_picker and exif packages. By following the steps outlined above, you can easily incorporate image metadata extraction into your Flutter projects. This functionality can be particularly useful in applications where additional information about images is required beyond their visual content.

View the full code here

TURN YOUR APP IDEA INTO DIGITAL REALITY WITH iDIGISOL WEB, TODAY!