photo_view 0.2.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 99

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 imageAnimated GIFLimited scaleHero animation
In actionIn actionIn actionIn action

CHANGELOG #

See the releases page on github

example/README.md

example #

A new Flutter project.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  photo_view: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:photo_view/photo_view.dart';
  
Version Uploaded Documentation Archive
0.2.0 Feb 13, 2019 Go to the documentation of photo_view 0.2.0 Download photo_view 0.2.0 archive
0.1.3 Jan 14, 2019 Go to the documentation of photo_view 0.1.3 Download photo_view 0.1.3 archive
0.1.2 Dec 29, 2018 Go to the documentation of photo_view 0.1.2 Download photo_view 0.1.2 archive
0.1.1 Dec 28, 2018 Go to the documentation of photo_view 0.1.1 Download photo_view 0.1.1 archive
0.1.0 Nov 27, 2018 Go to the documentation of photo_view 0.1.0 Download photo_view 0.1.0 archive
0.0.11 Nov 18, 2018 Go to the documentation of photo_view 0.0.11 Download photo_view 0.0.11 archive
0.0.10 Oct 8, 2018 Go to the documentation of photo_view 0.0.10 Download photo_view 0.0.10 archive
0.0.9 Oct 6, 2018 Go to the documentation of photo_view 0.0.9 Download photo_view 0.0.9 archive
0.0.8 Sep 14, 2018 Go to the documentation of photo_view 0.0.8 Download photo_view 0.0.8 archive
0.0.7 Aug 23, 2018 Go to the documentation of photo_view 0.0.7 Download photo_view 0.0.7 archive

All 16 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
98
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
99
Learn more about scoring.

We analyzed this package on Feb 14, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.13
  • Flutter: 1.2.0

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/photo_view.dart. (-0.50 points)

Analysis of lib/photo_view.dart reported 1 hint:

line 335 col 11: Avoid using unnecessary statements.

Fix lib/photo_view_gallery.dart. (-0.50 points)

Analysis of lib/photo_view_gallery.dart reported 1 hint:

line 113 col 11: Avoid using unnecessary statements.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
after_layout ^1.0.7 1.0.7
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
test ^1.5.1