gallery_picker 0.5.1

Gallery Picker is a flutter package that will allow you to pick media file(s), manage and navigate inside your gallery with modern tools and views.

gallery_picker

Gallery Picker is a flutter package that will allow you to pick media file(s), manage and navigate inside your gallery with modern tools and views.

Features

[✔] Modern design

[✔] Detailed documentation

[✔] Pick a media file

[✔] Pick multiple media files

[✔] BottomSheet layout

[✔] Auto localization for recent tabs

[✔] Fetch all media files from your phone

[✔] Comprehensively customizable design (desitination page, hero destination page...)

[✔] Gallery picker listener

[✔] Thumbnail widgets for media files

[✔] MediaProvider widgets to view video / image files

[✔] Gallery picker StreamBuilder to update your design if selects any file in gallery picker (GalleryPickerBuilder)

[✔] Ready-to-use widgets

[✔] Examples provided (example/lib/examples)

[✔] Permission requests handled within the library

[✔] Null-safety

You could find the code samples of the given gifs below in /example/lib/examples folder.

Getting started

1. Update kotlin version to 1.6.0 and classpath 'com.android.tools.build:gradle:7.0.4' in your build.gradle
2. In android set the minSdkVersion to 25 in your build.gradle

Android

Add uses-permission android/app/src/main/AndroidManifest.xml file

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

copied to clipboard

for android sdk 33 and above

   <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
   <uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

copied to clipboard

Ios

Add these configurations to your ios/Runner/info.plist file

    <key>NSPhotoLibraryUsageDescription</key>
    <string>Privacy - Photo Library Usage Description</string>
    <key>NSMotionUsageDescription</key>
    <string>Motion usage description</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>NSPhotoLibraryAddUsageDescription</string>

copied to clipboard

Usage

Quick and simple usage example:

Pick Single File

MediaFile? singleMedia = await GalleryPicker.pickMedia(context: context,singleMedia: true);

copied to clipboard

Pick Multiple Files

List<MediaFile>? media = await GalleryPicker.pickMedia(context: context);

copied to clipboard

Get All Media Files in Gallery

GalleryMedia? allmedia = await GalleryPicker.collectGallery();

copied to clipboard

Listen selected files inside gallery picker

Stream stream = GalleryPicker.listenSelectedFiles;

copied to clipboard

Dispose listener

GalleryPicker.disposeSelectedFilesListener();

copied to clipboard

PickerScaffold

Gallery Picker could also work as a bottom sheet. Use PickerScaffold instead your Scaffold.

There is an example at example/lib/examples/bottom_sheet_example.dart to see how it could be done.

  @override
  Widget build(BuildContext context) {
    return PickerScaffold(
      backgroundColor: Colors.transparent,
      onSelect: (media) {},
      initSelectedMedia: initMedia,
      config: Config(mode: Mode.dark),
      body: Container(),
    )
  }

copied to clipboard

Customizable destination page

Within the Gallery Picker you can design a page that will be redirected after selecting any image(s).

Note: There are two builder called multipleMediaBuilder and heroBuilder. If you designed both of them, multipleMediaBuilder will be shown after picking multiple media files, heroBuilder will be shown after picking a single media. If you only designed multipleMediaBuilder, multipleMediaBuilder will be shown after picking any file. Use given hero tag to view your Hero image. You can see a simple example below.

There is an example at example/lib/examples/pick_medias_with_builder.dart to see how it could be done.

   GalleryPicker.pickMediaWithBuilder(
        multipleMediaBuilder: ((media, context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Flippers Page'),
            ),
            body: GridView.count(
              crossAxisCount: 3,
              mainAxisSpacing: 5,
              crossAxisSpacing: 5,
              children: [
                for (var mediaFile in media)
                  ThumbnailMedia(
                    media: mediaFile,
                  )
              ],
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => MyHomePage(
                            title: "Selected Medias",
                            medias: media,
                          )),
                );
                GalleryPicker.dispose();
              },
              child: const Icon(
                Icons.send,
                color: Colors.white,
              ),
            ),
          );
        }),
        heroBuilder: (tag, media, context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Flippers Page'),
            ),
            body: Container(
              color: Colors.lightBlueAccent,
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.topLeft,
              child: Hero(
                tag: tag,
                child: Image.memory(media.thumbnail!),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              backgroundColor: Colors.orange,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => MyHomePage(
                            title: "Selected Medias",
                            medias: [media],
                          )),
                );
                GalleryPicker.dispose();
              },
              child: const Icon(
                Icons.send,
                color: Colors.white,
              ),
            ),
          );
        },
        context: context);

copied to clipboard

Dispose Gallery picker

GalleryPicker.dispose();

copied to clipboard

Customize your gallery picker

A Config class is provided to user to customize your gallery picker. You can customize any feature you want and select appearance mode.

Customizable appereance features

