I've made store page with Flutter, and Product card must have two click events.

1. just click card
2. click add to cart button

However, I used Stacked InkWell because Product card has image, and I wanted to apply ripple effect on it. And with Stacked InkWell, I can't trigger click event of inside button.

Stack(
  children: [
    Container(
      color: Colors.grey,
      child: Column(
        children: [
          ElevatedButton(
            onPressed: () => print('not working TT'),  // <- how can I trigger this?
            child: const Text('click me!'),
          ),
        ],
      ),
    ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => print('nicely working'),
        ),
      ),
    ),
  ],
)

https://dartpad.dev/ca48be3e4b867c800be6e364d1de95e8

I just want to make this working with ripple effect on the image.

CodePudding user response：

I used Ink.image instead of Stacked InkWell.

Container(
    color: Colors.grey,
    child: Material(
        color: Colors.transparent,
        child: InkWell(
            onTap: () => print('global'),
            child: Column(
                children: [
                    Ink.image(
                        image: const NetworkImage('https://picsum.photos/300'),
                        height: 300,
                        width: 300,
                    ),
                    ElevatedButton(
                        onPressed: () => print("it's working!"),
                        child: const Text('click me!'),
                    ),
                ],
            ),
        ),
    ),
)

https://dartpad.dev/02f979a773fc6167937e6d40aa55ef6d

CodePudding user response：

How about putting click here button on top of InkWell

Stack(
        children: [
          Container(
            color: Colors.grey,
            child: Column(
              children: [
               //image
                SizedBox(
                 width:100, 
                 height:60
                ),
              ],
            ),
          ),
          Positioned.fill(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: () => print('nicely working'),
              ),
            ),
          ),
           ElevatedButton(
                  onPressed: () => print('not working TT'),
                  child: const Text('click me!'),
                ),
        ],
      ),

CodePudding user response：

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: 
             Scaffold(
               body: Stack(
                       children: [
                         Container(
                height: double.maxFinite,
                width: 0100,
               
                color: Colors.grey,
                
                         ),
                         Positioned.fill(
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: () => print('nicely working'),
                  ),
                ),
                         ),
               ElevatedButton(
                         onPressed: () => print('not working TT'),  // <- how can I trigger this?
                         child: const Text('click me!'),
                       ),
                         
             
                       ],
                     ),
             ),
        
        );
  }
}