Fade animation in selected tab text in flutter. The selected tab text occupies space even when its opacity is zero

Question

I have four tabs in flutter application. Each tab has is a child of AnimatedContainer Each tab has icon and text but the text is only visible for selected tab.(The width of container increases and text appears). I applied fade animation to text so that text fades in when selected. But the text overflow is seen until the enough width is available for the text to appear.

How can this be achieved so that text does not overflow?

Problem is illustrated in the link below.

Thanks!!

Answer 1

You should wrap your Text in Flexible widget and add softWrap:false property to your Text:

new Flexible(
    child: Text(
      "Very, very, very, long text...",
      softWrap: false,
    )
)

Also maybe for you will be useful information about Text property overflow: https://docs.flutter.io/flutter/rendering/TextOverflow-class.html

This link show you how to use overflow property: https://stackoverflow.com/a/54222581/2978855

Good Luck!