How to zoom an image with one click in Flutter

Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers who want to create beautiful and responsive user interfaces across multiple platforms.

Zoom functionality for images

Let’s explore how to implement a zoom functionality for images with just one click. We’ll use the photo_view package to achieve this.

Setting up the project

Follow the steps below to implement the zoom feature in our Flutter application.

Step 1: Create a new flutter project

To create a new Flutter application, open the terminal in the directory where you want to create a new one. Run the following command in the terminal:

flutter create imagezoom
Creating a new Flutter application

Note: Refer to how to create a new Flutter project for detailed guidelines on creating a new flutter project.

Step 2: Install dependencies

Move to the project directory by executing the following command in the terminal.

cd imagezoom
Moving to the project directory

When we are in our project directory, we will install the photo_view dependency in our application, which will help us implement the zoomable feature for images in the application. To install the required dependency, run the following command in the terminal:

flutter pub add photo_view
Installing the photo_view dependency

To check if the dependency is successfully installed, go to the pubspec.yaml file, and we can see photo_view: ^0.14.0 under the dependencies: section, where ^0.14.0 indicates the version of the dependency installed.

Step 3: Create a zoomable image screen

Now, we will create a new file named imagezoomscreen.dart inside the lib/ directory. Inside this, we will add a variable named imageUrl, which contains the link to the image to be displayed. The code is given below: 

final String imageUrl = 'https://images.unsplash.com/photo-1589998059171-988d887df646?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80';
Link of image to be displayed

We will display this image using the following code:

Image.network(
    imageUrl,
    width: 200,
    height: 200,
),
Displaying a network image

We will make this Image.network clickable by using GestureDetector widget, which, when clicked, uses the PhotoView widget to zoom the image. We will also make the PhotoView widget clickable, which will take us back to the original image when we click the zoomed image. The code is implemented here:

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: PhotoView(
            backgroundDecoration:
                BoxDecoration(color: Colors.white),
            customSize: Size.fromWidth(500),
            imageProvider: NetworkImage(imageUrl),
          ),
        ),
      ),
    );
  },
  child: Image.network(
    imageUrl,
    width: 200,
    height: 200,
  ),
),

Step 4: Navigate to ImageZoomScreen

We will navigate to the ImageZoomScreen in the imagezoomscreen.dart file from the main.dart file using the following command in main.dart file:

MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
    ),
    home: ImageZoomScreen()
);
Navigating to ImageZoomScreen

Code implementation in the application

Following is the complete code of the Flutter application with the implementation of a zoomable image screen:

