Change ringDiameter/ ringWidth: Lower button at right seems to be lost the click event
Opened this issue · 11 comments
Hey! Congrats for this project! It's unique at this time!
- Using version: 1.0.0
2 This is the code structure:
`floatingActionButton: FabCircularMenu(
alignment: Alignment.bottomRight,
ringWidth: 130,
children: <Widget>[
IconButton(
iconSize: 40,
icon: Icon(
Icons.home,
),
onPressed: () {
print('Home');
}),
IconButton(
iconSize: 40,
icon: Icon(
Icons.favorite,
size: 40,
),
onPressed: () {
controller.go2List();
print('GoToLists');
}),
IconButton(
iconSize: 40,
icon: Icon(
Icons.favorite,
size: 40,
),
onPressed: () {
print('Favorite');
}),
IconButton(
iconSize: 40,
icon: Icon(
Icons.favorite,
size: 40,
),
onPressed: () {
print('Favorite');
}),
IconButton(
iconSize: 40,
icon: Icon(
Icons.favorite,
size: 40,
),
onPressed: () {
print('Favorite');
}),
],
ringColor: Color.fromARGB(70, 255, 255, 255),
),`
- The issue
The first icon in the list ( Icons.home, ) seems to be unclickable... But sometimes is possible to do the click, somewhere around the icon... (kind of offset region)
Hi, sames happens to me. Any plans for resolution?
By the way. Great widget Mariano. Felicitaciones!
I have seen this behaviour before but didn't happened to me after the latest changes. I will try to replicate it again and see if I can solve it.
Use the Widget Inspector and Debug Paint while the FAB Menu is Open. You will see a Rectangular Area which takes the clicks. If your Buttons on the Ring are outside this Rectangle, then they do not register a Button Click. A Workaround is to reduce the Ring Diameter and make it fall inside the rectangle. Then all Buttons on the ring register a Click. Package author, kindly have a look at it. Awesome Package otherwise. Thanks a Lot.
Use the Widget Inspector and Debug Paint while the FAB Menu is Open. You will see a Rectangular Area which takes the clicks. If your Buttons on the Ring are outside this Rectangle, then they do not register a Button Click. A Workaround is to reduce the Ring Diameter and make it fall inside the rectangle. Then all Buttons on the ring register a Click. Package author, kindly have a look at it. Awesome Package otherwise. Thanks a Lot.
Exactly. I'm tracking this down. So it is just a fortunate circumstance that in normal cases this bug doesn't happen. As you can see below even in the normal case a small portion of the last two buttons flow out a little bit from the click area (OverflowBox):
Now I assume that most of the people who override the ringDiameter / ringWidth are doing it because they have one too many buttons and want to have a little more room. Let's see that in my case, pay attention to how the OverflowBox and the Container changes:
As you can guess the Strava, the Help and the Exit buttons don't react to click but instead the Widgets under them receive the clicks.
So that's it. I'm scratching my head what's the best way to cure this.
Concrete values in my case:
I was experimenting with the OverflowBox's alignment and tuning the _translationX and _translationY values. Once the OverflowBox for my larger Circular Fab's got nominal (to use a SpaceX term) unfortunately it got crooked on a default setting. I'll need to tweak more.
What if somehow we just don't shrink that OverflowBox at all? That would kinda make the circular menu modal, but oh well. Better than not being able to click menu buttons in my opinion.
I tried to use SizedOverflowBox instead of OverflowBox but that just distorts the visual and the end result won't budge in terms of the horizontal boundary of the OverflowBox. I start to think that this could be some weird interference because there are so many Transforms are involved.
Hi everyone, any solution to this?
Hi everyone, any solution to this?
Yes, my PR (referenced above) fixes it. Not sure why it's not merged.
Yes, my PR (referenced above) fixes it. Not sure why it's not merged.
Oh okay 👍 Hope it gets merged soon. Thank you @MrCsabaToth.
By the way, very cool package @marianocordoba 👍