I got an issue with RaisedButton when using it inside a Positioned widget.
The problem is when I used RaisedButton inside Positioned widget, onPressed event didn't trigger when clicking on RaisedButton child, but when I clicked on another space of RaisedButton It worked.
Note that It works fine in normal situations and It happened when using RaisedButton inside Positioned widget.
here is my widget :
Positioned(
child: Center(
child: SizedBox(
width: 80,
height: 65,
child: RaisedButton(
padding: EdgeInsets.all(0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
color: Colors.green,
child: Icon(Icons.message, size: 50, color: Colors.white,),
// When I clicked on this icon, onPressed didn't triggered. but when I click on another space of button it triggered.
onPressed: () {
print('Hello world from onPressed');
},
),
),
),
top: -30,
left: 0,
right: 0,
)
what's your idea to fix this problem ?
The short answer is:
Flutter doesn't trigger push events for items that overlap the bounds of the stack (this is what you do when you set top to -30).
The reason behind this could be found here: Document that widgets in the overflow of stack do not respond to gestures
A possible solution for you is to move all the other items for 30.0 lower, so you can place the button inside the stack.
A solution to this problem is by wrapping the stack in a gesture detector and add what do you want to add in onpressed of the raised button in the ontap property of the gesture detector
Related
As far as I know, due to this question Flutter AbsorbPointer vs IgnorePointer difference , AbsorbPointer will absorb tap event and other widgets below it will not receive tap event, but when I use AbsorbPointer like this. it still pass tap event to its parent:
GestureDetector(
onTap: () {
print('123'); // This still call when I tap on red container
},
child: Container(
color: Colors.green,
width: 300,
height: 300,
child: Center(
child: AbsorbPointer(
absorbing: true,
child: GestureDetector(
onTap: () {
print('567');
},
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
),
),
),
)
So my question is does AbsorbPointer only work with widget same level in Stack and doesn't work with its parent?
In your code absorbing property having true value. which means your red container is not clickable. so parent green container have tapped. Incase if you change absorbing property to false, red container can able to tap.
Gesture Detector isn't working - why not?
print or Navigator not working
GestureDetector(
onTap: () {
... ;
},
child: Container(
color: Colors.white,
width: 170,
height: 60,
child:...
),
),
Often times, this is because your GestureDetector is a child of another Widget that has an onTap property. For example, if you give an ElevatedButton a child of GestureDetector, this GestureDetector's onTap is never reached, due to the ElevatedButton overruling its onTap property.
I am writing a flutter app where i want create boxes like grid and each can be click to navigate on different screen.
Similar to below example
I am a beginner, how can i achieve this. Can you please share some pointer. I went through Documentation but if you can help me with what to search for I can read. or if you can share some exmaple.
You can wrap each box widget with an inkwell and add an onTap to it where you can call the navigation ie:
InkWell(
onTap: () => Navigator.of(context).pop(false),
child: Container(
height: 25.0,
width: 80.0,
child: Text('CANCEL'),
),
InkWell
Gesture Detector
I have created this page.
I have made some navigation by routes. But the problem is I want to change the position of my IconButton to the Center bottom of the page. That's why I am using the alignment parameter but as soon as I use that parameter my navigation stops working. But my Icon comes to my desired location but onPress function stop working.
I have the alignment code in the image.
Please guide what's wrong.
Thanks
Entire Code
Container(
width: 100,
height: 100,
alignment: Alignment(0, 50),
child: IconButton(
icon: Icon(Icons.play_circle_filled),
color: Colors.yellow[900],
iconSize: 80,
onPressed: () {
Navigator.pushNamed(context, '/Second');
}),
Highlighted alignment codes
body: InkWell(
onTap: (){
print("optap");
},
child: Container(
width: 100,
height: 200,
color: Colors.red,
margin: EdgeInsets.fromLTRB(100, 200, 0, 0),
),
)
Container has a Margin. A InkWell wrapped the container, when I clicked the margin area of the container, the "onTap" method will call, why? I change the InkWell to GestureDector, it is ok.
An InkWell's splashes will not properly update to conform to changes if the size of its underlying Material, where the splashes are rendered, changes during animation. You should avoid using InkWells within Material widgets that are changing size.
use GestureDetector, for listening for gestures without ink splashes.