By Yogesh Kumar —

Enabling iOS Photo Library Access in Flutter App

Enabling iOS Photo Library Access in Your Flutter App

To allow your Flutter application to access images from the iPhone's photo library, you need to configure permissions in your iOS project and then use a Flutter plugin to interact with the native image picker.

1. Configure iOS Permissions (Info.plist)

iOS requires you to declare the reason your app needs to access the photo library. This is done by adding specific keys to the ios/Runner/Info.plist file. If these keys are missing, your app will crash when it tries to access the photo library.

Open your ios/Runner/Info.plist file and add the following keys inside the main <dict> tag. Remember to replace the string values with messages that clearly explain to your users why your app needs this permission.

<key>NSPhotoLibraryUsageDescription</key>
<string>Our app needs access to your photo library so you can select images for your trips or profile.</string>
<key>NSCameraUsageDescription</key>
<string>Our app needs access to your camera so you can take photos for your trips or profile.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Our app needs access to your microphone if you intend to record videos with sound.</string>

Explanation of Keys:

  • NSPhotoLibraryUsageDescription: This message is shown to the user when your app requests permission to access their photo library.
  • NSCameraUsageDescription: This message is shown if you also plan to allow users to take a new photo using the camera.
  • NSMicrophoneUsageDescription: This is required if you allow video recording and want to capture audio. Include it if your image picking might extend to video picking with sound.

Example Info.plist structure:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Please allow access to your photo library to select images for your emergency plans, activities, or profile.</string>
    <key>NSCameraUsageDescription</key>
    <string>Please allow access to your camera to take photos for your emergency plans, activities, or profile.</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Please allow access to your microphone if you wish to record videos with audio for your plans.</string>

    </dict>
</plist>

2. Add Flutter Plugin for Image Picking

The image_picker plugin is a popular choice for accessing the image library and camera in Flutter. Your README.md indicates it's already a dependency. If not, or to ensure you have the latest compatible version, add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  # ... other dependencies ...
  image_picker: ^1.0.7 # Or the latest version

Then, run flutter pub get in your terminal.

3. Implement Image Picking Logic in Dart

Here's an example of how you can use the image_picker plugin in a Flutter widget to pick an image from the gallery. This example demonstrates requesting permission implicitly when you try to pick an image. The plugin handles the permission request dialog.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImageSelectorWidget extends StatefulWidget {
  final Function(File imageFile) onImageSelected;

  const ImageSelectorWidget({Key? key, required this.onImageSelected}) : super(key: key);

  @override
  _ImageSelectorWidgetState createState() => _ImageSelectorWidgetState();
}

class _ImageSelectorWidgetState extends State<ImageSelectorWidget> {
  File? _selectedImage;
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage(ImageSource source) async {
    try {
      final XFile? pickedFile = await _picker.pickImage(
        source: source,
        // You can also specify image quality and maximum dimensions here
        // imageQuality: 80,
        // maxWidth: 800,
        // maxHeight: 600,
      );

      if (pickedFile != null) {
        setState(() {
          _selectedImage = File(pickedFile.path);
        });
        widget.onImageSelected(_selectedImage!);
      } else {
        // User canceled the picker
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Image selection cancelled.')),
        );
      }
    } catch (e) {
      // Handle any errors, e.g., permission denied
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error picking image: $e')),
      );
      // You might want to guide the user to app settings if permission was permanently denied.
      // Consider using a plugin like `permission_handler` for more granular control.
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        if (_selectedImage != null)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.file(
              _selectedImage!,
              height: 150,
              width: 150,
              fit: BoxFit.cover,
            ),
          )
        else
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.image, size: 100, color: Colors.grey[400]),
          ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            ElevatedButton.icon(
              icon: const Icon(Icons.photo_library),
              label: const Text('Gallery'),
              onPressed: () => _pickImage(ImageSource.gallery),
            ),
            ElevatedButton.icon(
              icon: const Icon(Icons.camera_alt),
              label: const Text('Camera'),
              onPressed: () => _pickImage(ImageSource.camera),
            ),
          ],
        ),
      ],
    );
  }
}

