Zoomable Photo View Widget for Flutter

You are currently viewing Zoomable Photo View Widget for Flutter
Zoomable PhotoView

Zoomable Photo View Widget for Flutter

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.

See also  Simple Image Editor Pro Plugin for Flutter

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:

Zoomable PhotoView
Zoomable PhotoView

Read more about the PhotoView widget here.

Gallery

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,
          heroAttributes: PhotoViewHeroAttributes(tag: galleryItems[index].id),
        );
      },
      itemCount: galleryItems.length,
      loadingBuilder: (context, event) => Center(
        child: Container(
          width: 20.0,
          height: 20.0,
          child: CircularProgressIndicator(
            value: event == null
                ? 0
                : event.cumulativeBytesLoaded / event.expectedTotalBytes,
          ),
        ),
      ),
      backgroundDecoration: widget.backgroundDecoration,
      pageController: widget.pageController,
      onPageChanged: onPageChanged,
    )
  );
}

Gallery sample in the example app:

Zoomable PhotoView
Zoomable PhotoView

See the code here.

See also  Card Swipping Feature like Tinder in Flutter

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:

Zoomable PhotoView
Zoomable PhotoView

More screenshots

Custom background, small image and custom alignment

Zoomable PhotoView
Zoomable PhotoView

Limited scale

Zoomable PhotoView
Zoomable PhotoView

Hero animation

Zoomable PhotoView
Zoomable PhotoView

Part of the screen

Zoomable PhotoView
Zoomable PhotoView

Custom child

Zoomable PhotoView
Zoomable PhotoView

Credit

This is developed by bluefireteam
Download this project from the below link.
https://github.com/bluefireteam/photo_view/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/bluefireteam/photo_view

See also  Image Cropping Plugin for Flutter

Spread the love

Leave a Reply