Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't Expand inside Row

Tags:

flutter

I am trying to Expand text widget that placed in Row. But I am getting error.

Code:

class MainContainer extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return Column (
      children: <Widget>[
        Container(

        ),
        Container(
          child: Row(
            children: <Widget>[
            Row(
              children: <Widget>[
              Text("label1"),
              Expanded(child: Text("label2")) // Problem is here

            ],)

          ],),

        ),
        Container(
          child: Row(children: <Widget>[
            Text("Some Text")
          ],),
        ),
      ],    
    );
  }

}

Error:

I/flutter ( 5480): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 5480): The following assertion was thrown during performLayout(): I/flutter ( 5480): RenderFlex children have non-zero flex but incoming width constraints are unbounded. I/flutter ( 5480): When a row is in a parent that does not provide a finite width constraint, for example if it is in a I/flutter ( 5480): horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a I/flutter ( 5480): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining I/flutter ( 5480): space in the horizontal direction. I/flutter ( 5480): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child I/flutter ( 5480): cannot simultaneously expand to fit its parent. I/flutter ( 5480): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible I/flutter ( 5480): children (using Flexible rather than Expanded). This will allow the flexible children to size I/flutter ( 5480): themselves to less than the infinite remaining space they would otherwise be forced to take, and I/flutter ( 5480): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum I/flutter ( 5480): constraints provided by the parent.

like image 411
Dmitry Bubnenkov Avatar asked Aug 01 '19 09:08

Dmitry Bubnenkov


People also ask

When a row is in a parent that does not provide a finite width constraint for example if it is in a?

I/flutter ( 5480): When a row is in a parent that does not provide a finite width constraint, for example if it is in a I/flutter ( 5480): horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis.

How do you make a row flexible in flutter?

Flexible is a built-in widget in flutter which controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit. tight.


1 Answers

The problem is that your Text constraints are unbounded because of Expanded so simply you can't put an unbounded with widget inside a bounded one (or non-zero flex)

The solution is simply by putting the parent Row inside a flex widget (Flexible/Expanded)

    Container(
      child: Row(
        children: <Widget>[
          Flexible(
            child: Row(
              children: <Widget>[
                Text("label1"),
                Expanded(child: Text("label2")) 
              ],
            ),
          )
        ],
      ),
    )
like image 168
Raouf Rahiche Avatar answered Sep 20 '22 21:09

Raouf Rahiche