title: InteractiveViewer does not hide other Widgets when panned
body: <p>I used InteractiveViewer here on my ProductDetail Page.</p>
  <p><a href="https://i.stack.imgur.com/iZB6m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iZB6m.png" alt="enter image description here" /></a></p>
  <p>But when I pan and Zoom the image, the other widgets such as buttons and text are coming over it.</p>
  <p><a href="https://i.stack.imgur.com/dCrhh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dCrhh.png" alt="enter image description here" /></a></p>
  <p>Here is my code:</p>
  <pre><code>class ProductDetail extends StatelessWidget {
    final Product product;
    ProductDetail({this.product});
  
    @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(
                  child: Hero(
                      tag: product.id,
                      child: Carousel(
                          autoplay: false,
                          boxFit: BoxFit.cover,
                          dotBgColor: Colors.transparent,
                          dotColor: Colors.black.withOpacity(0.5),
                          images: [
                            AssetImage(product.imageUrl),
                            AssetImage(product.imageUrl),
                            AssetImage(product.imageUrl),
                        ],
                      ),
                  ),
                ),
              ),
              SizedBox(
                  width: MediaQuery.of(context).size.width -20,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Text(
                          '₹ ${product.price}',
                          style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                        ),
                        Text(
                          '₹ ${product.price}',
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              decoration: TextDecoration.lineThrough,
                              color: Colors.grey
                          ),
                        ),
                      ],
                    ),
                  ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    SizedBox(
                        child: ElevatedButton(
                          onPressed: () {},
                          style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all&lt;Color&gt;(getColorFromHex('#d1d1d1')),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Icon(Icons.add_shopping_cart),
                              Text(&quot;Add to Cart&quot;, style: TextStyle(fontSize: 18)),
                            ],
                          ),
                        )
                    ),
                    SizedBox(
                      child: ElevatedButton(
                        onPressed: () {},
                        style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all&lt;Color&gt;(getColorFromHex('#56a8e2')),
                        ),
                        child: Row(
                          children: [
                            Icon(Icons.shopping_bag),
                            Text(&quot;Buy Now&quot;, style: TextStyle(fontSize: 18)),
                          ],
                        ),
                      )
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>How do I hide the other widgets like Text and buttons when I pan or zoom the image with the InteractiveViewer?</p>