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:

Image picker flutter example - How to pick image from camera or gallery in flutter with example

Image picker flutter example - How ...
Image picker flutter example - How to pick image from camera or gallery in flutter with example
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