1

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.

cra1nbow
  • 21
  • 1
  • 4
  • I might swap the position and then use ` behavior: HitTestBehavior.translucent,` on `GestureDetector` – Md. Yeasin Sheikh Nov 06 '22 at 06:08
  • @YeasinSheikh Could you provide more information about your answer? – cra1nbow Nov 06 '22 at 06:36
  • 1
    check [Ink](https://api.flutter.dev/flutter/material/Ink-class.html) class, the docs say: "A convenience widget for drawing images and other decorations on Material widgets, so that InkWell and InkResponse splashes will render over them" – pskink Nov 06 '22 at 06:54
  • @pskink you helped me a lot. With Ink.image, I can make this working with ripple effect. – cra1nbow Nov 06 '22 at 08:20
  • great, so no need of any `Stack`? – pskink Nov 06 '22 at 08:25
  • Yes. at least outside one. (inside one is also for Ink effect, but nevermind. It's working perfectly) When I use Ink.image on inside one without providing size (width and height), it throws `RenderPointerListener object was given an infinite size during layout.` exception. – cra1nbow Nov 06 '22 at 08:28

3 Answers3

1

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

cra1nbow
  • 21
  • 1
  • 4
0

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!'),
                ),
        ],
      ),
Ninad7N
  • 544
  • 4
  • 13
0
    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!'),
                       ),
                         
             
                       ],
                     ),
             ),
        
        );
  }
}
ahmed
  • 122
  • 9
  • same with @Ninad 's answer – cra1nbow Nov 06 '22 at 06:35
  • I started to write my code before sawing his code! so what is wrong with that answer? – ahmed Nov 06 '22 at 07:03
  • you could put sizedbox at the top of your column and then put ElevatedButton outside everything except the Stack widget then by using Positioned move it above sizedbox – ahmed Nov 06 '22 at 07:18