// Example usage in another widget:
class MyPageWithImageUpload extends StatelessWidget {
  const MyPageWithImageUpload({Key? key}) : super(key: key);

  void _handleImageSelection(File imageFile) {
    // Now you have the image file. You can upload it using Amplify Storage,
    // display it, or process it further.
    print('Image selected: ${imageFile.path}');
    // Example: await Amplify.Storage.uploadFile(local: imageFile, key: 'my-trip-image.jpg');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Select Image')),
      body: Center(
        child: ImageSelectorWidget(onImageSelected: _handleImageSelection),
      ),
    );
  }
}

While image_picker can trigger the permission dialog, for a better user experience and more control, you might want to use the permission_handler plugin. This allows you to check permission status, request permissions proactively, and guide users to settings if they've permanently denied access.

a. Add permission_handler to pubspec.yaml:

dependencies:
  # ... other dependencies
  permission_handler: ^11.3.1 # Or the latest version

Run flutter pub get.

b. Update Info.plist (if not already done for image_picker):

The permission_handler plugin also relies on the same NSPhotoLibraryUsageDescription, NSCameraUsageDescription, etc., keys in your Info.plist.

c. Example with permission_handler:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:permission_handler/permission_handler.dart';

class ImageSelectorWithPermissionWidget extends StatefulWidget {
  final Function(File imageFile) onImageSelected;

  const ImageSelectorWithPermissionWidget({Key? key, required this.onImageSelected}) : super(key: key);

  @override
  _ImageSelectorWithPermissionWidgetState createState() => _ImageSelectorWithPermissionWidgetState();
}

class _ImageSelectorWithPermissionWidgetState extends State<ImageSelectorWithPermissionWidget> {
  File? _selectedImage;
  final ImagePicker _picker = ImagePicker();

  Future<bool> _requestPermission(Permission permission) async {
    final status = await permission.request();
    return status.isGranted;
  }

  Future<void> _pickImage(ImageSource source) async {
    Permission requiredPermission;
    if (source == ImageSource.camera) {
      requiredPermission = Permission.camera;
    } else {
      requiredPermission = Permission.photos; // For gallery access
      // On iOS 14+ you might also consider Permission.photosAddOnly for write-only access
    }

    bool hasPermission = await _requestPermission(requiredPermission);

    if (!hasPermission) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('${source == ImageSource.camera ? "Camera" : "Photo library"} permission denied.'),
          action: SnackBarAction(
            label: 'Settings',
            onPressed: () => openAppSettings(), // Opens app settings
          ),
        ),
      );
      return;
    }

    try {
      final XFile? pickedFile = await _picker.pickImage(source: source);

      if (pickedFile != null) {
        setState(() {
          _selectedImage = File(pickedFile.path);
        });
        widget.onImageSelected(_selectedImage!);
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Image selection cancelled.')),
        );
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error picking image: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // ... (same build method as the previous ImageSelectorWidget example)
    return Column(
      children: <Widget>[
        if (_selectedImage != null)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.file(
              _selectedImage!,
              height: 150,
              width: 150,
              fit: BoxFit.cover,
            ),
          )
        else
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.image, size: 100, color: Colors.grey[400]),
          ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            ElevatedButton.icon(
              icon: const Icon(Icons.photo_library),
              label: const Text('Gallery'),
              onPressed: () => _pickImage(ImageSource.gallery),
            ),
            ElevatedButton.icon(
              icon: const Icon(Icons.camera_alt),
              label: const Text('Camera'),
              onPressed: () => _pickImage(ImageSource.camera),
            ),
          ],
        ),
      ],
    );
  }
}

Summary of Key Files to Modify:

  1. ios/Runner/Info.plist: Add NSPhotoLibraryUsageDescription and other relevant permission descriptions.
  2. pubspec.yaml: Ensure image_picker (and optionally permission_handler) are listed as dependencies.
  3. Your Dart files where image selection is needed: Implement the logic using ImagePicker and potentially PermissionHandler.

After making these changes, rebuild your Flutter application for iOS (flutter run). The first time your app attempts to access the photo library or camera, iOS will prompt the user with the permission dialog displaying the messages you provided in Info.plist.

Previous

Emergency Contact

 Next

Overdue Notifications