yako-dev/flutter_badges

changing badge position makes it unclickable if using inkWell in badge content or gesture detector

moda20 opened this issue · 10 comments

moda20 commented

i am trying to make a clickable badge and I noticed that changing the position using badgePosition.topEnd for example would make the badge unclickable as if the badge is in a place and the gesture detector i have in the badge content, is in another place.
in the following example I am using an Inkwell but the same can be said for the gesture detector. this on top fo the fact that clicking the badge itself even in normal position wouldn't trigger unless u click on the center of it.

 Badge(
                                        child: Padding(
                                          padding: const EdgeInsets.only(bottom: 8),
                                          child: Text(
                                            "text"
                                          ),
                                        ),
                                        position: BadgePosition.topEnd(top: -15, end: -30),
                                        borderRadius: BorderRadius.all(Radius.circular(10)),
                                        shape: BadgeShape.circle,
                                        badgeColor: Colors.transparent,
                                        elevation: 0,
                                        badgeContent: Container(
                                          height: 25,
                                          width: 25,
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.all(Radius.circular(25)),
                                            color: Colors.transparent,
                                          ),
                                          child: Material(
                                            color: Colors.transparent,
                                            child:InkWell(
                                              child:  Icon(Icons.edit, color: MyTheme.grey300, size: 15,),
                                              onTap: (){
                                                print("sdsdsd")
                                              },
                                            ),
                                          ),
                                        ),
                                      ),

the sdsdsd log will not print when I am clearly tapping on the badge, even tapping around the badge won't make it print.
is this a bug and is there a workaround for it ?

Marcosmaliki commented

Stuck here too

RajanEquitysoft commented

Any solution?

hexlogic commented

Badges are not intended for click/tap interactions, it's about informing. If you want a clickable badge - simply create a custom button with rounded corners and update it's value if needed.

Marcosmaliki commented

Checking the source code, the badge is wrapped in IgnorePointer widget. Try setting it to false; ignorePointer: false,

walidashik commented

set ignorePointer: false will fix this issue,

InkWell(
   onTap: () {},
   child: Badge(
      ignorePointer: false,
      badgeContent: Text('3'),
      child: Icon(Icons.settings),
    )
)
boldt commented

I can provide another not workling MWE, even with ignorePointer: false:

Card(
  child: GestureDetector(
    onTap: () {
      print("OnTap");
    },
    child: Badge(
      ignorePointer: false,
      badgeContent: SizedBox(height: 12, width: 12),
      child: Center(
        child: Text(""),
      ),
    ),
  ),
)

Only the area marked with the rectangle is clickable (e.g, the area on the Card):

grafik

Everything outside of the rectangular is not clickable.

Veeksi commented

I have the same issue

yadaniyil commented

Hey everyone. The proper onTap parameter for the badge, where the whole badge widget is clickable will be introduced in Badges 3.0.0 with a lot of other features within a week. Closing the issue for now.

boldt commented

Any update on 3.0.0?