Row elements should change their padding depending on which element is selected. I've tried different options with padding, changed it in every way, but it's always the same option - AnimatedContainer always jumps, changes position, and does not stay in one place. How can this be corrected?
`
Positioned(
bottom: 100,
left: 52,
child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
for (int i = 0; i <= widget.planets.length - 1; i++)
Builder(
builder: (context) {
final isSelected = selectedIndex == i;
return GestureDetector(
onTap: () {
setState(() {
selectedIndex = i;
});
widget.getIndex(i);
},
child: Padding(
padding: EdgeInsets.only(
left: i == 0
? 0
: isSelected
? 16.0
: 26.0,
),
child: SizedBox(
height: 130,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: AnimatedContainer(
alignment: Alignment.center,
curve: Curves.decelerate,
duration: const Duration(milliseconds: 300),
width: isSelected ? 80 : 40,
height: isSelected ? 80 : 40,
child: SvgPicture.asset(
widget.planets[i].imageSvg,
),
),
),
Column(
children: [
Text(
widget.planets[i].points,
style: widget.planets[i].isAchieved
),
const SizedBox(height: 4),
Text(
widget.planets[i].title,
style: SRTypo.tabBarMediumWhite,
),
],
),
],
),
),
),
);
},
),
],
),
);
`
It is necessary that the indentation of the elements in the Row be the same, regardless of which element is selected