Enlarge Image – Zoom in Zoom out image in flutter

Zoom in and zoom out is an important feature that should be in mobile apps. This is particularly important for media apps, art galleries, or photography platforms. In this tutorial we will learn how to zoom image in Flutter applications.

 Zooming enables users to explore images more closely. By zooming, they can examine details that may not be visible at normal sizes. This is crucial in applications like e-commerce, where users need to inspect products closely before making a purchase.

 Enlarging images improves the overall viewing experience, especially on smaller screens. Incorporating zoom features can increase user engagement by providing an interactive element within the app. Users tend to spend more time exploring and interacting with content when they have control over the zoom level.

Zoom Image in Flutter

In flutter we can zoom in images in several ways. Toady we will explore the two methods of enlarging image in Flutter that are mostly used.

Method 1: Zoom image Using InteractiveViewer

Let’s display an image using InteractiveViewer.

InteractiveViewer(
  panEnabled: false, // Set it to false
  boundaryMargin: EdgeInsets.all(100),
  minScale: 0.5,
  maxScale: 2,
  child: Image.network(
    imageUrl,
    width: double.infinity,
    height: 400,
    fit: BoxFit.cover,
  ),
)

In this example, the InteractiveViewer wraps an Image.network widget, allowing us to pan and zoom the image within the constraints set by minScale and maxScale. We can replace the Image.network widget with any other widget that we want to make interactive.

InteractiveViewer Widget in Flutter

InteractiveViewer is a widget that allows us to interactively pan, zoom, and drag its child widget within the viewport. It’s particularly useful for implementing functionalities like zooming and panning images or other content within our app.

The InteractiveViewer widget provides various properties to control its behavior, such as:

child: This property holds the widget that can be panned, zoomed, or dragged within the InteractiveViewer.

boundaryMargin: Defines the minimum margin by which the child widget can be dragged beyond the viewport’s edges.

scaleEnabled: Enables or disables the scaling (zooming) functionality.

panEnabled: Enables or disables the panning functionality.

maxScale: Defines the maximum allowed scale for the child widget within the InteractiveViewer.

minScale: Defines the minimum allowed scale for the child widget within the InteractiveViewer

Output

Method 2: Zoom in Image Using photoView package

PhotoView(
  imageProvider: NetworkImage(imageUrl),
)

PhotoView is a powerful package. It provides zooming functionality for Widgets in Flutter.

Features:

1- Enables zoom and pan actions on images or content through user gestures.

2- Supports displaying various widgets beyond images, including Containers, Text, or SVGs.

3- Highly customizable with multiple options and controllers, providing extensive flexibility for tailored implementations.

4- PhotoView stands out for its simplicity in usage while offering extensive customization options, empowering developers to create engaging and interactive experiences within their Flutter applications.

Output

You can also read three ways to fit image in whole screen in flutter