interactiveviewer_gallery 0.1.0

Image and video preview component that supports zoom and drag

interactiveviewer_gallery

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

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

1. Wrap Hero in your image gridview item:

Hero(
    tag: source.url,
    child: ${gridview item}
)

2. gridview item's GestureDetector add jumping to interactiveviewer_gallery:

// DemoSourceEntity is your data model
// itemBuilder is gallery page item
// heroTagBuilder accordding to gridview item's hero tag
void _openGallery(DemoSourceEntity source) {
    Navigator.of(context).push(
      HeroDialogRoute<void>(
        builder: (BuildContext context) => InteractiveviewerGallery<DemoSourceEntity>(
          sources: sourceList,
          initIndex: sourceList.indexOf(source),
          itemBuilder: itemBuilder,
          heroTagBuilder: (int index) => sourceList[index].url,
        ),
      ),
    );
}

3. 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.url,
        sourceEntity.previewUrl,
        isFocus: isFocus,
      );
    } else {
      return DemoImageItem(sourceEntity.url);
    }
}

Other

Comments and pr are welcome