junko2013 / interactiveviewer_gallery Goto Github PK

View Code? Open in Web Editor NEW

Enhancements to interactiveviewer: picture and video preview, support two-finger gesture zoom, double-click to zoom, switch left and right。图片预览，视频预览，图片视频混合预览

License: MIT License

Ruby 4.62% Objective-C 0.13% Kotlin 0.48% Dart 93.39% Swift 1.38%

interactiveviewer_gallery's Introduction

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

video for youtube

video for qiniu

apk download

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