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