PhotoView In Flutter

PhotoView enables images to become able to zoom and pan with user gestures such as pinch, rotate and drag. PhotoView in flutter is really easy to implement. Let’s check it out.

PhotoView is a simple zoomable image/content widget for Flutter. It also can show any widget such as a Container, Text, or SVG.

For more Flutter app development, please check out our Flutter app development page.

Add this package in your pubspec for using PhotoView in Flutter: photo_view

Properties:

scrollDirection: This property gives the direction to scroll that we can scroll either horizontally or vertically.
enableRotation: Rotate the image using this property.
physics: This property is used for scrolling. It determines when the user reaches the maximum scroll limit & stops scrolling.
controller: The controller properties are a way to control the change factors of photo view & listen for updates.
maxScale: maxScale property helps in defining the maximum size of the image that will be allowed to take, it is proportional to the original image size.
minScale: This property defines the minimum size of the image that will be allowed to take, it is proportional to the original image size.

Basic PhotoView Widget Usage.

IMPLEMENTATION:

Create a new project & add this dependency:

photo_view: ^0.14.0

1	photo_view: ^0.14.0

Importing:

import 'package:photo_view/photo_view.dart';

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

Now use the PhotoView widget & add an image in the image provider & you can use other properties according to your need.

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: PhotoView(imageProvider: const NetworkImage("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),)

    );
  }

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: PhotoView(imageProvider: const NetworkImage("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),)

);

}

OUTPUT:

PhotoView Gallery:

Use the PhotoViewGallery builder to show, rotate & zoom multiple images.
Loading Builder is used to show a focused circular progress indicator that is called by photo view.
Above mentioned properties are used in the gallery.

CODE:

class _MyHomePageState extends State<MyHomePage> {
  List<String> images = [
    "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
    "https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "https://images.unsplash.com/photo-1552831544-246186664150?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHw%3D&w=1000&q=80"
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: PhotoViewGallery.builder(
          itemCount: 3,
          builder: (BuildContext context, int index) {
            return PhotoViewGalleryPageOptions(
              imageProvider: NetworkImage(images[index]),
              initialScale: PhotoViewComputedScale.contained * 0.8,
              minScale: PhotoViewComputedScale.contained * 0.8,
              maxScale: PhotoViewComputedScale.covered * 2,
              heroAttributes: PhotoViewHeroAttributes(tag: index),

            );
          },
          scrollPhysics: BouncingScrollPhysics(),
          loadingBuilder: (context, event) => Center(
            child: Container(
              width: 20.0,
              height: 20.0,
              child: const CircularProgressIndicator(),
            ),
          ),
          backgroundDecoration: BoxDecoration(
            color: Theme.of(context).canvasColor,
          ),
        )
        

        );
  }
}

class _MyHomePageState extends State<MyHomePage> {

List<String> images = [

"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",

"https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",

"https://images.unsplash.com/photo-1552831544-246186664150?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHw%3D&w=1000&q=80"

];

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: PhotoViewGallery.builder(

itemCount: 3,

builder: (BuildContext context, int index) {

return PhotoViewGalleryPageOptions(

imageProvider: NetworkImage(images[index]),

initialScale: PhotoViewComputedScale.contained * 0.8,

minScale: PhotoViewComputedScale.contained * 0.8,

maxScale: PhotoViewComputedScale.covered * 2,

heroAttributes: PhotoViewHeroAttributes(tag: index),

);

scrollPhysics: BouncingScrollPhysics(),

loadingBuilder: (context, event) => Center(

child: Container(

width: 20.0,

height: 20.0,

child: const CircularProgressIndicator(),

backgroundDecoration: BoxDecoration(

color: Theme.of(context).canvasColor,

)

);

}

OUTPUT:

CONCLUSION:

In this flutter article, I have explained a PhotoView in a flutter, which you can modify and experiment with according to your own, this little introduction was from the PhotoView demo from our side.

Thanks for reading this article ❤

If I got something wrong 🙈, let me know in the comments. I would love to improve.

For more interesting blogs check out here – https://mobikul.com/blog/

nausheen Siddiqui 27 April 2023

. . .

PhotoView In Flutter

Properties:

Basic PhotoView Widget Usage.

OUTPUT:

PhotoView Gallery:

OUTPUT:

CONCLUSION:

Leave a Comment Cancel Reply

Message Sent!