photo_view 0.4.0

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

Flutter Photo View #

Build Status - Travis Pub Chat

A simple zoomable image/content widget for Flutter.

PhotoView enables images to become able to zoom and pan with user gestures such as pinch, rotate and drag.

It also can show any widget instead of an image, such as Container, Text or a SVG.

Even though being super simple to use, PhotoView is extremely customizable though its options and the controllers.

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

The API Docs some detailed information about how to use PhotoView.

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

(Very) Basic 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

Read more about the PhotoView widget here.

To show several images and let user change between them, use PhotoViewGallery.

Read more about the gallery here.

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


@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoViewGallery.builder(
      scrollPhysics: const BouncingScrollPhysics(),
      builder: (BuildContext context, int index) {
        return PhotoViewGalleryPageOptions(
          imageProvider: AssetImage(widget.galleryItems[index].image),
          initialScale: PhotoViewComputedScale.contained * 0.8,
          heroTag: galleryItems[index].id,
        );
      },
      itemCount: galleryItems.length,
      loadingChild: widget.loadingChild,
      backgroundDecoration: widget.backgroundDecoration,
      pageController: widget.pageController,
      onPageChanged: onPageChanged,
    )
  );
}

Gallery sample in the example app:

In action

See the code here.

Usage with controllers #

When you need to interact with PhotoView's internal state values, PhotoViewController and PhotoViewScaleStateController are the way to.

Controllers, when specified to PhotoView widget, enables the author(you) to listen for state updates through a Stream and change those values externally.

Read more about controllers here.

In the example app, we can see what can be achieved with controllers:

In action

More screenshots #

Custom background,
small image
and custom alignment
Limited scaleHero animation
In actionIn actionIn action
Part of the screenCustom child
In actionIn action

CHANGELOG #

See the releases page on github

example/README.md

Example app #

The source code for the example app.

Use this package as a library

1. Depend on it

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


dependencies:
  photo_view: ^0.4.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub 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.4.0 May 25, 2019 Go to the documentation of photo_view 0.4.0 Download photo_view 0.4.0 archive
0.3.3 May 8, 2019 Go to the documentation of photo_view 0.3.3 Download photo_view 0.3.3 archive
0.3.2 May 8, 2019 Go to the documentation of photo_view 0.3.2 Download photo_view 0.3.2 archive
0.3.1 Apr 23, 2019 Go to the documentation of photo_view 0.3.1 Download photo_view 0.3.1 archive
0.3.0 Apr 21, 2019 Go to the documentation of photo_view 0.3.0 Download photo_view 0.3.0 archive
0.2.5 Apr 20, 2019 Go to the documentation of photo_view 0.2.5 Download photo_view 0.2.5 archive
0.2.4 Apr 9, 2019 Go to the documentation of photo_view 0.2.4 Download photo_view 0.2.4 archive
0.2.3 Apr 8, 2019 Go to the documentation of photo_view 0.2.3 Download photo_view 0.2.3 archive
0.2.2 Mar 12, 2019 Go to the documentation of photo_view 0.2.2 Download photo_view 0.2.2 archive
0.2.1 Feb 20, 2019 Go to the documentation of photo_view 0.2.1 Download photo_view 0.2.1 archive

All 28 versions...

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

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

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms:

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.

Analysis issues and suggestions

Fix dependencies in pubspec.yaml.

Running flutter pub upgrade failed with the following output:

ERR: The current Flutter SDK version is 1.5.4-hotfix.2.
 
 Because photo_view requires Flutter SDK version >=1.5.9-pre.94 <2.0.0, version solving failed.

Maintenance issues and suggestions

Fix platform conflicts. (-20 points)

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.0 <3.0.0