Quantcast
Channel: Active questions tagged row - Stack Overflow
Viewing all articles
Browse latest Browse all 479

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

$
0
0

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


Viewing all articles
Browse latest Browse all 479

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>