Question 216012 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make two widgets in a Stack clickable?

I’m trying to make two widgets in a Stack clickable. The first widget fills the entire screen and the second widget has some buttons on top of it. Both widgets have clickable areas. However, the top widget only allows the click to be registered on itself. I’ve tried using the ignorePointer widget, but this disables the clickability of the other widget, which is not what I want. How can I make both widgets clickable?

The relevant code is as follows:

SafeArea(
      top: false, 
      child: Scaffold(  
          body: SizedBox(
        height: context.height,
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Opacity(opacity: 0.9, child: Center(child: _videoPanel(viewModel))),
            BroadcasterPage(viewModel: viewModel)
          ],        
        ),        
      )),        
    );

The InkWell widget in the BroadcasterPage is working fine. However, the InkWell widget in the Opacity widget is not working. If I swap the Opacity and BroadcasterPage widgets, the InkWell widget in the BroadcasterPage is also not working. I want to make both InkWell widgets work.

I wrapped both widgets in the Stack with IgnorePointer and set the ignoring value to be false in one and true in the other. My plan was to set the ignoring false when clicked on the true one and set the other widget to true. but when ignoring is true, the function I wrote in onTap did not run because it ignores Inkwell clicks.

Tags:

2

Answers


  1. 0

    Wrap top most widget(first widget fills the entire screen) with gestureDetector & give it behavior: HitTestBehavior.translucent,

    Login or Signup to reply.
  2. 0

    Did you try IgnorePointer with Listener widget?

    Stack(
        clipBehavior: Clip.none,
        children: [
          IgnorePointer(
            ignoring: false, // Allow taps on this widget
            child: Opacity(
              opacity: 0.9,
              child: Center(child: _videoPanel(viewModel)),
            ),
          ),
          IgnorePointer(
            ignoring: true, // Ignore taps on this widget
            child: Listener(
              onPointerDown: (_) {
                // Handle the tap on the BroadcasterPage widget
                print('BroadcasterPage tapped');
              },
              child: BroadcasterPage(viewModel: viewModel),
            ),
          ),
        ],
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search