flutter : overflowing RenderFlex in AnimatedCrossFade

Question

I am using AnimatedCrossFading like this

AnimatedCrossFade(
                crossFadeState: !toogleIcon.value
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                secondChild: Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(right: 16.w),
                      child: TextButton(
                        style: TextButton.styleFrom(
                          fixedSize: const Size(95.0, 38.0),
                          side: BorderSide(color: AppColors.primary[900]!),
                          backgroundColor: AppColors.primary[700],
                        ),
                        onPressed: onDeletePressed,
                        child: const Text(
                          "Delete",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                    IconButton(
                      splashColor: Colors.transparent,
                      highlightColor: Colors.transparent,
                      icon: SvgPicture.asset(AppIcons.close,
                          color: AppColors.error),
                      onPressed: () => toogleIcon.value = !toogleIcon.value,
                    )
                  ],
                ),
                firstChild: IconButton(
                  onPressed: () {
                    toogleIcon.value = true;
                  },
                  icon: SvgPicture.asset(actionIcon ?? AppIcons.trash),
                ),
                duration: const Duration(milliseconds: 200),
              )

When Tapped on my button and secondChild is close I got overflow error:

lib/…/components/message_appbar.dart:64
To inspect this widget in Flutter DevTools, visit: http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A46841%2FYo-XWcYh3aQ%3D%2F&inspectorRef=inspector-331
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

Try to add your Inside Row widgets wrap it with `Expanded` or `Flexible` refer my answer [here](https://stackoverflow.com/a/68463935/13997210) or [here](https://stackoverflow.com/a/68559619/13997210) or [here](https://stackoverflow.com/a/68444861/13997210) hope its helpful to you — Ravindra S. Patil, Dec 13 '21 at 12:30
I added to expanded but its result is https://pasteboard.co/KBmF3mCVF72q.png @RavindraS.Patil — Cyrus the Great, Dec 13 '21 at 14:31
can you add your toogleIcon and actionIcon because I create this two bool var but it gives the value error — Ravindra S. Patil, Dec 13 '21 at 14:33
you can remove actionIcon and toogleIcon is a ValueNotifier, you can use set state — Cyrus the Great, Dec 13 '21 at 14:36
But I wrapped `Row` in a `SizedBox` with ` width: 200,` and then wrapped all row children's inside Expanded, The problem is solved. But In my way I have to add fix size to row widget @RavindraS.Patil — Cyrus the Great, Dec 13 '21 at 14:38
As per my knowledge, If you used `SizedBox()` widget and gives height and width this widget is constant, but when the mobile screen is small it gives the overflow error @Cyrus the Great — Ravindra S. Patil, Dec 13 '21 at 17:39
Yes, you are right but Expanded did not work, as you can see in my attached Image https://pasteboard.co/KBmF3mCVF72q.png @RavindraS.Patil — Cyrus the Great, Dec 13 '21 at 17:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240105/discussion-between-ravindra-s-patil-and-cyrus-the-great). — Ravindra S. Patil, Dec 13 '21 at 17:51

score 0 · Answer 1 · answered Dec 13 '21 at 12:34

Wrap your row element with Expanded


AnimatedCrossFade(
                crossFadeState: !toogleIcon.value
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                secondChild: Row(
                  children: [
                  Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(right: 16.w),
                      child: TextButton(
                        style: TextButton.styleFrom(
                          fixedSize: const Size(95.0, 38.0),
                          side: BorderSide(color: AppColors.primary[900]!),
                          backgroundColor: AppColors.primary[700],
                        ),
                        onPressed: onDeletePressed,
                        child: const Text(
                          "Delete",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                   ),

                  Expanded(
                    child: IconButton(
                      splashColor: Colors.transparent,
                      highlightColor: Colors.transparent,
                      icon: SvgPicture.asset(AppIcons.close,
                          color: AppColors.error),
                      onPressed: () => toogleIcon.value = !toogleIcon.value,
                    )
                   )
                  ],
                ),
                firstChild: IconButton(
                  onPressed: () {
                    toogleIcon.value = true;
                  },
                  icon: SvgPicture.asset(actionIcon ?? AppIcons.trash),
                ),
                duration: const Duration(milliseconds: 200),
              )

I did before but, Its result https://pasteboard.co/KBmF3mCVF72q.png — Cyrus the Great, Dec 13 '21 at 14:30
Of course not https://pasteboard.co/KBmF3mCVF72q.png @JahidulIslam — Cyrus the Great, Dec 13 '21 at 17:49

flutter : overflowing RenderFlex in AnimatedCrossFade

1 Answers1