IyBUaGlzIGZpbGUgY29uZmlndXJlcyB0aGUgYW5hbHl6ZXIsIHdoaWNoIHN0YXRpY2FsbHkgYW5hbHl6ZXMgRGFydCBjb2RlIHRvCiMgY2hlY2sgZm9yIGVycm9ycywgd2FybmluZ3MsIGFuZCBsaW50cy4KIwojIFRoZSBpc3N1ZXMgaWRlbnRpZmllZCBieSB0aGUgYW5hbHl6ZXIgYXJlIHN1cmZhY2VkIGluIHRoZSBVSSBvZiBEYXJ0LWVuYWJsZWQKIyBJREVzIChodHRwczovL2RhcnQuZGV2L3Rvb2xzI2lkZXMtYW5kLWVkaXRvcnMpLiBUaGUgYW5hbHl6ZXIgY2FuIGFsc28gYmUKIyBpbnZva2VkIGZyb20gdGhlIGNvbW1hbmQgbGluZSBieSBydW5uaW5nIGBmbHV0dGVyIGFuYWx5emVgLgoKIyBUaGUgZm9sbG93aW5nIGxpbmUgYWN0aXZhdGVzIGEgc2V0IG9mIHJlY29tbWVuZGVkIGxpbnRzIGZvciBGbHV0dGVyIGFwcHMsCiMgcGFja2FnZXMsIGFuZCBwbHVnaW5zIGRlc2lnbmVkIHRvIGVuY291cmFnZSBnb29kIGNvZGluZyBwcmFjdGljZXMuCmluY2x1ZGU6IHBhY2thZ2U6Zmx1dHRlcl9saW50cy9mbHV0dGVyLnlhbWwKCmxpbnRlcjoKICAjIFRoZSBsaW50IHJ1bGVzIGFwcGxpZWQgdG8gdGhpcyBwcm9qZWN0IGNhbiBiZSBjdXN0b21pemVkIGluIHRoZQogICMgc2VjdGlvbiBiZWxvdyB0byBkaXNhYmxlIHJ1bGVzIGZyb20gdGhlIGBwYWNrYWdlOmZsdXR0ZXJfbGludHMvZmx1dHRlci55YW1sYAogICMgaW5jbHVkZWQgYWJvdmUgb3IgdG8gZW5hYmxlIGFkZGl0aW9uYWwgcnVsZXMuIEEgbGlzdCBvZiBhbGwgYXZhaWxhYmxlIGxpbnRzCiAgIyBhbmQgdGhlaXIgZG9jdW1lbnRhdGlvbiBpcyBwdWJsaXNoZWQgYXQKICAjIGh0dHBzOi8vZGFydC1sYW5nLmdpdGh1Yi5pby9saW50ZXIvbGludHMvaW5kZXguaHRtbC4KICAjCiAgIyBJbnN0ZWFkIG9mIGRpc2FibGluZyBhIGxpbnQgcnVsZSBmb3IgdGhlIGVudGlyZSBwcm9qZWN0IGluIHRoZQogICMgc2VjdGlvbiBiZWxvdywgaXQgY2FuIGFsc28gYmUgc3VwcHJlc3NlZCBmb3IgYSBzaW5nbGUgbGluZSBvZiBjb2RlCiAgIyBvciBhIHNwZWNpZmljIGRhcnQgZmlsZSBieSB1c2luZyB0aGUgYC8vIGlnbm9yZTogbmFtZV9vZl9saW50YCBhbmQKICAjIGAvLyBpZ25vcmVfZm9yX2ZpbGU6IG5hbWVfb2ZfbGludGAgc3ludGF4IG9uIHRoZSBsaW5lIG9yIGluIHRoZSBmaWxlCiAgIyBwcm9kdWNpbmcgdGhlIGxpbnQuCiAgcnVsZXM6CiAgICAjIGF2b2lkX3ByaW50OiBmYWxzZSAgIyBVbmNvbW1lbnQgdG8gZGlzYWJsZSB0aGUgYGF2b2lkX3ByaW50YCBydWxlCiAgICAjIHByZWZlcl9zaW5nbGVfcXVvdGVzOiB0cnVlICAjIFVuY29tbWVudCB0byBlbmFibGUgdGhlIGBwcmVmZXJfc2luZ2xlX3F1b3Rlc2AgcnVsZQoKIyBBZGRpdGlvbmFsIGluZm9ybWF0aW9uIGFib3V0IHRoaXMgZmlsZSBjYW4gYmUgZm91bmQgYXQKIyBodHRwczovL2RhcnQuZGV2L2d1aWRlcy9sYW5ndWFnZS9hbmFseXNpcy1vcHRpb25zCg==
Implementation of complete application

Note: You can find your application running at the given link once you run the code widget above.

Code explanation

This Flutter code creates an application screen called ImageZoomScreen. It imports essential Flutter packages for building the UI and implementing image zoom functionality. The screen consists of an app bar with the title “Zoom Image” and a column containing a text explanation and an image. When users tap the image, it navigates to a new screen using the photo_view package, where they can zoom in on the image. A second tap returns them to the original screen.

Other ways to zoom an image

Some other ways to zoom an image in Flutter are discussed below:

  • We can also pinch and zoom on an image on the screen, which zooms the image to the scale we want. It is the functionality of allowing users to perform a pinch gesture (typically using two fingers) on an image displayed on the screen. This pinch gesture is a common interaction pattern used in touchscreen interfaces to zoom in or out on content.

  • We can also show several images and let the user change between them. Each of the images can be zoomed in. We can also change images when they are zoomed. This is basically an image gallery with the feature of zooming in and out.


Free Resources

Copyright ©2025 Educative, Inc. All rights reserved