Introduction

In Flutter, you can add a zoomable image viewer to allow users to view images with zoom and pan functionality, providing a more interactive and immersive experience. In this tutorial, you will learn how to implement a zoomable image viewer in your Flutter app.

Content

To implement a zoomable image viewer in Flutter, follow these steps:

Step 1.Import Packages:

Import the necessary packages in your Dart file:

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';

Create a widget that includes the PhotoView widget, which provides zoom and pan functionality for the image viewer. Customize the properties of the PhotoView widget to control the behavior and appearance of the zoomable image viewer.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Zoomable Image Viewer'),
    ),
    body: Center(
      child: PhotoView(
        imageProvider: AssetImage('path/to/image.jpg'),
        minScale: PhotoViewComputedScale.contained * 0.8,
        maxScale: PhotoViewComputedScale.covered * 2,
      ),
    ),
  );
}

Replace 'path/to/image.jpg' with the actual path to your image file. Customize the minScale and maxScale properties to define the minimum and maximum zoom levels for the image viewer.

Step 3.Add Gesture Detection:

By default, the PhotoView widget supports gestures for zooming and panning. Users can pinch to zoom, double-tap to zoom in or out, and swipe to pan the image. No additional code is required to enable these gestures.

Step 4.Run the app:

Save the changes and run the app using the following command in the terminal:

flutter run

Sample code

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zoomable Image Viewer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ZoomableImageViewer(),
    );
  }
}

class ZoomableImageViewer extends StatelessWidget {
  final String imageUrl =
      'https://images.pexels.com/photos/221179/pexels-photo-221179.jpeg?auto=compress&cs=tinysrgb&w=400';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 1,
        title: Text('Zoomable Image Viewer'),
      ),
      body: Center(
        child: PhotoView(
          filterQuality: FilterQuality.high,
          enableRotation: true,
          
          backgroundDecoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadiusDirectional.circular(10)),
          imageProvider: NetworkImage(imageUrl),
          minScale: PhotoViewComputedScale.contained * 0.9,
          maxScale: PhotoViewComputedScale.covered * 2,
          initialScale: PhotoViewComputedScale.contained,
        ),
      ),
    );
  }
}

Output

Conclusion

By following these steps, you can easily implement a zoomable image viewer in Flutter using the PhotoView widget. Enable users to view images with zoom and pan functionality, providing an enhanced user experience in your Flutter app.