Blog

In this tutorial you will look at several Flutter PhotoView examples. We will be mostly exploring third party solutions for implementing several photoview features like zooming, dragging and padding.

(a). PhotoView

PhotoView is a simple zoomable image/content widget for Flutter.

Through this solution you can zoom and pan with gestures such as pinching, rotating and dragging. This widget can also act as a container to other widgets e.g Container, Text or a SVG.

Here is the demo project:

Step 1: Install PhotoView

In your pubspec.yaml add the PhotoView as a dependency:

dependencies:
  photo_view: ^0.12.0

Then flutter pub get to fetch it.

Step 2: Create Simple Zoomable ImageView

Start by importing the photoview:

import 'package:photo_view/photo_view.dart';

Then for simpleusage:

@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

You will get the following:

Step 3: Create a Gallery

You can also create a gallery using PhotoView. A gallery comprises several images. Here is the code for creating a gallery:

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,
    )
  );
}

You wull get the following:

Reference

Find links below:

No.	Link
1.	{Read}(https://github.com/fireslime/photo_view) more
2.	{Follow](https://github.com/fireslime/) code author