flutter - How do i make this icon button work that is inside this stack - Stack Overflow

Widget image I have this small problem that I am not able to figure out. I have this Icon button that in in a stack and the stack consists of a transparent background(glass morphic background) and over it is a one button that is meant to scan document. My problem is that I am not able to figure out why the icon button is not working on the upper part basically the part above the container the icon button only works inside the container. Here is the code

Widget getBottomAppBar(AppTheme theme, Function() showDocumentUploadScreen) {
  return Stack(
    clipBehavior: Clip.none,
    alignment: Alignment.topCenter,
    children: [
      ClipRect(
        clipBehavior: Clip.hardEdge,
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 1.5, sigmaY: 1.5),
          child: Container(
            height: 50.sp,
            color:
                theme.isDarkMode
                    ? AppColors.white.withOpacity(0.3)
                    : AppColors.black.withOpacity(0.3),
          ),
        ),
      ),
      Positioned(
        top: -25,
        child: IconButton.filled(
          color: AppColors.primaryAppColor,
          onPressed: () {
            showDocumentUploadScreen();
          },
          icon: Image.asset("assets/images/scanner.png", scale: 4.sp),
        ),
      ),
    ],
  );
}

I dont understand what is going on The clip is only applied to the container I dont know why it is affecting the icon button

Widget image I have this small problem that I am not able to figure out. I have this Icon button that in in a stack and the stack consists of a transparent background(glass morphic background) and over it is a one button that is meant to scan document. My problem is that I am not able to figure out why the icon button is not working on the upper part basically the part above the container the icon button only works inside the container. Here is the code

Widget getBottomAppBar(AppTheme theme, Function() showDocumentUploadScreen) {
  return Stack(
    clipBehavior: Clip.none,
    alignment: Alignment.topCenter,
    children: [
      ClipRect(
        clipBehavior: Clip.hardEdge,
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 1.5, sigmaY: 1.5),
          child: Container(
            height: 50.sp,
            color:
                theme.isDarkMode
                    ? AppColors.white.withOpacity(0.3)
                    : AppColors.black.withOpacity(0.3),
          ),
        ),
      ),
      Positioned(
        top: -25,
        child: IconButton.filled(
          color: AppColors.primaryAppColor,
          onPressed: () {
            showDocumentUploadScreen();
          },
          icon: Image.asset("assets/images/scanner.png", scale: 4.sp),
        ),
      ),
    ],
  );
}

I dont understand what is going on The clip is only applied to the container I dont know why it is affecting the icon button

• flutter

Share Follow edited Mar 4 at 7:17 Srinidhi GR asked Mar 4 at 7:12 Srinidhi GRSrinidhi GR 3122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

Your issue is likely caused by the ClipRect inside the Stack. The BackdropFilter might be absorbing touch gestures or preventing them from reaching the IconButton in the area positioned above the container.

Fix:
Wrap the BackdropFilter inside IgnorePointer so it doesn’t block touch interactions.

 Widget getBottomAppBar(AppTheme theme, Function() showDocumentUploadScreen) {
  return Stack(
    clipBehavior: Clip.none,
    alignment: Alignment.topCenter,
    children: [
      IgnorePointer( // Prevents touch blocking
        ignoring: true,
        child: ClipRect(
          clipBehavior: Clip.hardEdge,
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), // Increased blur for a smoother effect
            child: Container(
              height: 50.sp,
              color: theme.isDarkMode
                  ? Colors.black.withOpacity(0.05) // Minimal opacity to reduce white glow
                  : Colors.white.withOpacity(0.05),
            ),
          ),
        ),
      ),
      Positioned(
        top: -25,
        child: GestureDetector( // Ensures the button captures touch input
          onTap: showDocumentUploadScreen,
          child: Material(
            color: Colors.transparent, // Prevents any unwanted background behavior
            child: IconButton.filled(
              color: AppColors.primaryAppColor,
              onPressed: showDocumentUploadScreen,
              icon: Image.asset("assets/images/scanner.png", scale: 4.sp),
            ),
          ),
        ),
      ),
    ],
  );
}