photo_view 0.0.8

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 exibition cases.

Resolves a image provider and show 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.

Import Photo View:

import 'package:photo_view/photo_view.dart';

Sample code #

Given a ImageProvider imageProvider (such as AssetImage or NetworkImage):

@override
Widget build(BuildContext context) {
  return new Container(
    child: new PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
      minScale: PhotoViewComputedScale.contained * 0.8,
      maxScale: 4.0,
    );
  );
}

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 new Container(
    child: new PhotoViewInline(
      imageProvider: AssetImage("assets/large-image.jpg"),
      minScale: PhotoViewComputedScale.contained * 0.8,
      maxScale: 4.0,
    );
  );
}

API #

For more information about how to use Photo View, check the API Docs

Screenshots #

Large imageSmall imageAnimated GIF
In actionIn actionIn action
Limited scaleInlineHero animation
In actionIn actionIn action

Todo: #

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

Pull requests are welcome 😊.