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();
                    });
                  },
                ),
              ),
            ),
          )
        ]),
      ],
    ),
  ),
);
}
}

CodePudding user response：

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.

CodePudding user response：

While using Stack provide its size. In column, you can wrap with SizedBox. And On Widget tree, UI priority is bottom to top, when you have small tappable widget over large one, place at last on stack children.

Here is your widget.

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: [
            SizedBox(
              height: 100   300   40,

              /// total height F
              child: Stack(
                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(
                    top: 0,
                    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();
                            });
                          },
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}