How can I make icon outside a flutter stack widget clickable?

Question

Explanation

Hello everyone, please assist me in solving this problem. I am trying to create the card that contains user money balance, name. and as you see it has been done but there is a problem, the visibility eye icon is not clickable when it is placed outside the stack but still within the card (see the icon drawn with black color), but it is clickable if I place it within the stack (see the icon drawn with green color). My code is below, please help me out.

Thank you all in advance.

Stack(
              clipBehavior: Clip.none,
              alignment: AlignmentDirectional.bottomCenter,
              children: <Widget>[
                Container(
                  height: height,
                  color: const Color(0xFF049DFE),
                ),
                Positioned(
                  // top: 50.0,
                  bottom: -height / 2,
                  left: 16.0,
                  right: 16.0,
                  height: height * 1.2,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.0),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(1),
                          spreadRadius: 2,
                          blurRadius: 5,
                          offset: const Offset(0, 3),
                        ),
                      ],
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'Hey, $fname!',
                                style: const TextStyle(
                                  fontWeight: FontWeight.w900,
                                  fontSize: 20,
                                ),
                              ),
                              const Spacer(),
                              TextButton(
                                onPressed: () {},
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    const Text(
                                      'Add Money',
                                      style: TextStyle(
                                        fontSize: 12,
                                      ),
                                    ),
                                    const SizedBox(width: 5),
                                    Image.asset(
                                        'assets/images/addmoney.png',
                                        width: 20,
                                        height: 20)
                                  ],
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: height / 3.5),
 
                          //balance
                          Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                showBalance
                                    ? 'NGN236,600.00'
                                    : '***********',
                                style: const TextStyle(
                                  fontWeight: FontWeight.w900,
                                  fontSize: 20,
                                ),
                              ),
                              const Spacer(),
                              TextButton(
                                onPressed: () {
                                  setState(() {
                                    showBalance = !showBalance;
                                  });
                                },
                                child: showBalance
                                    ? const Icon(Icons.visibility)
                                    : const Icon(Icons.visibility_off),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),

Answer 1

If i'm not misunderstanding what you're trying to achieve, you want the icons to be tappeables.

for that you can use IconButton

You should replace

showBalance ? const Icon(Icons.visibility) : const Icon(Icons.visibility_off),

with:

IconButton(onPressed: () => showBalance = !showBalance, icon: Icon( showBalance ? Icons.visibility : Icons.visibility_off))