Dart/Flutter. elements jump in Row if the child widget changes size

22 Views Asked by At

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

0

There are 0 best solutions below