custom_gallery_display 0.5.0

Customization of the gallery display or even camera and video.

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 the Instagram gallery.
• It's a grid view of gallery images.

You can even customize a display of a camera to take a photo and video from two perspectives

Necessary note

CustomGallery is a page that you need to push to it .It's has scafold, you cannot add it as a widget with another scafold

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>

copied to clipboard

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

copied to clipboard

• Add this permission into your AndroidManifest.xml

<manifest>
    ...
    <application
    ...
    <activity
    ...
    android:requestLegacyExternalStorage="true"
    ...
</activity>
    ...
    </application>
<uses-permission android:name="android.permission.INTERNET"/>
    </manifest>

copied to clipboard

1. Depend on it

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

dependencies:
  custom_gallery_display: [last_version]

copied to clipboard

2. Install it

You can install packages from the command line:

with pub:

$ pub get custom_gallery_display

copied to clipboard

with Flutter:

$ flutter pub add custom_gallery_display

copied to clipboard

3. Import it

In your Dart code, you can use:

import 'package:custom_gallery_display/custom_gallery_display.dart';

copied to clipboard

Examples

    CustomGalleryDisplay.instagramDisplay(
displaySource: DisplaySource.both,
pickerSource: PickerSource.both,
multiSelection: true,
cropImage: true, // It's true by default
galleryDisplaySettings: GalleryDisplaySettings(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 1.7,
mainAxisSpacing: 1.5), // It's true by default
),
onDone: (SelectedImagesDetails details) async {
bool multiSelectionMode = details.multiSelectionMode;
List<SelectedByte> selectedFiles = details.selectedFiles;
double aspectRatio = details.aspectRatio;
});

copied to clipboard

   CustomGalleryDisplay.normalDisplay(
        multiSelection: true,
        galleryDisplaySettings: GalleryDisplaySettings(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4, crossAxisSpacing: 1.7, mainAxisSpacing: 1.5),
          appTheme:
              AppTheme(focusColor: Colors.black, primaryColor: Colors.white),
        ),
        onDone: (SelectedImagesDetails details) async {
          bool multiSelectionMode = details.multiSelectionMode;
          List<SelectedByte> selectedFiles = details.selectedFiles;
          double aspectRatio = details.aspectRatio;
        });

copied to clipboard

    CustomGalleryDisplay.instagramDisplay(
        displaySource: DisplaySource.both,
        pickerSource: PickerSource.both,
        multiSelection: true,
        cropImage: false,
        galleryDisplaySettings: GalleryDisplaySettings(
          appTheme:
              AppTheme(primaryColor: Colors.black, focusColor: Colors.white),
          tabsTexts: TabsTexts(
            videoText: "視頻",
            photoText: "照片",
            galleryText: "畫廊",
            deletingText: "刪除",
            clearImagesText: "清除所選圖像",
            limitingText: "限制為 10 張照片或視頻",
          ),
        ),
        onDone: (SelectedImagesDetails details) async {
          bool multiSelectionMode = details.multiSelectionMode;
          List<SelectedByte> selectedFiles = details.selectedFiles;
          double aspectRatio = details.aspectRatio;
        });

copied to clipboard

    CustomGalleryDisplay.normalDisplay(
        displaySource: DisplaySource.both,
        pickerSource: PickerSource.both,
        galleryDisplaySettings: GalleryDisplaySettings(
          appTheme:
              AppTheme(focusColor: Colors.black, primaryColor: Colors.white),
          tabsTexts: TabsTexts(
            videoText: "فيديو",
            galleryText: "المعرض",
            deletingText: "حذف",
            noImagesFounded: "لم يتم العثور علي صور",
            acceptAllPermissions: "أقبل جميع الاذونات",
            holdButtonText: "استمر بالضغط علي الزر",
            photoText: "الصور",
            clearImagesText: "الغاء الصور المحدده",
            limitingText: "اقصي حد للصور هو 10",
          ),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 1.7,
            mainAxisSpacing: 1.5,
            childAspectRatio: .5,
          ),
        ),
        multiSelection: true,
        onDone: (SelectedImagesDetails details) async {
          bool multiSelectionMode = details.multiSelectionMode;
          List<SelectedByte> selectedFiles = details.selectedFiles;
          double aspectRatio = details.aspectRatio;
        });

copied to clipboard