interactiveviewer_gallery 0.3.0
interactiveviewer_gallery: ^0.3.0

Flutter Android iOS web

Image and video preview component that supports zoom and drag

interactiveviewer_gallery #

pub package

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

3
likes
95
pub points
58%
popularity

Image and video preview component that supports zoom and drag

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

qq326646683@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on interactiveviewer_gallery