The Issue is similarly in Flutter Github : https://github.com/flutter/flutter/issues/23454 . I have messy problem with Gesture Detector. the method onTap() doesn't give me print out. It's looks like static, however i have put it in stateful widget and I have written it in Stateful Widget which snippet code like below:
class HeaderData extends StatefulWidget {
@override
_HeaderDataState createState() => _HeaderDataState();
}
class _HeaderDataState extends State<HeaderData> {
List<String> lsDummy = ['image1',
'image2',
'image3'
];
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: 250,
child: Swiper(
autoplayDelay: 3000,
itemCount: lsDummy.length,
autoplay: true,
pagination: SwiperPagination(),
itemBuilder: (context, index){
return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
},
),
),
Container(
padding: const EdgeInsets.only(left: 16.0, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 70),
Image(
image: AssetImage('images/travel_logo.png'),
alignment: Alignment.center,
width: 200,
color: Colors.blue,
),
const SizedBox(height: 20.0),
],
),
GestureDetector(
onTap: (){
print('test');
},
child: Container(
padding: EdgeInsets.all(4),
child: Icon(Icons.settings, color: Colors.white,)
)
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 150),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
SizedBox(width: 10,),
Icon(Icons.keyboard_arrow_down, color: Colors.white,)
],
),
),
),
SizedBox(height: 10.0),
],
);
}
}
If we run the apps this widget will render like this picture. Can someone help me why this happened? if you think that this question is unclear let me know. So i can update the question
UPDATE
I have tried the code by using iconButton but still can't trigger print
return Stack(
children: <Widget>[
Container(
height: 250,
child: Swiper(
autoplayDelay: 3000,
itemCount: lsDummy.length,
autoplay: true,
pagination: SwiperPagination(),
itemBuilder: (context, index){
return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
},
),
),
Container(
padding: const EdgeInsets.only(left: 16.0, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 70),
Image(
image: AssetImage('images/travel_logo.png'),
alignment: Alignment.center,
width: 200,
color: Colors.blue,
),
const SizedBox(height: 20.0),
],
),
IconButton(
icon: Icon(Icons.settings, color: Colors.white,),
onPressed: ()=> print('test')
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 150),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
SizedBox(width: 10,),
Icon(Icons.keyboard_arrow_down, color: Colors.white,)
],
),
),
),
SizedBox(height: 10.0),
],
);
UPDATE 2 I made new experiment for this. I try to make dummy container which its above of other widget. Then i set the Gesture Detector. but still i don't reach the print out. Here my code and the picture of widgets. Btw, there are similar question in flutter github, here : https://github.com/flutter/flutter/issues/23454 The ticket issue still open.
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: 250,
child: Swiper(
autoplayDelay: 3000,
itemCount: lsDummy.length,
autoplay: true,
pagination: SwiperPagination(),
itemBuilder: (context, index){
return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
},
),
),
Padding(
padding: const EdgeInsets.only(top: 150),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 50),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
SizedBox(width: 10,),
Icon(Icons.keyboard_arrow_down, color: Colors.white,)
],
),
),
),
Container(
padding: EdgeInsets.only(top: 50),
child: Image(image: AssetImage('images/travel_logo.png'),
alignment: Alignment.center,
width: 200,
color: Colors.blue,),
),
GestureDetector(
onTap: (){
print('teste');
},
child: Container(
width: 100,
height: 100,
color: Colors.grey,
),
)
],
);
}
IgnorePointer? If that's the only clickable section, you might want to do this. I'm not sure If this fit your need. – Tokenyet