How to use SizeTransition with Text inside a Row without overflows

Question

Problem summary

I'm building simple animation in which, simply, a panel expands to the right on a onTap event. The layout can be summarized as follows:

• The panel has many tiles. Each tile has its own:
  • leading icon
  • title text
  • trailing icon
• Each tile, when expanded, shows the three widgets above
• Each tile, when shrinked, just shows the leading icon
• The panel is scrollable to hold many icons such as these
• At the end of the panel there's a simple icon which, when tapped, triggers the "expand" or "shrink" animation
• The animation is built with an AnimatedContainer on the panel and a SizeTransition on the single tiles (via one single controller on the parent class)

The problem is simple: when the tiles shrink, their inner text overflows in the row.

Sample code

I just made this reproducible example on DartPad.

The obvious solution isn't helping me out

The most obvious solution is to simply wrap the Text inside a Flexible Widget: this advised by Flutter's docs and it makes sense, but unluckily it completely breaks my Layout.

Flexible introduces a flex factor that in this context is 100% unwanted.

I want my leading icons to be always at the end of the row, so my Spacer widget should "prevail" there.

I can't just play with flex factors there, as it would unintendedly hide text depending on its value.

Another code smell

Another thing I really don't like is the fact that I have to build a controller on the parent class, but I'm not actually using it on the parent class (I'm just exploiting it so I can give it to the children).

I'm new to animations in Flutter so I'm kinda confused on how I should orchestrate the whole thing here.

Any help will be appreciated / upvoted / accepted. Thank you!

Answer 1

As far as I understood you in a right way you just need set sizes for Row inside of SizeTransition instead of Container sizes

Here is your modified sample https://dartpad.dev/?id=a2408d29a1e8c6ce7a1cef8f21e7491d

Answer 2

I'd try an OverflowBox or a FittedBox (wrapping your text), depending on the result you want to achieve.