Flutter: animated widgets appearing on top of other widgets

69 views Asked by At

I have this widget to display 4 squares:

Widget fourPlayers() {
    return Stack(
      children: [
        Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  fourPlayersWidgets(0, 1),
                  Container(
                    width: 10,
                  ),
                  fourPlayersWidgets(1, 3),
                ],
              ),
            ),
            Container(
              height: 10,
            ),
            Expanded(
              child: Row(
                children: [
                  Container(
                    height: 10,
                  ),
                  fourPlayersWidgets(2, 1),
                  Container(
                    width: 10,
                  ),
                  fourPlayersWidgets(3, 3),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

One of the animations is this one:

Widget finalMsg(int index) {
    return SlideInRight(
      manualTrigger: true,
      from: -MediaQuery.of(context).size.height,
      duration: const Duration(milliseconds: 500),
      controller: (controller) => finalMsgControllerList[index] = controller,
      child: Center(
        child: Padding(
          padding: const EdgeInsets.only(bottom: 100, left: 20, right: 20),
          child: Text(
            finalMsgTxt[index],
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }

It uses this package: https://pub.dev/packages/animate_do but my question is not really related to it.

Video: https://youtu.be/TLnl02TiGMc?si=Df9Rigf1buE-tYIf

Animation works fine, but it appears over other widgets. Also on top of AppBar (phone didn't record that part). How can I show the animated widget only from its parent without disturbing any other widgets?

In CSS there is z-index, so I was looking something like it. I saw this package but it has 0% popularity: https://pub.dev/packages/indexed

0

There are 0 answers