CODEWITHSUNDEEP
androidimagebuttonflutterdart
maor ts
maor ts

Reputation: 36

button with image with transparent background

I'm trying to make a 'custom button' for my app. I have an image of egg with transparent backgroung and I need this image to be a button that ignore tapping on the transparent part.

Right now , I use gesturedetcetor , I also tried inkwell ,they are both detect tapping all the whole image, include the transparent back.

Align(
    alignment: Alignment(0, 0.75),
    child: Container(
        width: swidth * 0.75,
        height: sheight * 0.6,
        child: GestureDetector(
            onTap: () {
                setState(() {
                    pushes--;
                });
            },
        child: Image.asset(
        'images/egg.png',
        fit: BoxFit.fill,
    )),
))

Upvotes: 0

Views: 1076

Answers (3)

Shady Boshra
Shady Boshra

Reputation: 2911

Welcome maor ts in Stackoverflow and Flutter dev.

I was very interesting with your question and your problem, so I decided to solve it with a new package you can use.

This package is transparent_image_button which I recently coded it.

You can use it as this example

TransparentImageButton.assets( "assets/images/egg.png", width: 200, onTapInside: () => print("You tapped the image."), onTapOutside: () => print("You tapped outside the image."), )

As you can see, you can set function when you tapped on image and another function when you tapped outside the image.

I hope other people can benefit from it also. Thanks for giving me the idea with your question.

Upvotes: 1

Sher Ali
Sher Ali

Reputation: 5793

Try this code may solved your issue

Row(children: <Widget>[
      GestureDetector(child: Container(
        width: swidth * 0.75,
        height: sheight * 0.6,
      ),onTap: (){
        setState(() {
          pushes--;
        });
      },),
      Image.asset(
        'images/egg.png',
        fit: BoxFit.fill,
      )
    ],)

Upvotes: 0

Sunny
Sunny

Reputation: 3265

In the way, you are implementing it will detect the tap on all over the image.

I will suggest you add the transparent view on the image in the fill area and then add GestureDetector on that view. In this way, you can avoid the click on the transparent area.

Upvotes: 0

Related Questions