CODEWITHSUNDEEP
flutterdartlayoutfrontendoverlapping
Bhaskar Gupta
Bhaskar Gupta

Reputation: 41

Button getting overlapped because of being close to each other now I can't tap on the button beneath in Flutter

I am unable to make the buttons not overlap so I can tap on them separately like below

Flutter Inspection

As you can see I cannot tap on the button which lies beneath those other 3 buttons.

Inspection off

Here is the normal picture of the screen where the clouds seems to be clickable but it isn't reachable easily.

Here is the code for my Cloud Button

class Cloud extends StatelessWidget {
  Cloud({this.width,this.height,this.bottom,this.left,this.lineUpLink,this.right,this.top,this.videoLink});
  final String videoLink;
  final String lineUpLink;
  final double bottom;
  final double left;
  final double right;
  final double top;
  final double height;
  final double width;
  @override
  Widget build(BuildContext context) {

    return Positioned(
      bottom: bottom,
      left: left,
      width: width,
      height: height,
      top: top,
      right: right ,
      child: IconButton(
        icon: Image.asset('images/cloud30.png'),
        onPressed: () {
          final getLink = GetLink(
            link: videoLink,

            lineLink: lineUpLink,

          );

          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => VideoApp(link: getLink.link,lineupLink: getLink.lineLink,)),
          );
        },
      ),
    );
  }
}

Here is my Stack code in the main screen.

      fit: StackFit.expand,
      children: [
        //T Smokes
        Center(child: Image.asset('images/nuke.png')),
        Cloud(top: 310/782 * height,left: 185/392 * width,videoLink: 'https://giant.gfycat.com/NarrowImpassionedCero.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F1.png?alt=media&token=1116e338-07b3-4780-b919-4ce3fa1b68a6',),//Ramp
        Cloud(top: 350/782 * height,right: 125/392 * width,videoLink: 'https://giant.gfycat.com/ThreadbareSecondBat.webm', lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F2.png?alt=media&token=884fed00-8d42-41be-87f5-65cc81c2a684',),//Heaven
        Cloud(top: 355/782 * height,right: 95/392 * width,videoLink: 'https://giant.gfycat.com/InformalHeartfeltAfricanclawedfrog.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F3.png?alt=media&token=f0d61fd2-8527-48cf-8062-5187f6be7cf1',),//Outside Heaven
        Cloud(bottom: 290/782 * height,left: 180/392 * width,videoLink: 'https://giant.gfycat.com/AdolescentThisCornsnake.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F4.png?alt=media&token=ce9e6dca-4dbc-42b1-8de3-c5f68576ca47',),//T Red
        Cloud(bottom: 325/782 * height,left: 205/392 * width,videoLink: 'https://giant.gfycat.com/JovialQuaintHackee.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F6.png?alt=media&token=37d4ca8e-e39b-479c-a7cc-c8dac7c37ec0',),//Mini Inside
        Cloud(bottom: 275/782 * height, right: 130/392 * width,videoLink: 'https://giant.gfycat.com/HomelyGiganticGallinule.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F7.png?alt=media&token=73d4f4bd-9f78-42da-8102-cdb341c8ebef',),//Outside passing red
        Cloud(bottom: 300/782 * height,right: 100/392 * width,videoLink: 'https://giant.gfycat.com/WarpedGrandioseHerald.webm',lineUpLink: 'https://media.discordapp.net/attachments/688396703685935154/826611169145126932/unknown.png',),//Garage
        Cloud(bottom: 335/782 * height,left: 180/392 * width,videoLink: 'https://giant.gfycat.com/DazzlingUnsightlyHairstreakbutterfly.webm',lineUpLink: 'https://media.discordapp.net/attachments/763777060636065812/826612884212678656/unknown.png',),// Vent
        Cloud(bottom: 300/782 * height,left: 205/392 * width,videoLink: 'https://giant.gfycat.com/ForcefulExaltedErne.webm',lineUpLink: 'https://firebasestorage.googleapis.com/v0/b/flash-chats-2f263.appspot.com/o/Nuke%2F5.png?alt=media&token=189d94eb-cde6-452d-a0a3-56ec7c544c11',),//T red T side left
        Cloud(bottom: 330/782 * height,right: 112/392 * width,videoLink: 'https://giant.gfycat.com/FeistyReasonableEkaltadeta.webm',lineUpLink: 'https://media.discordapp.net/attachments/763777060636065812/826614730097426522/unknown.png',),//CT Red
        ],
      ),

Please someone can help me find the solution for this problem?

Thank you.

Upvotes: 0

Views: 402

Answers (1)

Huthaifa Muayyad
Huthaifa Muayyad

Reputation: 12353

Please post your logic for handling tap gestures. Based on the pictures you posted, it appears that you are using stacks of containers with 'clouds' inside them, and your gesture detector is wrapping the the parent containers.

I would advise you to use two stacks.

The first stack is exactly like the one you have now, but without wrapping a gesture detector around your containers, just simply keep them container+cloud.

Use a second stack, that sits infront of your current stack, and only consists of gesture detectors that wrapping empty containers, but have a width and height equal to the inner diameter of your clouds. Position this stack infront of the cloud stack, while aligning the centers of these empty containers to the centers of your clouds. And in your gesture detector here use the property of behavior: HitTestBehavior.translucent.

Assuming your clouds have a width and height of 30 pixels[PAy attention, the dimensions of the clouds, not their parent containers), use this:

GestureDetector(
  behavior: HitTestBehavior.translucent,
  child: Container (height: 30, width:30),
  onTap: (){//your logic here})

Upvotes: 1

Related Questions