PhotoView InFlutter

In this article, we will explore the PhotoView in flutter using the fluter_photo_view_package. With the help of the package, we can easily achieve flutter animated Swiper. So let’s get started.

photo_view | Flutter Package
A simple zoomable image/content widget for Flutter. PhotoView enables images to become able to zoom and pan with user…pub.dev

Table Of Contents :

Flutter

PhotoView

Implementation

Code Implement

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ,Flutter offers great developer tools, with amazing hot reload”

PhotoView :

Photo View Widget in Flutter is a simple zoomable image or any content widget in flutter application development. Users of the app can rotate and zoom the image. The package provides a loading property that we use for the time it takes for any image until then the loading indicator will rotate. Let us understand the properties in detail.

Some Basic Properties:

1. scrollDirection: The scroll direction property is to give the direction of the scroll that we can scroll the list in the vertical or horizontal direction.
2. enableRotation: The enable rotation property is used to rotate the image, it is a type of bool.
3. physics: We use the Physics property to do scrolling. It determines when the user reaches the maximum scroll limit or stops scrolling.
4. controller: The Controller properties are a way to control the change factors of PhotoView and listen for its updates.
5. backgroundDecoration: The index property is the index number of the initial slide that initiates the slide and updates the previous index.
6. loadingBuilder: The loadingBuilder property is a focused circular progress indicator that is called by photoview into the screen the image.
7. maxScale: The maxScale property defines the maximum size of the image in which the image will be allowed to take, it is proportional to the original image size.
8. minScale: The minScale property defines the maximum size of the image in which the image will be allowed to take, it is proportional to the original image size.

Demo Module :

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :

dependencies:   
photo_view: ^0.11.0

Step 2: Importing

import 'package:photo_view/photo_view.dart';

Step 3: Run flutter package get

Code Implementation :

Create a new dart file called photo_view_demo.dart inside the lib folder.

First of all, we have created a list of the image.

final imageList = [
  'assets/images/villa_img2.jpg',
  'assets/images/resort_1.jpg',
  'assets/images/resort_3.jpg',
  'assets/images/getRadyForSummer.jpg',
];

Before using the PhotoView widget we created a container inside which the PhotoViewGallery.builder class is used. This class will create an image list. Inside the builder class is the PhotoViewGalaryPageOptions class, which has set the scale of the image and the type of enableRotation is true which we image can rotate.

PhotoViewGallery.builder(
  itemCount: imageList.length,
  builder: (context, index) {
    return PhotoViewGalleryPageOptions(
      imageProvider:AssetImage(imageList[index],),
      minScale: PhotoViewComputedScale.contained * 0.8,
      maxScale: PhotoViewComputedScale.covered * 2,
    );
  },
  scrollPhysics: BouncingScrollPhysics(),
  backgroundDecoration: BoxDecoration(
    borderRadius:BorderRadius.all(Radius.circular(20)),
    color: Theme.of(context).canvasColor,
  ),
  enableRotation:true,
  loadingBuilder: (context, event) => Center(
    child: Container(
      width: 30.0,
      height: 30.0,
      child: CircularProgressIndicator(
        backgroundColor:Colors.orange,
        value: event == null
            ? 0
            : event.cumulativeBytesLoaded / event.expectedTotalBytes,
      ),
    ),
  ),
),

These are snapshots image after running the app.

When we run the application and rotate the image, this kind of output appears on the screen.

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_photo_view_demo/themes/device_size.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewDemo extends StatefulWidget {
  @override
  _PhotoViewDemoState createState() => _PhotoViewDemoState();
}

class _PhotoViewDemoState extends State<PhotoViewDemo> {
  final imageList = [
    'assets/images/villa_img2.jpg',
    'assets/images/resort_1.jpg',
    'assets/images/resort_3.jpg',
    'assets/images/getRadyForSummer.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PhotoView Demo"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
        height: DeviceSize.height(context),
        margin: EdgeInsets.only(left: 15, right: 15),
        width: DeviceSize.width(context),
        child: PhotoViewGallery.builder(
          itemCount: imageList.length,
          builder: (context, index) {
            return PhotoViewGalleryPageOptions(
              imageProvider: AssetImage(
                imageList[index],
              ),
              minScale: PhotoViewComputedScale.contained * 0.8,
              maxScale: PhotoViewComputedScale.covered * 2,
            );
          },
          scrollPhysics: BouncingScrollPhysics(),
          backgroundDecoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Theme.of(context).canvasColor,
          ),
          enableRotation: true,
          loadingBuilder: (context, event) => Center(
            child: Container(
              width: 30.0,
              height: 30.0,
              child: CircularProgressIndicator(
                backgroundColor: Colors.orange,
                value: event == null
                    ? 0
                    : event.cumulativeBytesLoaded / event.expectedTotalBytes,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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.

I hope this blog will provide you with sufficient information in Trying up the PhotoView in your flutter project. We will show you the PhotoView is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.