📸 A simple zoomable image widget for Flutter
Switch branches/tags
Nothing to show
Clone or download
renancaraujo Merge pull request #64 from taljacobson/patch-1
move test package to dev_dependencies
Latest commit 919c88f Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example pub version Nov 27, 2018
lib pub version Nov 27, 2018
test flutter format Nov 18, 2018
.gitignore gitignore May 15, 2018
.travis.yml fix-build Aug 11, 2018
CHANGELOG.md fix md Nov 18, 2018
LICENSE pubstuff May 1, 2018
README.md update readme Nov 27, 2018
analysis_options.yaml remove news and drop dart 1 support Sep 25, 2018
dartdoc_options.yaml dartdocs Aug 18, 2018
pubspec.lock afterlayout version Nov 19, 2018
pubspec.yaml move test package to dev_dependencies Dec 9, 2018
screen1.gif docs improve Aug 13, 2018
screen2.gif docs improve Aug 13, 2018
screen3.gif docs improve Aug 13, 2018
screen4.gif docs improve Aug 13, 2018
screen5.gif readme and changelog Aug 13, 2018
screen6.gif readme Aug 18, 2018

README.md

Flutter Photo View

Build Status - Travis Pub Join the chat at https://gitter.im/photo_view/Lobby

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.

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 deprecated and will be removed in future releases, 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

Gallery

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