interactiveviewer_gallery_plus

中文文档 fork from 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
6. Pull-down gesture supports left and right movement
7. Smoother gesture zooming experience

Preview

The picture browsing effect achieved by using this plug-in is as follows in QuanDao【犬岛】 App。 youtube

犬岛 download in appstore 犬岛 download in qq market

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

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

Other

Comments and pr are welcome