photo_view 0.0.3

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

photo_view Build Status - Travis

A simple zoomable image widget for Flutter projects

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.

Todo:

  • [x] Scale on doubleTap
  • [x] Zoom when pinched
  • [x] Respect screen and image boundaries
  • [ ] Multiple image support
  • [ ] Rotate gesture rotates image

Pull requests are welcome 😊.

Sample code

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

@override
Widget build(BuildContext context) {
  return new Container(
    child: new PhotoView(
      imageProvider: imageProvider
    );
  );
}

In action

Constructor

PhotoView({ ImageProvider imageProvider, Widget loadingChild })

Creates a widget that resolves and shows a image with zoom and pan gestures support. If provided, the widget shows loadingChild while the image is being resolved.

[0.0.1] - TODO: Add release date.

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';

void main() => runApp(new MyApp());


ThemeData theme =  new ThemeData(
    primaryColor: Colors.black,
    backgroundColor: Colors.white10
);

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Photo View example',
      theme: theme,
      home: new Scaffold(
        body: new Home(),
      ),
    );
  }
}

var imageUrl = "https://images.unsplash.com/photo-1495249737766-5aa052764eff?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7d968dee23958e5a65a99699c1a4ba05&auto=format&fit=crop&w=1500&q=80";
var imageUrl2 = "https://images.unsplash.com/photo-1522891735718-6a86a483c165?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=300&h=200&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=99553e144acd1557b378071c47042188";

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Expanded(child:  new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Center(
                  child:  new RaisedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          new MaterialPageRoute(builder: (context) => new ImageViewScreen(imageUrl2)),
                        );
                      },
                      color: Colors.green,
                      child: new Text("open small image",
                        style: new TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold
                        ),)
                  )
              ),
              new Center(
                  child:  new RaisedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          new MaterialPageRoute(builder: (context) => new ImageViewScreen(imageUrl)),
                        );
                      },
                      color: Colors.green,
                      child: new Text("open large image",
                        style: new TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold
                        ),)
                  )
              ),
            ],
          ))


        ],
      ),
    );
  }
}


class ImageViewScreen extends StatelessWidget {
  final String imageAddress;

  ImageViewScreen(this.imageAddress);


  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new PhotoView(
          imageProvider: new NetworkImage(imageAddress),
          loadingChild: new LoadingText(),
          backgroundColor: Colors.white,
          minScale: 0.1,
          maxScale: 4.0,
        )
    );
  }

}

class LoadingText extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Text("Loading",
      style: new TextStyle(
          color: Colors.white
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  photo_view: "^0.0.3"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or 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.0.3 Jul 18, 2018 Go to the documentation of photo_view 0.0.3 Download photo_view 0.0.3 archive
0.0.2 May 1, 2018 Go to the documentation of photo_view 0.0.2 Download photo_view 0.0.2 archive
0.0.1 May 1, 2018 Go to the documentation of photo_view 0.0.1 Download photo_view 0.0.1 archive
Awaiting analysis to complete.