custom_gallery_display

Description:

custom gallery display

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