InteractiveViewer does not hide other Widgets when panned - flutter

Question

I used InteractiveViewer here on my ProductDetail Page.
But when I pan and Zoom the image, the other widgets such as buttons and text are coming over it.
Here is my 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<Color>(getColorFromHex('#d1d1d1')),
),
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>(getColorFromHex('#56a8e2')),
),
child: Row(
children: [
Icon(Icons.shopping_bag),
Text("Buy Now", style: TextStyle(fontSize: 18)),
],
),
)
),
],
),
),
],
),
),
);
}
}
How do I hide the other widgets like Text and buttons when I pan or zoom the image with the InteractiveViewer?

Answer 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.
You need to wrap the widgets that you wish to hide with the Visibility widget.
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,
);
}
}