photo_view 0.2.2 copy "photo_view: ^0.2.2" to clipboard
photo_view: ^0.2.2 copied to clipboard

outdated

Photo View provides a gesture sensitive zoomable widget. PhotoView is largely used to show interacive images.

Flutter Photo View #

Build Status - Travis Pub [![Join the chat at https://gitter.im/photo_view/Lobby](https://badges.gitter.im/photo_view/Lobby.svg)](https://gitter.im/photo_view/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

A simple zoomable image widget for Flutter

Resolves a image provider and shows the result with useful gestures support, such as pinch to zoom and pan.

It also can show any widget instead of an image, such as Container, Text or a SVG. Just use custom child constructor.

Installation #

Add photo_view as a dependency in your pubspec.yaml file (what?).

Import Photo View:

import 'package:photo_view/photo_view.dart';

Docs & API #

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

Usage #

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:

In action

Inline Usage #

PhotoView can be used inside a container with size different than the screen.

The previous class PhotoViewInline has been removed, use PhotoView instead

@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:

In action

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.

import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
// ...

@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",
        ),
      ],
      backgroundDecoration: BoxDecoration(color: Colors.black87),
    )
  );
}

Result (with a simple HUD):

In action

More screenshots #

Small image Animated GIF Limited scale Hero animation
In action In action In action In action
2731
likes
0
pub points
100%
popularity

Publisher

verified publisherblue-fire.xyz

Photo View provides a gesture sensitive zoomable widget. PhotoView is largely used to show interacive images.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

after_layout, flutter

More

Packages that depend on photo_view