Guide to using PhotoViewGallery in Flutter

introduce

PhotoViewGallery in Flutter is a powerful plug-in for displaying scalable images in applications. Whether you are building an image browser, a photo album application, or a scene where you need to view large images in your application, PhotoViewGallery is a good choice.

Add dependencies

First, you need to add the dependency of the photo_view plug-in in the pubspec.yaml file. Open the file and add in the dependencies section:

dependencies:
  #https://pub.dev/packages/photo_view
  photo_view: ^0.13.0

After saving the file, run flutter packages get in the terminal to get the dependencies.

Import library

Importphoto_viewLibrary in your Dart file:

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

Create data source

Prepare a data source containing image information. A list containing links to images, for example:

List<String> imageUrls = [
      "https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=600",
      "https://ts3.cn.mm.bing.net/th?id=OIP-C.bVb769JBdzVZYuksxZ2Y-AHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2",
      "https://ts3.cn.mm.bing.net/th?id=OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2",
    ];

CreatePhotoViewGallery

Use PhotoViewGallery to encapsulate the data source and specify some configuration options:

class MyGallery extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: PhotoViewGallery.builder(
        itemCount: imageList.length,
        builder: (context, index) {
    
    
          return PhotoViewGalleryPageOptions(
            imageProvider: NetworkImage(imageList[index]),
            minScale: PhotoViewComputedScale.contained * 0.8,
            maxScale: PhotoViewComputedScale.covered * 2,
          );
        },
        scrollPhysics: BouncingScrollPhysics(),
        backgroundDecoration: BoxDecoration(
          color: Colors.black,
        ),
        pageController: PageController(),
        onPageChanged: (index) {
    
    
          // 处理页面切换
        },
      ),
    );
  }
}

Introduction to PhotoViewGallery properties

In PhotoViewGallery, many properties can be set to customize its behavior and appearance. Here are some common properties:

• itemCount: The length of the data source, that is, the number of pictures.
• builder: Construct a callback function for each page and return a PhotoViewGalleryPageOptions object.
• scrollPhysics: The physical effect of sliding.
• backgroundDecoration: Background decoration, you can set colors, pictures, etc.
• pageController: Controller for controlling page numbers.
• onPageChanged: Callback function when the page number changes.
• loadingBuilder: Used to customize the widget when loading.

Introduction to PhotoViewGalleryPageOptions

PhotoViewGalleryPageOptions is a class in the photo_view library, used to configure the properties of each page in PhotoViewGallery. By using this class, you can personalize settings for each image, including image provider, minimum zoom ratio, maximum zoom ratio, etc.

Main attributes:

• imageProvider: This is a required attribute that specifies the provider of the image. It can be various image providers, such as NetworkImage, AssetImage, etc. You need to pass a specific image provider instance to this attribute.

imageProvider: NetworkImage("https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=600"),

• minScale: Used to set the minimum zoom ratio of the image. The default value is PhotoViewComputedScale.contained * 0.8. You can adjust this value as needed to ensure that the image is zoomed out to the appropriate size when viewing it.

minScale: PhotoViewComputedScale.contained * 0.5,

• maxScale: Used to set the maximum zoom ratio of the image. The default value is PhotoViewComputedScale.covered * 2. This determines the maximum size to which the image can be enlarged.

maxScale: PhotoViewComputedScale.covered * 3,

• heroTag: An optional attribute used to support shared element transitions (Hero Animation) when switching pages. By setting the same heroTag for PhotoViewGallery on different pages, you can create a smooth transition effect.

heroTag: "heroTagForImage1",

• backgroundDecoration: Used to set the background decoration of each page, which can be color, gradient color, picture, etc. Default is transparent.

backgroundDecoration: BoxDecoration(
  color: Colors.black,
),

• basePosition: A PhotoViewPosition object used to set the initial position of the page. This allows you to position the page at a specified location on initial load.

basePosition: PhotoViewPosition(1.0, Offset(0.5, 0.5)),

• onTapUp: A callback function that is triggered when the user performs a tap on the image. You can handle click events here, such as closing the image browser.

onTapUp: (context, details, controllerValue) {
    
    
  Navigator.pop(context);
},

For more information, please refer to:
Flutter scalable image component photo_view
Preview large images and support saving photo albums