interactiveviewer_gallery
A flutter library to show picture and video preview gallery support
- two-finger gesture zoom
- double-click to zoom
- switch left and right
- gesture back: scale, transfer, opacity of background
- video auto paused when miss focus
Preview
Setup
because the library is base on InteractiveViewer so require flutter verion above or equal 1.20.0
interactiveviewer_gallery: ${last_version}How to use
- Wrap Hero in your image gridview item:
Hero(
tag: source.url,
child: ${gridview item}
)- gridview item's GestureDetector add jumping to interactiveviewer_gallery:
// DemoSourceEntity is your data model
// itemBuilder is gallery page item
void _openGallery(DemoSourceEntity source) {
Navigator.of(context).push(
HeroDialogRoute<void>(
// DisplayGesture is just debug, please remove it when use
builder: (BuildContext context) => InteractiveviewerGallery<DemoSourceEntity>(
sources: sourceList,
initIndex: sourceList.indexOf(source),
itemBuilder: itemBuilder,
onPageChanged: (int pageIndex) {
print("nell-pageIndex:$pageIndex");
},
),
),
);
}- edit itemBuilder: you can reference the example/lib/main.dart then customize
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