A simple zoomable image widget for Flutter
PhotoView is useful in full screen exhibition cases.
Resolves a image provider and shows the result with useful gestures support, such as pinch to zoom and pan.
Add photo_view
as a dependency in your pubspec.yaml file (what?).
Import Photo View:
import 'package:photo_view/photo_view.dart';
For more information about how to use Photo View, check the API Docs
If you want to see it in practice, check the example app that explores most of Photo View's use cases or download the latest version apk on the releases page
Given a ImageProvider imageProvider
(such as AssetImage or NetworkImage):
@override
Widget build(BuildContext context) {
return Container(
child: PhotoView(
imageProvider: AssetImage("assets/large-image.jpg"),
)
);
}
Result:
PhotoView
can be used inside a container with size different than the screen.
The previous class PhotoViewInline
has been deprecated and will be removed in future releases
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 20.0),
height: 300.0,
child: PhotoView(
imageProvider: AssetImage("assets/large-image.jpg"),
)
);
}
Result:
Note: If you don't want to the zoomed image do not overlaps the size of the container, use ClipRect
To show several images and let user change between them, use PhotoViewGallery
.
@override
Widget build(BuildContext context) {
return Container(
child: PhotoViewGallery(
pageOptions: <PhotoViewGalleryPageOptions>[
PhotoViewGalleryPageOptions(
imageProvider: AssetImage("assets/gallery1.jpeg"),
heroTag: "tag1",
),
PhotoViewGalleryPageOptions(
imageProvider: AssetImage("assets/gallery2.jpeg"),
heroTag: "tag2",
maxScale: PhotoViewComputedScale.contained * 0.3
),
PhotoViewGalleryPageOptions(
imageProvider: AssetImage("assets/gallery3.jpeg"),
initialScale: PhotoViewComputedScale.contained * 0.98,
heroTag: "tag3",
),
],
backgroundColor: Colors.black87,
)
);
}
Result (with a simple HUD):
Small image | Animated GIF | Limited scale | Hero animation |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
- Scale on doubleTap
- Zoom when pinched
- Respect screen and image boundaries
- Center image when zooming out
- Add image zoom limits (
minScale
anmaxScale
) - Add GIF support
- Multiple image support (Gallery mode)
- Rotate gesture rotates image (Work in progress)
Pull requests are welcome 😊.