自定义画廊显示

当您尝试添加一个软件包来从图库中选择图像时，您会遇到糟糕的用户体验，因为您拥有传统的图库显示UI。

为了解决这个问题，我提供了两种主要的画廊视图

  • 它看起来像Instagram的画廊。
  • 这是画廊图片的网格视图。

您甚至可以自定义相机的显示，以便从两个角度拍摄照片和视频

Pub Package License: MIT

重要提示

CustomGallery是一个您需要推送到的页面。它有一个脚手架，您不能将其作为小部件添加到另一个脚手架中

安装

iOS

* camera插件可以为任何iOS版本编译，但其功能需要iOS 10或更高版本。如果为iOS 9编译，请确保在在设备上使用任何相机插件功能之前，以编程方式检查正在运行的iOS版本。例如，device_info_plus插件可用于检查iOS版本。

将两行添加到ios/Runner/Info.plist

  • 一行是键为Privacy - Camera Usage Description以及使用说明。
  • 其中一行包含键Privacy - Microphone Usage Description和使用说明。

如果将Info.plist作为文本进行编辑，请添加

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

Android

  • 在您的android/app/build.gradle文件中，将最低Android sdk版本更改为21（或更高），并将compile sdk更改为31（或更高）。

    compileSdkVersion 33
    minSdkVersion 21
  • 将此权限添加到您的AndroidManifest.xml中

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

1. 依赖它

将此添加到您的包的 pubspec.yaml 文件中

dependencies:
  custom_gallery_display: [last_version]

2. 安装它

您可以从命令行安装包

使用 pub

$ pub get custom_gallery_display

使用 Flutter

$ flutter pub add custom_gallery_display

3. 导入它

在您的Dart代码中，您可以使用

import 'package:custom_gallery_display/custom_gallery_display.dart';

示例

    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;
});

   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;
        });

    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;
        });

    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;
        });

GitHub

查看 Github