List<MediaFile>? media = await GalleryPicker.pickMedia(
  context: context,
  pageTransitionType: PageTransitionType.rightToLeft
  config: Config(
    backgroundColor: Colors.white,
    permissionDeniedPage:PermissionDeniedPage(),
    appbarColor: Colors.white,
    bottomSheetColor: const Color.fromARGB(255, 247, 248, 250),
    appbarIconColor: const Color.fromARGB(255, 130, 141, 148),
    underlineColor: const Color.fromARGB(255, 20, 161, 131),
    selectedMenuStyle: const TextStyle(color: Colors.black),
    unselectedMenuStyle:
        const TextStyle(color: Color.fromARGB(255, 102, 112, 117)),
    textStyle: const TextStyle(
        color: Color.fromARGB(255, 108, 115, 121),
        fontWeight: FontWeight.bold),
    appbarTextStyle: const TextStyle(color: Colors.black),
    recents: "RECENTS",
    gallery: "GALLERY",
    lastMonth: "Last Month",
    lastWeek: "Last Week",
    tapPhotoSelect: "Tap photo to select",
    selected: "Selected",
    selectIcon: Container(
      width: 50,
      height: 50,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Color.fromARGB(255, 0, 168, 132),
      ),
      child: const Icon(
        Icons.check,
        color: Colors.white,
      ),
    ),
  ),
  )

copied to clipboard

Appearance Mode

List<MediaFile>? media = await GalleryPicker.pickMedia(
        context: context,
        config: Config(
          mode: Mode.dark
        ),
        )

copied to clipboard

Give an initial selected media files

List<MediaFile>? media = await GalleryPicker.pickMedia(
        context: context,
        initSelectedMedia: initSelectedMedia,
        )

copied to clipboard

Give extra media files that will be included in recent

You can give extra pictures to appear on the recent page. You should define these files with MediaFile.file()

MediaFile file = MediaFile.file(id: "id", file: File("path"), type: MediaType.image);
List<MediaFile>? media = await GalleryPicker.pickMedia(
        context: context,
        extraRecentMedia: [file],
        )

copied to clipboard

Select your priority page

There are two pages called "Recent" and "Gallery". You could change the initial page.

List<MediaFile>? media = await GalleryPicker.pickMedia(
        context: context,
        startWithRecent: true,
        )

copied to clipboard

MediaFile

GalleryPicker returns MediaFile list. You can reach out features below.

[✔] Medium [✔] Id [✔] MediaType [✔] Thumbnail [✔] Check with thumbnailFailed if fetching thumbnail fails [✔] Check with fileFailed if getting file fails [✔] File [✔] getThumbnail function [✔] getFile function [✔] getData function [✔] Check if the file selected in gallery picker

Permission

Required permissions will be requested when gallery picker is launched. In case of user's rejection of request, the problem will be handled within gallery picker package.

Customizing Permission Denied Page

Config(
   permissionDeniedPage: PermissionDeniedPage(),
)

copied to clipboard

Ready-to-use widgets

ThumbnailMedia

ThumbnailMedia(
  media: media,
)

copied to clipboard

ThumbnailAlbum

ThumbnailAlbum(
  album: album,
  failIconColor: failIconColor,
  mode: mode,
  backgroundColor: backgroundColor,
)

copied to clipboard

PhotoProvider

PhotoProvider(
  media: media,
)

copied to clipboard

VideoProvider

VideoProvider(
  media: media,
)

copied to clipboard

MediaProvider

MediaProvider works with every media type

MediaProvider(
  media: media,
)

copied to clipboard

GalleryPickerBuilder

You can listen and update your design through this builder

GalleryPickerBuilder(
  builder: (selectedFiles, context) {
    return child
  },
)

copied to clipboard

BottomSheetBuilder

Use BottomSheetBuilder if you need to listen bottom sheet status to change something in your page.

BottomSheetBuilder(
  builder: (status, context) {
    return FloatingActionButton(
      onPressed: () {
        if (status.isExpanded) {
          GalleryPicker.closeSheet();
        } else {
          GalleryPicker.openSheet();
        }
      },
      child: Icon(!status.isExpanded
          ? Icons.open_in_browser
          : Icons.close_fullscreen),
    );
  },
)

copied to clipboard

AlbumMediaView

View all media files in the album sorted by its creation date

GalleryMedia? allmedia = await GalleryPicker.collectGallery();

copied to clipboard

AlbumMediaView(
  galleryAlbum: allmedia!.albums[0],
  textStyle: textStyle,
)

copied to clipboard

AlbumCategoriesView

View all album categories

GalleryMedia? allmedia = await GalleryPicker.collectGallery();

copied to clipboard

AlbumCategoriesView(
  albums: allmedia!.albums,
  categoryBackgroundColor: categoryBackgroundColor,
  categoryFailIconColor: categoryFailIconColor,
  mode: mode,
  onFocusChange: onFocusChange,
  onHover: onHover,
  onLongPress: onLongPress,
  onPressed: onPressed,
)

copied to clipboard

Breaking Changes From 0.2.3

BottomSheetLayout changed into PickerScaffold

Before:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: BottomSheetLayout(
          config: Config()
          onSelect: (media) {},
          child: Column(
            children: [

copied to clipboard

Now:

  @override
  Widget build(BuildContext context) {
    return PickerScaffold(
      backgroundColor: Colors.transparent,
      onSelect: (media) {},
      initSelectedMedia: initMedia,
      config: Config(mode: Mode.dark),
      body: Container(),
    )
  }

copied to clipboard

Examples

Check out our examples!

Standart Gallery Picker

example/lib/examples/gallery_picker_example.dart

Pick Media Files With Destination Page

example/lib/examples/pick_medias_with_builder.dart

BottomSheet Example

example/lib/examples/bottom_sheet_example.dart

WhatsApp Pick Photo Page

example/lib/examples/whatsapp_pick_photo.dart

This package was possible to create with:

• The photo_gallery package
• The transparent_image package
• The get package
• The video_player package
• The intl package
• The platform_info package
• The permission_handler package