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

outdated

A simple zoomable image widget for Flutter.

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

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.

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.

Full screen 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 #

If you want PhotoView to scale the image in container with size different than the screen, use PhotoViewInline instead.

@override
Widget build(BuildContext context) {
  return Container(
    margin: const EdgeInsets.symmetric(vertical: 20.0),
    height: 300.0,
    child: PhotoViewInline(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

Result:

In action

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

In action

More screenshots #

Small image Animated GIF Limited scale Hero animation
In action In action In action In action

Todo: #

  • Scale on doubleTap
  • Zoom when pinched
  • Respect screen and image boundaries
  • Center image when zooming out
  • Add image zoom limits (minScale an maxScale)
  • Add GIF support
  • Multiple image support (Gallery mode)
  • Rotate gesture rotates image (Work in progress)

Pull requests are welcome 😊.