previous child of stack widget not active

Issue

In a stack widget, I have two container children; each with an icon as a child. on view, the child of the first container has a play icon which on pressed should change to a pause icon and the child of the second container has a home icon which on pressed changes to a wallet icon.

the play icon does not change to the pause icon when it is being pressed. and I have noticed it is because the first container has another widget lying on it which is the second container, which is making the content of the first widget inactive.

how do I make it active? Is there any way? there need to be a way.

import 'package:flutter/material.dart';

void main() {
runApp(AllTests());
}

class AllTests extends StatefulWidget {
const AllTests({Key? key}) : super(key: key);

@override
_AllTestsState createState() => _AllTestsState();
}

class _AllTestsState extends State<AllTests> {
IconData home = Icons.home;
IconData play = Icons.play_circle_filled;
onHomePress() {
if (home == Icons.home) {
  home = Icons.account_balance_wallet_rounded;
} else {
  home = Icons.home;
}
}
onPlayPress() {
if (play == Icons.play_circle_filled) {
  play = Icons.pause_circle_filled_rounded;
} else {
  play = Icons.play_circle_filled;
}
}

@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Stack(
          overflow: Overflow.visible,
            children: [
          Positioned(
            top: 50,
            child: Container(
              height: 300,
              width: 500,
              color: Colors.pink,
              child:  IconButton(
                icon: Icon(
                  play,
                  size: 80,
                  color: Colors.black,
                ),
                onPressed: () {
                  setState(() {
                    print('hello');
                    onPlayPress();
                  });
                },
              ),
            ),
          ),
          Positioned(

            child: Padding(
              padding: const EdgeInsets.only(left: 40.0),
              child: Container(
                height: 100,
                width: 100,
                color: Colors.yellow,
                child:  IconButton(
                  icon: Icon(
                    home,
                    size: 80,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    setState(() {
                      onHomePress();
                    });
                  },
                ),
              ),
            ),
          )
        ]),
      ],
    ),
  ),
);
}
}

Solution

You are using overflow: Overflow.visible which is causing the play button to be visible even if it is outside of the Stack. Checkout following code which resolves that issue.

import 'package:flutter/material.dart';

void main() {
  runApp(AllTests());
}

class AllTests extends StatefulWidget {
  const AllTests({Key? key}) : super(key: key);

  @override
  _AllTestsState createState() => _AllTestsState();
}

class _AllTestsState extends State<AllTests> {
  IconData home = Icons.home;
  IconData play = Icons.play_circle_filled;
  onHomePress() {
    if (home == Icons.home) {
      home = Icons.account_balance_wallet_rounded;
    } else {
      home = Icons.home;
    }
  }

  onPlayPress() {
    if (play == Icons.play_circle_filled) {
      play = Icons.pause_circle_filled_rounded;
    } else {
      play = Icons.play_circle_filled;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Spacer(),
            Expanded(
              child: Stack(
//           overflow: Overflow.visible,
                children: [
                  Positioned(
                    top: 50,
                    child: Container(
                      height: 300,
                      width: 500,
                      color: Colors.pink,
                      child: IconButton(
                        icon: Icon(
                          play,
                          size: 80,
                          color: Colors.black,
                        ),
                        onPressed: () {
                          setState(() {
                            print('hello');
                            onPlayPress();
                          });
                        },
                      ),
                    ),
                  ),
                  Positioned(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 40.0),
                      child: Container(
                        height: 100,
                        width: 100,
                        color: Colors.yellow,
                        child: IconButton(
                          icon: Icon(
                            home,
                            size: 80,
                            color: Colors.black,
                          ),
                          onPressed: () {
                            setState(() {
                              onHomePress();
                            });
                          },
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Also you can take a look at AnimatedIcon to use animated play_pause button.

Answered By - Yashawant