How to Create a Zoomable Image in Flutter?

In Flutter, you can create a zoomable image using the GestureDetector and Transform widgets. The GestureDetector widget can be used to detect pinch gestures on the image, and the Transform widget can be used to apply the zoom transformation to the image.

How to Use:

Container(
    child: PhotoView(
        imageProvider: AssetImage("assets/img.png"),
    )
),

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the dependency to your pubspec.yaml file

From the command line:

flutter pub add photo_view

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Import the package

import 'package:photo_view/photo_view.dart';

Step 3: Import the Material Package

Adding a material package that gives us the important functions and calls the runApp method in the main function that will call our application

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
void main() {
    runApp(RunMyApp());
}

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 4: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut for creating a stateless or Stateful widget:  You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
    const RunMyApp({
        super.key
    });

    @
override
    Widget build(BuildContext context) {
        return MaterialApp();
    }
}

Step 5: Working with Scaffold Widget

Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
    appBar: AppBar(
        title: Text('Zoomable Image'),
    ),
    body:
),

Step 6: Using PhotoView

Now we can simply use the PhotoView widget and assign its parameters imageProvider.

body: Container(
    child: PhotoView(
        imageProvider: AssetImage("assets/img.png"),
    )
),

Complete Code:

Dart

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

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

class RunMyApp extends StatelessWidget {
    const RunMyApp({
        super.key
    });

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            theme: ThemeData(primarySwatch: Colors.green),
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Zoomable Image'),
                ),
                body: Container(
                    child: PhotoView(
                        imageProvider: AssetImage("assets/img.png"),
                    )
                ),
            ),
        );
    }
}

Output: