Home > other >  Row inside a Column with Expanded (AutosizeText not resizing)
Row inside a Column with Expanded (AutosizeText not resizing)

Time:08-31

I have a Here is the Widget Tree of the App

CodePudding user response:

try this:

Row(
      children: [
        Expanded(
          child: Column(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: AutoSizeText(
                          'The text to display sdasdasdadsd das dasd as da das da s as dasd ad as da s dads asdas das dsd s',
                          maxLines: 1,
                          minFontSize: 16,
                          overflowReplacement: Text(
                            'subject',
                          )),
                    ),
                    Container(
                      height: 100,
                      width: 100,
                      color: Colors.red,
                    ),
                  ],
                ),
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.purple,
              ),
            ],
          ),
        ),
      ],
    )

enter image description here enter image description here

CodePudding user response:

Try wrapping both Column and AutosizeText with Expanded

CodePudding user response:

The problem here is because of the first Row Widget as they said:

When a row is in a parent that does not provide a finite width constraint it will try to shrink-wrap its children along the horizontal axis

so here the Row Widget is trying to shrink its child AutoSizeText and here will be a second problem that if the text is bigger than the screen size it will overflow.

  • the solution here is to expand the AutoSizeText, but here will be another problem, as they said:

Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction

These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent

as you can see the Row Widget is trying to shrink its child, at the same time the Expanded Widget is trying to expand it, so they will conflict with each other and that causes your problem.

  • The safe solution here is to wrap 'AutoSizeText' with Expanded and as my dear friend #Dulaj Nadawa said: is to wrap The Column Widget with Expanded too

and for sure avoid using unnecessary Widgets

enter image description here.

hope I could help.

  • Related