James
Swipe Image Gallery
An image gallery is useful, it allows you to scroll, dismissable swiping, zoomable, rotatable, and even on this gallery which you can add dynamic overlays. A lot of flexible and intelligent functions have been developed and It comes with a plethora of useful features. Although it is currently for image galleries, other types of widgets can also be used flexibly.
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 totally can find the OverlayExample widget here. Check it out right now!
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'),
),
),
),
),
],
),
To find more pieces of information and detailed examples, you can access the example project and check it out.
GitHub
https://github.com/dbilgin/swipe_image_gallery
