[Flutter] Flutter uses photo_view to implement a picture viewer

Article directory

- I. Introduction
- 2. Introduction to photo_view
- 3. Installation and basic use
- 4. Use PhotoViewGallery to display multiple pictures
- 5. Complete example
- 6. Summary

1. Preface

Hello everyone, I am Xiaoyu Qingnian. Today I want to introduce to you a very practical picture viewer package in Flutter – photo_view.

Highlights of this article include:

Basic introduction to the photo_view package
How to install and use
How to apply it in actual business
Complete code example

Version information: Flutter 3.10, Dart 3.0, photo_view 0.14.0.

This is a blog published by Xiaoyu Youth on CSDN in 2023. Due to the rampant infringement of collection sites, if you did not see this article on CSDN, please contact me through CSDN. Thank you for your support.

Are you eager to become a Flutter master and want to master more cutting-edge techniques and best practices? Now, your chance has come!

Flutter from zero to one: a complete guide from basic entry to application launch We are actively recruiting participants!

? This column not only includes comprehensive Flutter learning resources, but also practical code examples and in-depth analysis tutorials.
? The column content will be continuously updated and the price will increase accordingly. Join now to enjoy the best price and seize your opportunity!
? Want to interact with other Flutter learners? Click here to join our discussion group to grow and improve together.

Don’t wait any longer, let’s start today and start the wonderful learning journey of Flutter together!

2. photo_view introduction

photo_view is a Flutter package that provides a gesture-sensitive resizable widget. You can zoom and pan the image using various gestures such as pinching, rotating, and dragging. In addition to images, it can display any widget, such as Container, Text or SVG.

3. Installation and basic use

First, you need to add photo_view as a dependency in the pubspec.yaml file.

dependencies:
  photo_view: ^0.14.0

Then, import the photo_view package.

import 'package:photo_view/photo_view.dart';

The basic usage is very simple. Given an ImageProvider (such as AssetImage or NetworkImage), you can use it like this:

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

4. Use PhotoViewGallery to display multiple pictures

In some scenarios, we may need to display multiple images and let the user switch between them. photo_view provides a widget called PhotoViewGallery that can help us achieve this functionality.

First, make sure you have imported the necessary packages:

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

Next, you can use PhotoViewGallery.builder to create a picture viewer:

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

5. Complete example

//Import necessary packages
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

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

class MyApp extends StatelessWidget {<!-- -->
  @override
  Widget build(BuildContext context) {<!-- -->
    return MaterialApp(
      title: 'Photo View Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {<!-- -->
  final List<String> imageList = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ];

  @override
  Widget build(BuildContext context) {<!-- -->
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo View Example'),
      ),
      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,
        ),
      ),
    );
  }
}

The running results are as follows:

6. Summary

After the above introduction, I believe everyone has a preliminary understanding of the photo_view package. This package provides us with a powerful and flexible image viewer that not only supports basic zoom and pan functions, but also provides rich customization options and controllers, allowing us to easily apply it in actual business.

Interested in Flutter and eager to explore and learn more? Flutter from zero to one: a complete guide from basic entry to application launch is your perfect starting point!

In this column, you will find a wealth of Flutter learning resources, ranging from code examples to in-depth technical explanations.
? Want to learn how to build great apps with Flutter? All the tips and answers are waiting for you in our column!
Don’t hesitate any longer, the column content will be continuously updated and the price will gradually increase. Join now to enjoy the best price and start your Flutter exploration journey!

Want to know more? Click here to view Flutter Developer 101: Getting Started Booklet & Column Guide.

Also, don’t forget to click here to Join our discussion group to communicate, learn and grow together with other Flutter enthusiasts!