InteractiveViewer does not hide other Widgets when panned

1. InteractiveViewer has two properties onInteractionStart and onInteractionEnd.

onInteractionStart → void Function(ScaleStartDetails details) : Called when the user begins a pan or scale gesture on the widget.

onInteractionEnd → void Function(ScaleEndDetails details) : Called when the user ends a pan or scale gesture on the widget.

2. You need to wrap the widgets that you wish to hide with the Visibility widget.
3. You can set - reset the visibility of the widgets wrapped under Visibility widget when user starts (onInteractionStart) and stops to pan or scale (onInteractionEnd).

Please see the code below, I had to make some changes to make it work :

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

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ProductDetail(),
      ),
    );
  }
}

class ProductDetail extends StatefulWidget {
  ProductDetail({products});

  @override
  _ProductDetailState createState() => _ProductDetailState();
}

class _ProductDetailState extends State<ProductDetail> {
  bool _visible = true;
  TransformationController controller = TransformationController();

  final Products products = Products(
      id: 10,
      imageUrl:
          "https://cdn.pixabay.com/photo/2020/10/01/17/11/temple-5619197_960_720.jpg",
      price: 20.00);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Column(
          children: [
            SizedBox(height: 20),
            SizedBox(
              height: 300,
              width: MediaQuery.of(context).size.width - 20,
              child: InteractiveViewer(
                transformationController: controller,
                onInteractionStart: (scale) {
                  setState(() => _visible = false);
                },
                onInteractionEnd: (scale) {
                  setState(() {
                     controller.value = Matrix4.identity();
                     _visible = true;
                  });
                },
                child: Hero(
                  tag: products.id,
                  child: Carousel(
                    autoplay: false,
                    boxFit: BoxFit.cover,
                    dotBgColor: Colors.transparent,
                    dotColor: Colors.black.withOpacity(0.5),
                    images: [
                      NetworkImage(products.imageUrl),
                      NetworkImage(products.imageUrl),
                      NetworkImage(products.imageUrl),
                    ],
                  ),
                ),
              ),
            ),
            Visibility(
              visible: _visible,
              child: SizedBox(
                width: MediaQuery.of(context).size.width - 20,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      Text(
                        '₹ ${products.price.toString()}',
                        style: TextStyle(
                            fontSize: 25, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        '₹ ${products.price.toString()}',
                        style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Visibility(
              visible: _visible,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    SizedBox(
                        child: ElevatedButton(
                      onPressed: () {},
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.cyanAccent),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Icon(Icons.add_shopping_cart),
                          Text("Add to Cart", style: TextStyle(fontSize: 18)),
                        ],
                      ),
                    )),
                    SizedBox(
                        child: ElevatedButton(
                      onPressed: () {},
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.limeAccent),
                      ),
                      child: Row(
                        children: [
                          Icon(Icons.shopping_bag),
                          Text("Buy Now", style: TextStyle(fontSize: 18)),
                        ],
                      ),
                    )),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Products {
  final int id;
  final String imageUrl;
  final double price;
  Products({
    this.id,
    this.imageUrl,
    this.price,
  });

  Products copyWith({
    int id,
    String imageUrl,
    double price,
  }) {
    return Products(
      id: id ?? this.id,
      imageUrl: imageUrl ?? this.imageUrl,
      price: price ?? this.price,
    );
  }
}