flutter :Inkwell not working in stack widget

Question

I created a stack viewpager by this reference :

  body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      
      Stack(
      children: [
        Positioned.fill(
          child: Align(
            alignment: Alignment.centerLeft,
            child: SizedBox(
              width: _itemWidth,
              child: FractionallySizedBox(
              child: InkWell(
                onTap: () => debugPrint("clicked"), ///this part not works
                child: PageViewItem(
                  index: _firstItemIndex,
                  width: _itemWidth,
                  url: model[_firstItemIndex],
                  ),
                ),
              ),
            ),
          ),
        ),
        SizedBox(
          height: 250,
          child: PageView.builder(
            padEnds: false,
            controller: _controller,
            itemBuilder: (context, index) {
              return Opacity(
                opacity: index <= _firstItemIndex ? 0 : 1,
                child: PageViewItem(
                  index: index,

                  width: _itemWidth,
                  url: model[index],

                ),
              );
            },
            itemCount: model.length,
          ),
        ),
      ],
),
    ],

in this part :

 InkWell(
    onTap: () => debugPrint("clicked"), ///this part not works
    child: PageViewItem(
      index: _firstItemIndex,
      width: _itemWidth,
      url: model[_firstItemIndex],
      ),
    ),

onTap Not working because is under PageView.builder . do you have any idea to fix this issue?

Could something like this perhaps be a way forward? https://stackoverflow.com/questions/66244349/propagate-click-behind-a-widget — Robert Sandberg, Jun 11 '22 at 16:14
Yes with `GestureDetector` is possible to fix that but I mistook a bout asking this question, which means if `PageViewItem` is a scrollable widget, then Is not possible to scroll that @RobertSandberg — Cyrus the Great, Jun 11 '22 at 16:18
Can you add a little more context to this question please? are you looking to stop PageView.builder to not take any clicks at all? — Kaushik Chandru, Jun 12 '22 at 09:42
Question is not clear, what are you willing to achieve? only the fixed card to be clickable or every card in the ListView to be clickable? — Abdallah A. Odeh, Jun 13 '22 at 18:17

score 0 · Answer 1 · answered Jun 11 '22 at 15:55

0

That's because top widget in the stack, stack works as a layers, the last child in the children list will be the greatest zIndex one, so any widget below it is not accessible, you need to bring it to front to activate the click, swap the children and making the InkWell's positioned Widget the last child in the children will solve your issue

Stack(
  children: [
    SizedBox(
      height: 250,
      child: PageView.builder(
        padEnds: false,
        controller: _controller,
        itemBuilder: (context, index) {
          return Opacity(
            opacity: index <= _firstItemIndex ? 0 : 1,
            child: PageViewItem(
              index: index,

              width: _itemWidth,
              url: model[index],

            ),
          );
        },
        itemCount: model.length,
      ),
    ),
    Positioned.fill(
      child: Align(
        alignment: Alignment.centerLeft,
        child: SizedBox(
          width: _itemWidth,
          child: FractionallySizedBox(
          child: InkWell(
            onTap: () => debugPrint("clicked"), ///this part not works
            child: PageViewItem(
              index: _firstItemIndex,
              width: _itemWidth,
              url: model[_firstItemIndex],
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

answered Jun 11 '22 at 15:55

Abdallah A. Odeh

1,494
6
17

you have to run that code before, because `Positioned.fill(` is a copy of widget and if you bring this widget to top so you can lose view pager – Cyrus the Great Jun 11 '22 at 15:59
please remove your answer I want to change my question – Cyrus the Great Jun 11 '22 at 16:20
Your issue is `onTap` is not working, did you try my solution? did it work? because I tried it and it did, I believe that your `InkWell` must be in the each card so every card has a different `url` to launch – Abdallah A. Odeh Jun 11 '22 at 18:53
Of course, your suggestion does not work, It doesn't matter onTap working, you have to consider another part of the code works correctly or not, whit your suggestion we lose pageview completely. – Cyrus the Great Jun 11 '22 at 18:59
What are you willing to achieve? because that's how stack works, if a layers covers what underneath it and it will not be accessible by user's gesture – Abdallah A. Odeh Jun 11 '22 at 19:01
you should run reference. you can understand what is a problem with your suggestion. but briefly, in that code, the last page of page view is shown in a single widget and the pageview opacity becomes 0. If you change the position of this widget to below, this widget completely will cover the view pager and you cant use swap again. – Cyrus the Great Jun 11 '22 at 19:10
Yes I know, but what exactly do you want to achieve? only the sticking widget to be clickable or every card in the screen? you did not mention that in your question – Abdallah A. Odeh Jun 11 '22 at 19:13

flutter :Inkwell not working in stack widget

1 Answers1