Not able to click on action buttons on SliverPersistentHeader when user scrolls up

Question

I am building a Flutter app that uses SliverPersistentHeader and I added some action buttons overlay that SliverPersistentHeader. But the app got a problem in which the action buttons are not able to click when the user scrolls up. I don't want to use the SliverAppBar because I can't put card widget overlay it. So I use SliverPersistentHeader instead because it is able to place a card widget overlay it.

As you can see this is the output that I tried to pin the SliverPersistentHeader. So that user will able to see the action buttons when scrolling up. But unfortunately, I am not able to click on that action button.

Below is the code. Note that I wrapped SliverrPersistenHeader inside NestedScrollView and DefaultTabController

SliverPersistentHeader(
        delegate: MySliverAppBar(
       /// pass data by here
                  
        expandedHeight: 230,          
       ),
    pinned: true,
    floating: true,
 ),

Here is the SliverPersistentHeaderDelegate class.

@override
Widget build(
  BuildContext context, double shrinkOffset, bool overlapsContent) {
const Color _devider_color = Color(0xff425262);
final _actionButtonColor = Theme.of(context).cardColor.withOpacity(0.7);
return Stack(
  fit: StackFit.expand,
  overflow: Overflow.visible,
  children: [
    Image.network(
      clanProfile.mainImage == null ? _clanLogo : clanProfile.mainImage,
      fit: BoxFit.cover,
    ),

    Positioned(
      top: 0,
      left: 12,
      child: InkWell(
        onTap: () {
          Navigator.pop(context);
        },
        child: SafeArea(
          child: Container(
              height: 50,
              width: 50,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                color: _actionButtonColor,
              ),
              child: Icon(Icons.arrow_back_ios)),
        ),
      ),
    ),
    Positioned(
      top: 0,
      right: 12,
      child: SafeArea(
        child: Row(
          children: [
            InkWell(
              onTap: () {
                Navigator.of(context).pushNamed(MembersListPage.routeName,
                    arguments: MembersListPageArguments(
                      members: members,
                      masterId: masterId,
                    ));
              },
              child: Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: _actionButtonColor,
                ),
                child: Icon(Icons.info),
              ),
            ),
            PaddingSmall(isHorizontal: true),
            Visibility(
              visible: isClanMaster && true,
              child: Row(
                children: <Widget>[
                  InkWell(
                    onTap: () {
                      Navigator.pushNamed(
                              context, EditClanPagePage.routeName,
                              arguments: EditClanPagePageArgument(
                                  clanPageModel: clanProfile))
                          .then((Object message) {
                        if (message == 'Success') {
                          load();
                        }
                      });
                    },
                    child: Container(
                        height: 50,
                        width: 50,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25),
                          color: _actionButtonColor,
                        ),
                        child: Icon(Icons.edit)),
                  ),
                  PaddingSmall(isHorizontal: true),
                  InkWell(
                    onTap: () {
                      generateInviteLink().then((value) {
                        _showInviteDialogue(
                            context: context, message: value);
                      });
                    },
                    child: Container(
                      height: 50,
                      width: 100,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                        color: _actionButtonColor,
                      ),
                      child: Text(
                        'Invite ',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
    Center(
      child: Opacity(
        opacity: shrinkOffset / expandedHeight,
        child: Text(
          name,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w700,
            fontSize: 23,
          ),
        ),
      ),
    ),
    Positioned(
      // top: 60,
      top: expandedHeight / 1.3 - shrinkOffset,
      left: constants.padding_large,
      right: constants.padding_large,
      child: _buildUserDetailOverlayContainer(),
        ),
      ),
    ),
  ],
);
 }

The reason that I used SliverPersistentHeader over SliverAppBar because I want to put a card overlay it. Here how it looks like

Answer 1

It's hard to say, because the example of your code is not full. But I think that the last widget in the stack, goes on the widget with buttons row. Try to swap them.