Flutter – Zoom In and Zoom Out an Image

In this article we are using the InteractiveViewer widget in Flutter allows you to create interactive and zoomable widgets. It’s commonly used for displaying images, maps, or any content that the user can zoom, and interact with. In this article, we are going to implement the InteractiveViewer widget. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of InteractiveViewer Widget

InteractiveViewer(
  child: YourChildWidget(),
  boundaryMargin: EdgeInsets.all(0.0), // Optional: Margin around the content
  minScale: 1.0,  // Optional: Minimum scale (zoom out)
  maxScale: 3.0,  // Optional: Maximum scale (zoom in)
  scaleEnabled: true,  // Optional: Allow scaling (zooming)
  panEnabled: true,    // Optional: Allow panning (dragging)
  alignPanAxis: false, // Optional: Align panning to one axis
)

Required Tools

To build this app, you need the following items installed on your machine:

• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

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: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() => runApp(MyApp());

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp, here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: InteractiveViewerExample(),
    );
  }
}

Step 5: Create InteractiveViewerExample Class

In this class we are going to Implement the InteractiveViewer widget. Here we use the InteractiveViewer widget to wrap an Image.network widget. Here We set various properties of InteractiveViewer:

• boundaryMargin: Defines the margin around the content within the InteractiveViewer.
• minScale: Specifies the minimum scale (zoom out).
• maxScale: Specifies the maximum scale (zoom in).

Comments are added for better understanding.

InteractiveViewer(
          boundaryMargin: EdgeInsets.all(20.0), // Margin around the content
          minScale: 0.5, // Minimum scale (zoom out)
          maxScale: 2.0, // Maximum scale (zoom in)
          child: Image.network(
            'https://yt3.googleusercontent.com/ytc/APkrFKZjMrx4Pkr0_ZgCnLe2kDYI8K332WXs6lc2yIk5Zw=s900-c-k-c0x00ffffff-no-rj', 
            width: 300.0, // Width of the initial image
            height: 300.0, // Height of the initial image
            fit: BoxFit.cover, // BoxFit to fill the available space
          ),
        ),

Dart

class InteractiveViewerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InteractiveViewer Example'),
      ),
      body: Center(
        child: InteractiveViewer(
          boundaryMargin: EdgeInsets.all(20.0), // Margin around the content
          minScale: 0.5, // Minimum scale (zoom out)
          maxScale: 2.0, // Maximum scale (zoom in)
          child: Image.network(
            'https://yt3.googleusercontent.com/ytc/APkrFKZjMrx4Pkr0_ZgCnLe2kDYI8K332WXs6lc2yIk5Zw=s900-c-k-c0x00ffffff-no-rj',
            width: 300.0, // Width of the initial image
            height: 300.0, // Height of the initial image
            fit: BoxFit.cover, // BoxFit to fill the available space
          ),
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: InteractiveViewerExample(),
    );
  }
}

class InteractiveViewerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InteractiveViewer Example'),
      ),
      body: Center(
        child: InteractiveViewer(
          boundaryMargin: EdgeInsets.all(20.0), // Margin around the content
          minScale: 0.5, // Minimum scale (zoom out)
          maxScale: 2.0, // Maximum scale (zoom in)
          child: Image.network(
            'https://yt3.googleusercontent.com/ytc/APkrFKZjMrx4Pkr0_ZgCnLe2kDYI8K332WXs6lc2yIk5Zw=s900-c-k-c0x00ffffff-no-rj',
            width: 300.0, // Width of the initial image
            height: 300.0, // Height of the initial image
            fit: BoxFit.cover, // BoxFit to fill the available space
          ),
        ),
      ),
    );
  }
}

Output: