Flutter Photo View | Image Zoom like Gallery App

Published February 02, 2021

In many application there is a lots of images in the Gallery, and now user wants to see the image in full mode. How to make image in full mode like zoom option. So How to make Image zoom option like gallery app.

In this example we are covering this Image Zoom option with photo_view library.

Photo_view is a zoomable image/content widget for Flutter.

PhotoView enables images to become able to zoom and pan with user gestures such as pinch, rotate and drag.

It also can show any widget instead of an image, such as Container, Text or a SVG.

Even though being super simple to use, PhotoView is extremely customizable though its options and the controllers

Let's get started

Step 1: Create Flutter Application

Step 2: Add photo_view library in pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  photo_view:

Step 3: Import photo_view classes in the main dart file

import 'package:photo_view/photo_view_gallery.dart';

Step 4: Add photo_view widget and pass our images to this widget

PhotoViewGallery.builder(
  itemCount: imageList.length,
  builder: (context, index) {
    return PhotoViewGalleryPageOptions(
      basePosition: Alignment.center,
      imageProvider: NetworkImage(imageList[index]),
      minScale: PhotoViewComputedScale.contained * 0.8,
      maxScale: PhotoViewComputedScale.covered * 2,
    );
  },
  scrollPhysics: BouncingScrollPhysics(),
  backgroundDecoration: BoxDecoration(
    color: Theme.of(context).canvasColor,
  ),

),

It will create the list of items with PhotoViewGallery.builder

We can set the options for the image like scaling image minscale, max scale

PhotoViewGalleryPageOptions({
  Key key,
  @required this.imageProvider,
  this.heroAttributes,
  this.minScale,
  this.maxScale,
  this.initialScale,
  this.controller,
  this.scaleStateController,
  this.basePosition,
  this.scaleStateCycle,
  this.onTapUp,
  this.onTapDown,
  this.gestureDetectorBehavior,
  this.tightMode,
  this.filterQuality,
  this.disableGestures,
})

$Flutter Image Zoom options \ gallery App Photo View$

Complete code

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  final imageList = [
    'https://iso.500px.com/wp-content/uploads/2016/03/stock-photo-142984111.jpg',
    'https://image.shutterstock.com/image-photo/3d-wallpaper-design-waterfall-sea-260nw-1380925703.jpg',
    'https://m.economictimes.com/thumb/msid-68721417,width-1200,height-900,resizemode-4,imgsize-1016106/nature1_gettyimages.jpg',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQus9rtXGG06QBn-Q13zk5oWKr-ryngXbTW-g&usqp=CAU',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyP2vktrvo9rlhz4jQDnSsI-D-WL92iX36Ig&usqp=CAU',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Gallery View  Zoomable widget"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
        child: Center(
          child: Container(
            height: 300,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                elevation: 20,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: PhotoViewGallery.builder(
                    itemCount: imageList.length,
                    builder: (context, index) {
                      return PhotoViewGalleryPageOptions(
                        basePosition: Alignment.center,
                        imageProvider: NetworkImage(imageList[index]),
                        minScale: PhotoViewComputedScale.contained * 0.8,
                        maxScale: PhotoViewComputedScale.covered * 2,
                      );
                    },
                    scrollPhysics: BouncingScrollPhysics(),
                    backgroundDecoration: BoxDecoration(
                      color: Theme.of(context).canvasColor,
                    ),

                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Article Contributed By :

5157 Views