https://github.com/qq326646683/interactiveviewer_gallery
Enhancements to interactiveviewer: picture and video preview, support two-finger gesture zoom, double-click to zoom, switch left and right。图片预览，视频预览，图片视频混合预览
https://github.com/qq326646683/interactiveviewer_gallery
finger-gesture-zoom gesture interactiveviewer-gallery video video-preview
Last synced: 5 months ago
JSON representation
Enhancements to interactiveviewer: picture and video preview, support two-finger gesture zoom, double-click to zoom, switch left and right。图片预览，视频预览，图片视频混合预览
- Host: GitHub
- URL: https://github.com/qq326646683/interactiveviewer_gallery
- Owner: qq326646683
- License: mit
- Created: 2020-11-02T10:07:45.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-19T04:39:58.000Z (about 5 years ago)
- Last Synced: 2026-02-16T01:27:57.262Z (5 months ago)
- Topics: finger-gesture-zoom, gesture, interactiveviewer-gallery, video, video-preview
- Language: Dart
- Homepage:
- Size: 104 KB
- Stars: 61
- Watchers: 1
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# interactiveviewer_gallery
[](https://pub.dartlang.org/packages/interactiveviewer_gallery)
[中文文档](./README_CH.md)
A flutter library to show picture and video preview gallery
support
1. two-finger gesture zoom
2. double-click to zoom
3. switch left and right
4. gesture back: scale, transfer, opacity of background
5. video auto paused when miss focus
## Preview
[video for youtube](https://youtu.be/S-93Et_nYQs)
[video for qiniu](http://file.jinxianyun.com/interactiveviewer_gallery_0_1_0.mp4)
[apk download](http://file.jinxianyun.com/interactiveviewer_gallery_0_1_0.apk)
## Setup
because the library is base on InteractiveViewer so require flutter verion above or equal 1.20.0
```dart
interactiveviewer_gallery: ${last_version}
```
## How to use
1. Wrap Hero in your image gridview item:
```dart
Hero(
tag: source.url,
child: ${gridview item}
)
```
2. gridview item's GestureDetector add jumping to interactiveviewer_gallery:
```dart
// DemoSourceEntity is your data model
// itemBuilder is gallery page item
void _openGallery(DemoSourceEntity source) {
Navigator.of(context).push(
HeroDialogRoute(
// DisplayGesture is just debug, please remove it when use
builder: (BuildContext context) => InteractiveviewerGallery(
sources: sourceList,
initIndex: sourceList.indexOf(source),
itemBuilder: itemBuilder,
onPageChanged: (int pageIndex) {
print("nell-pageIndex:$pageIndex");
},
),
),
);
}
```
3. edit itemBuilder: you can reference the [example/lib/main.dart](https://github.com/qq326646683/interactiveviewer_gallery/blob/main/example/lib/main.dart) then customize
```dart
Widget itemBuilder(BuildContext context, int index, bool isFocus) {
DemoSourceEntity sourceEntity = sourceList[index];
if (sourceEntity.type == 'video') {
return DemoVideoItem(
sourceEntity,
isFocus: isFocus,
);
} else {
return DemoImageItem(sourceEntity);
}
}
```
## Other
Comments and pr are welcome