Friday, December 1, 2023

Media Gallery plugin for Flutter

Media Gallery plugin for Flutter

A Flutter plugin that lists native gallery items.


This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

  media_gallery: ^0.1.5

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.


Now in your Dart code, you can use:

import 'package:media_gallery/media_gallery.dart';


Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

<string>Example usage description</string>


Add the following permissions to your AndroidManifest.xml, located in <project root>/android/app/src/main/AndroidManifest.xml:

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

You should also manage those permissions (for example thanks to the permission_handler plugin). You can see an example for more details.


Listing media collections

final List<MediaCollection> collections = await MediaGallery.listMediaCollections(
    mediaTypes: [MediaType.image,],

Listing medias in a collection

final MediaPage imagePage = await collection.getMedias(
    mediaType: MediaType.image,
    take: 500,
final MediaPage videoPage = await collection.getMedias(
    take: 500,
final List<Media> allMedias = [
..sort((x, y) => y.creationDate.compareTo(x.creationDate));

Loading more medias in a collection

if (!imagePage.isLast) {
    final nextImagePage = await imagePage.nextPage();
    // ...

Getting a file

final File file = await media.getFile();

Getting thumbnail data

final List<int> data = await media.getThumbnail();

Displaying thumbnails

MediaThumbnailProviderMediaCollectionThumbnailProvider are available to display thumbnail images (here with the help of transparent_image) :

    fit: BoxFit.cover,
    placeholder: MemoryImage(kTransparentImage),
    image: MediaThumbnailProvider(
        media: media,

Displaying medias

You can use MediaImageProvider to display an image (here with the help of transparent_image):

    fit: BoxFit.cover,
    placeholder: MemoryImage(kTransparentImage),
    image: MediaImageProvider(
        media: media,

To display a video, you can use video_player.

Image/Video picker