Search code examples
flutterdartwidgetontap

InkWell widget not working inside of container


I'm trying to add an InkWell Widget to a custom card I made in Flutter, but it doesn't seem to work no matter what I do or where I place it in the code... the cardAction is a function that opens url links

here is the code

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Transform(
      transform: Matrix4.translationValues(0, -screenSize.height / 20, 0),
      child: Container(
        margin: EdgeInsets.symmetric(
          vertical: screenSize.height / 4,
          horizontal: screenSize.width / 8,
        ),
        child: Container(
          margin: EdgeInsets.only(bottom: screenSize.height / 20),
          decoration: BoxDecoration(
            color: Colors.amber[50],
            borderRadius: BorderRadius.circular(screenSize.width / 10),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                offset: const Offset(0, 6),
                blurRadius: screenSize.width / 50,
              )
            ],
          ),
          child: AspectRatio(
            aspectRatio: (screenSize.height / 5) / (screenSize.width / 9),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(screenSize.width / 10),
              child: InkWell(
                onTap: () async {
                  cardAction;
                },
                child: BuildParallaxBackground(
                  context: context,
                  assetName: cardAsset,
                  imageKey: _backgroundImageKey,
                  title: cardTitle,
                  gradient: gradient,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

here is the parallaxBackground code if it matters...

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Flow(
          delegate: ParallaxFlowDelegate(
            scrollable: Scrollable.of(context),
            listItemContext: context,
            backgroundImageKey: imageKey,
          ),
          children: [
            Image.asset(
              assetName,
              fit: BoxFit.cover,
              key: imageKey,
            )
          ],
        ),
        if (gradient == true) ...[
          _buildGradient(),
        ],
        if (title != '') ...[
          _buildTitle(),
        ],
      ],
    );
  }

I tried placing it everywhere and it doesn't work


Solution

  • Wrap your InkWell with Material and set color to transparent

        child: ClipRRect(
          borderRadius: BorderRadius.circular(screenSize.width / 10),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: ...
              child: ...
            ),
          ),
        ),