Skip to content
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.

Change ringDiameter/ ringWidth: Lower button at right seems to be lost the click event #14

Open
mxaxs opened this issue May 11, 2020 · 11 comments
Assignees
Labels
bug Something isn't working

Comments

@mxaxs
Copy link

mxaxs commented May 11, 2020

Hey! Congrats for this project! It's unique at this time!

  1. 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),
      ),`
  1. 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)
@marianocordoba marianocordoba self-assigned this Jul 31, 2020
@marianocordoba marianocordoba added the bug Something isn't working label Jul 31, 2020
@ArielFerreiro
Copy link

ArielFerreiro commented Mar 17, 2021

Hi, sames happens to me. Any plans for resolution?

By the way. Great widget Mariano. Felicitaciones!

@marianocordoba
Copy link
Owner

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.

@devrajraut
Copy link

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.

@MrCsabaToth
Copy link
Contributor

MrCsabaToth commented May 28, 2021

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):
Screenshot_20210527-233248_crop_annotate

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:
Screenshot_20210527-233142_crop

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.

Screenshot_20210527-233148_crop

So that's it. I'm scratching my head what's the best way to cure this.

@MrCsabaToth
Copy link
Contributor

MrCsabaToth commented May 28, 2021

Concrete values in my case:
Screenshot_2021-05-27_23-35-33

@MrCsabaToth
Copy link
Contributor

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.

@MrCsabaToth
Copy link
Contributor

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.

@MrCsabaToth
Copy link
Contributor

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.

@japatel225
Copy link

Hi everyone, any solution to this?

@MrCsabaToth
Copy link
Contributor

Hi everyone, any solution to this?

Yes, my PR (referenced above) fixes it. Not sure why it's not merged.

@japatel225
Copy link

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 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants