Custom Gallery Display

When you try to add a package to select an image from a gallery, you will face a bad user experience because you have a traditional UI of Gallery display.

I have two main views of the gallery to solve this issue:

  • It looks like an Instagram gallery.
  • It's a grid view of gallery images.

You can even customize a display of a camera to take a photo and videos.

Pub Package License: MIT

Necessary note

CustomGallery is a page that you need to push to it. It has a scaffold. You cannot add it as a widget with another scaffold.

Installing

IOS

* The camera plugin compiles for any version of iOS, but its functionality requires iOS 10 or higher. If compiling for iOS 9, make sure to programmatically check the version of iOS running on the device before using any camera plugin features. The device_info_plus plugin, for example, can be used to check the iOS version.

Add two rows to the ios/Runner/Info.plist:

  • one with the key Privacy - Camera Usage Description and a usage description.
  • and one with the key Privacy - Microphone Usage Description and a usage description.

If editing Info.plist as text, add:

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

Android

  • Change the minimum Android sdk version to 21 (or higher), and compile sdk to 31 (or higher) in your android/app/build.gradle file.
compileSdkVersion 33
minSdkVersion 21
  • Add this permission into your AndroidManifest.xml
<manifest>
  ...
     <application
      ...
       android:requestLegacyExternalStorage="true">
       
    <uses-permission android:name="android.permission.INTERNET"/>
  ...
</manifest>

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  custom_gallery_display: [last_version]

2. Install it

You can install packages from the command line:

with pub:

$ pub get custom_gallery_display

with Flutter:

$ flutter pub add custom_gallery_display

3. Set it

Now in your main.dart, put those permissions:

  WidgetsFlutterBinding.ensureInitialized();
  await CustomGalleryPermissions.requestPermissionExtend();

4. Import it

In your Dart code, you can use:

import 'package:custom_gallery_display/custom_gallery_display.dart';

Usage

It has many configurable properties, including:

  • appTheme – Customization of colors if you have different themes
  • tabsTexts – Changing the names of tabs or even their languages
  • enableCamera – If you want to take a photo from the camera (front, back)
  • enableVideo – If you want to record video from the camera (front, back)
  • cropImage – If you want a cropped image with the aspect ratio that you are selected
  • gridDelegate – Customization of grid view

There are also callback:

  • sendRequestFunction – It's function that return to you info about selected image/s

Examples

/// Remember:
/// CustomGallery is a page that you need to push to it. It has a scaffold. You cannot add it as a widget with another scaffold

CustomGallery.instagramDisplay(
              cropImage: true, // It's true by default
              enableCamera: true, // It's true by default
              enableVideo: true, // It's true by default
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 1.7,
                mainAxisSpacing: 1.5,
              ), // It's by default
                sendRequestFunction: (SelectedImagesDetails details) async {
                // You can take this variables and push to another page
                bool multiSelectionMode = details.multiSelectionMode;
                bool isThatImage = details.isThatImage;
                List<File>? selectedFiles = details
                    .selectedFiles; // If there one image selected it will be null
                File selectedFile = details.selectedFile;
                double aspectRatio = details.aspectRatio;
              },
            )


/// Remember:
/// CustomGallery is a page that you need to push to it. It has a scaffold. You cannot add it as a widget with another scaffold

CustomGallery.normalDisplay(
              enableCamera: false, // It's false by default
              enableVideo: false, // It's false by default
              appTheme: AppTheme(
                  focusColor: Colors.black, primaryColor: Colors.white),
                sendRequestFunction: (SelectedImagesDetails details) async {
                // You can take this variables and push to another page
                bool multiSelectionMode = details.multiSelectionMode;
                bool isThatImage = details.isThatImage;
                List<File>? selectedFiles = details
                    .selectedFiles; // If there one image selected it will be null
                File selectedFile = details.selectedFile;
                double aspectRatio = details.aspectRatio;
              },
            )


/// Remember:
/// CustomGallery is a page that you need to push to it. It has a scaffold. You cannot add it as a widget with another scaffold

CustomGallery.normalDisplay(
              enableVideo: true,
              appTheme: AppTheme(
                  focusColor: Colors.white, primaryColor: Colors.black),
                tabsTexts: TabsTexts(
                videoText: "فيديو",
                galleryText: "المعرض",
                deletingText: "حذف",
                clearImagesText: "الغاء الصور المحدده",
                limitingText: "اقصي حد للصور هو 10",
              ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 1.7,
                mainAxisSpacing: 1.5,
              ),
              sendRequestFunction: (_) async {},
            )


/// Remember:
/// CustomGallery is a page that you need to push to it. It has a scaffold. You cannot add it as a widget with another scaffold


CustomGallery.normalDisplay(
                enableVideo: true,
                enableCamera: true,
                appTheme: AppTheme(
                    focusColor: Colors.white, primaryColor: Colors.black),
                tabsTexts: TabsTexts(
                    videoText: "視頻",
                    photoText: "照片",
                    galleryText: "畫廊",
                    deletingText: "刪除",
                    clearImagesText: "清除所選圖像",
                    limitingText: "限制為 10 張照片或視頻",
                ),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 1.7,
                    mainAxisSpacing: 1.5,
                    childAspectRatio: .5,
                ),
                sendRequestFunction: (_) async {},
              )

Libraries