I am using a Stack widget to display a Container with a Positioned text widget. However, the issue is that the onTap function does not work when clicking on the Positioned widget, but it works when clicking on the main Container.

What is causing this issue, and how can I fix it? Please help. When click both it should work.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manatech_tpms/widgets/size_config.dart';
import 'constants.dart';
import 'custom_image_view.dart';

class FeatureButton extends StatelessWidget {
  final String imagePath;
  final String text;
  final List<Color> gradientColors;
  final TextAlign textAlignment; // Determines text position

  const FeatureButton({
    super.key,
    required this.imagePath,
    required this.text,
    required this.gradientColors,
    required this.textAlignment, // Pass left or right to position text
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        print("navigation");
      },
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            width: SizeConfig.screenWidth * 0.3,
            height: SizeConfig.screenHeight * 0.15,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  blurRadius: 5,
                  spreadRadius: 3,
                ),
              ],
              gradient: LinearGradient(
                colors: gradientColors, // Apply gradient colors
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                stops: [0.1, 0.7]
              ),
              borderRadius: BorderRadius.circular(25),
            ),
            child: Center(
              child: CustomImageView(
                  imagePath: imagePath,
                  width: SizeConfig.screenWidth * 0.2,
                  height: SizeConfig.screenHeight * 0.1,
              ), // Replace with your image
            ),
          ),
          Positioned(
            bottom: textAlignment == TextAlign.left ? SizeConfig.screenWidth * 0.09 : SizeConfig.screenWidth * 0.12,
            right: textAlignment == TextAlign.right ? -Constants.height100 - Constants.space35 : SizeConfig.screenWidth * 0.28,
            child: Container(
              alignment: Alignment.center,
              width: SizeConfig.screenWidth * 0.43,
              height: SizeConfig.screenHeight * 0.06,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    blurRadius: 5,
                    spreadRadius: 3,
                  ),
                ],
              ),
              child: Text(
                text,
                style: TextStyle(color:Constants.manGreyColor,
                fontWeight: FontWeight.bold, fontSize: Constants.iconSize16),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I am using a Stack widget to display a Container with a Positioned text widget. However, the issue is that the onTap function does not work when clicking on the Positioned widget, but it works when clicking on the main Container.

What is causing this issue, and how can I fix it? Please help. When click both it should work.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manatech_tpms/widgets/size_config.dart';
import 'constants.dart';
import 'custom_image_view.dart';

class FeatureButton extends StatelessWidget {
  final String imagePath;
  final String text;
  final List<Color> gradientColors;
  final TextAlign textAlignment; // Determines text position

  const FeatureButton({
    super.key,
    required this.imagePath,
    required this.text,
    required this.gradientColors,
    required this.textAlignment, // Pass left or right to position text
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        print("navigation");
      },
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            width: SizeConfig.screenWidth * 0.3,
            height: SizeConfig.screenHeight * 0.15,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  blurRadius: 5,
                  spreadRadius: 3,
                ),
              ],
              gradient: LinearGradient(
                colors: gradientColors, // Apply gradient colors
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                stops: [0.1, 0.7]
              ),
              borderRadius: BorderRadius.circular(25),
            ),
            child: Center(
              child: CustomImageView(
                  imagePath: imagePath,
                  width: SizeConfig.screenWidth * 0.2,
                  height: SizeConfig.screenHeight * 0.1,
              ), // Replace with your image
            ),
          ),
          Positioned(
            bottom: textAlignment == TextAlign.left ? SizeConfig.screenWidth * 0.09 : SizeConfig.screenWidth * 0.12,
            right: textAlignment == TextAlign.right ? -Constants.height100 - Constants.space35 : SizeConfig.screenWidth * 0.28,
            child: Container(
              alignment: Alignment.center,
              width: SizeConfig.screenWidth * 0.43,
              height: SizeConfig.screenHeight * 0.06,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    blurRadius: 5,
                    spreadRadius: 3,
                  ),
                ],
              ),
              child: Text(
                text,
                style: TextStyle(color:Constants.manGreyColor,
                fontWeight: FontWeight.bold, fontSize: Constants.iconSize16),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

• flutter
• flutter-animation

• 1 try adding to your gesture detector behavior: HitTestBehavior.opaque – Daniel Onadipe Commented Mar 26 at 19:41
• Still not working – Krishna M Commented Mar 27 at 4:48
• Could you please load an image for the design you want to achieve ? ... I tried to build the your UI and it gives me strange UI – Mahmoud Al-shehyby Commented Mar 27 at 6:28
• Is the Positioned widget out of bounds of the GestureDetector? If yes, then taps outside the bounds are ignored, and is an expected behavior: github/flutter/flutter/issues/… – ParaPsychic Commented Mar 27 at 8:13

1 Answer 1

Try to add this Positioned.fill() in the last Layer of the Stack

Positioned.fill(
  child: Material(
    color: Colors.transparent,
    child: InkWell(
      onTap: () {
        log("Navigation");
      },
    ),
  ),
),

• By this you can ensure that all the Stack components` are clickable

After addition:

class FeatureButton extends StatelessWidget {
  final String imagePath;
  final String text;
  final List<Color> gradientColors;
  final TextAlign textAlignment; // Determines text position

  const FeatureButton({
    super.key,
    required this.imagePath,
    required this.text,
    required this.gradientColors,
    required this.textAlignment, // Pass left or right to position text
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        // Add All the other children
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                log("Navigation");
              },
            ),
          ),
        ),
      ],
    );
  }
}

Make sure to put all the components of the Stack within its parent width and height