in_app_gallery 1.0.2
in_app_gallery: ^1.0.2 copied to clipboard
A highly customizable Flutter package for selecting images and videos from the device gallery, featuring a polished UI and media compression.
In App Gallery #
A highly customizable, beautiful Flutter package for selecting images and videos from the device gallery. It provides a polished UI, media compression, and robust media handling using Bloc and photo_manager.
Features #
- Media Fetching: Fetch and display images and videos from the local gallery.
- Custom UI: A highly customizable and sleek user interface for media selection.
- Compression: Built-in image and video compression features.
- Permissions: Handles required permissions out of the box.
- Pure Dart Package: Restructured as a pure Dart package with no native plugin boilerplate, making integration easier and reducing build footprint.
Showcase #
Here are some screenshots of the in_app_gallery package in action:
Dependencies & Architecture #
This package is built using several robust packages to provide a seamless experience:
- photo_manager: For fetching and managing gallery assets.
- flutter_bloc: For predictable state management.
- flutter_image_compress: For high-quality image compression.
- hw_video_compress: For hardware-accelerated, native video compression.
- media_kit: For reliable video playback within the selection grid.
- permission_handler: For requesting device permissions.
Video Compression #
Video compression is delegated to the standalone hw_video_compress package. It executes hardware-accelerated video compression natively on both iOS and Android to prevent out-of-memory errors and minimize compilation size.
Getting Started #
Add in_app_gallery as a dependency in your pubspec.yaml file:
dependencies:
in_app_gallery: ^1.0.0
Platform Requirements #
Android #
Add the following permissions to your AndroidManifest.xml (located in android/app/src/main/AndroidManifest.xml):
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED"/>
iOS #
Add the following keys to your Info.plist (located in ios/Runner/Info.plist):
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library to pick images and videos.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app requires access to save photos to the library.</string>
Usage #
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:in_app_gallery/in_app_gallery.dart';
// Inside your stateful widget:
List<File> _selectedMedia = [];
Future<void> _openGallery() async {
final result = await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const InAppGalleryScreen(
title: 'Select Media',
maxSelection: 10,
allowVideoCompression: true,
),
),
);
if (result != null && result is List) {
setState(() {
_selectedMedia = List<File>.from(result);
});
}
}
Customizations #
InAppGalleryScreen offers various customization parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
appBar |
PreferredSizeWidget Function(int fileCount, VoidCallback onSelectionComplete)? |
null |
Custom builder to supply a custom App Bar. Receives selection count and completion trigger. |
imagesTabText |
String |
'Images' |
Custom label text for the images category tab. |
videosTabText |
String |
'Videos' |
Custom label text for the videos category tab. |
maxSelection |
int? |
null |
Max number of images/videos user can select. |
allowVideoCompression |
bool |
false |
Enable/disable compressing videos before returning them. |
imageQuality |
int? |
null |
Target compression quality (0-100) for picked images. |
cameraWidget |
Widget? |
null |
Custom builder to override the look of the camera option. |
noMediaWidget |
Widget? |
null |
Custom widget to show when no media files are found. |
permissionDeniedWidget |
Widget? |
null |
Custom widget to display when permissions are denied. |
compressionDialogWidget |
Widget Function(BuildContext, Stream<double>)? |
null |
Custom progress dialog shown during media processing. |