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

[moda20]

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]

Stuck here too

[RajanEquitysoft]

Any solution?

[hexlogic]

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]

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

[walidashik]

set ignorePointer: false will fix this issue,

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

[boldt]

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):

Everything outside of the rectangular is not clickable.

[Veeksi]

I have the same issue

[yadaniyil]

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]

Any update on 3.0.0?

[yadaniyil]

@boldt please try the new beta version https://pub.dev/packages/badges/versions/3.0.0-beta.1