swipe image gallery

a scrollable, dismissable by swiping, zoomable, rotatable image gallery on which you can add a dynamic overlay. while it is intended for an image gallery different types of widgets can also be used.

installation

add swipe_image_gallery as a dependency in your pubspec.yaml file.

usage

with a list of image widgets

final assets = const [
  image(image: assetimage('assets/1.jpeg')),
  image(image: assetimage('assets/2.jpeg')),
  image(image: assetimage('assets/3.jpeg')),
  image(image: assetimage('assets/4.jpeg')),
];

...

swipeimagegallery(
  context: context,
  images: assets,
).show();

using builder

final urls = [
  'https://via.placeholder.com/400',
  'https://via.placeholder.com/800',
  'https://via.placeholder.com/900x350',
  'https://via.placeholder.com/1000',
  'https://via.placeholder.com/100',
];

...

swipeimagegallery(
  context: context,
  itembuilder: (context, index) {
    return image.network(urls[index]);
  },
  itemcount: urls.length,
).show();

add an overlay

you can find the overlayexample widget here.

  streamcontroller<widget> overlaycontroller =
      streamcontroller<widget>.broadcast();

  @override
  void dispose() {
    overlaycontroller.close();
    super.dispose();
  }

  ...

  swipeimagegallery(
    context: context,
    images: remoteimages,
    onswipe: (index) {
      overlaycontroller.add(overlayexample(
        title: '${index + 1}/${remoteimages.length}',
      ));
    },
    overlaycontroller: overlaycontroller,
    initialoverlay: overlayexample(
      title: '1/${remoteimages.length}',
    ),
  ).show();

hero animation

final heroproperties = [
  imagegalleryheroproperties(tag: 'imageid1'),
  imagegalleryheroproperties(tag: 'imageid2'),
];

final assets = const [
  image(image: assetimage('assets/1.jpeg')),
  image(image: assetimage('assets/2.jpeg')),
];

...

row(
  children: [
    expanded(
      child: inkwell(
        ontap: () => swipeimagegallery(
          context: context,
          images: assets,
          heroproperties: heroproperties,
        ).show(),
        child: hero(
          tag: 'imageid1',
          child: image(
            image: assetimage('assets/1.jpeg'),
          ),
        ),
      ),
    ),
    expanded(
      child: inkwell(
        ontap: () => swipeimagegallery(
          context: context,
          images: assets,
          initialindex: 1,
          heroproperties: heroproperties,
        ).show(),
        child: hero(
          tag: 'imageid2',
          child: image(
            image: assetimage('assets/2.jpeg'),
          ),
        ),
      ),
    ),
  ],
),

for more detailed examples you can check out the example project.