flutter pub add swipe_image_gallery基于插件公开信息、社区数据与项目使用情况整理的选型参考。
Swipe Image Gallery 是一个 Flutter 包，可让开发者创建具有滑动关闭、缩放和动态叠加功能的交互式图像画廊。它支持 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台。该画廊允许用户滚动浏览图片，通过滑动来关闭图片，并可放大/缩小以进行详细查看。开发者可以使用动态叠加（如文本或图标）来自定义画廊。非常适合用于照片分享应用、产品展示或任何需要直观图像导航的应用。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A scrollable, dismissable by swiping, zoomable 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.
Add swipe_image_gallery as a dependency in your pubspec.yaml file.
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,
children: assets,
).show();
final widgets = [
Container(
color: Colors.white,
child: Center(
child: Text('First Page', style: TextStyle(fontSize: 24.0)),
),
),
Container(
color: Colors.grey,
child: Center(
child: Text('Second Page', style: TextStyle(fontSize: 24.0)),
),
),
];
...
SwipeImageGallery(
context: context,
children: widgets,
).show();
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();
You can find the OverlayExample widget here.
StreamController<Widget> overlayController =
StreamController<Widget>.broadcast();
@override
void dispose() {
overlayController.close();
super.dispose();
}
...
SwipeImageGallery(
context: context,
children: remoteImages,
onSwipe: (index) {
overlayController.add(OverlayExample(
title: '${index + 1}/${remoteImages.length}',
));
},
overlayController: overlayController,
initialOverlay: OverlayExample(
title: '1/${remoteImages.length}',
),
).show();
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,
children: assets,
heroProperties: heroProperties,
).show(),
child: Hero(
tag: 'imageId1',
child: Image(
image: AssetImage('assets/1.jpeg'),
),
),
),
),
Expanded(
child: InkWell(
onTap: () => SwipeImageGallery(
context: context,
children: 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.
暂无相关数据。