CODEWITHSUNDEEP
flutter
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9859

Can't Expand inside Row

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.

Upvotes: 11

Views: 16970

Answers (2)

Raouf Rahiche
Raouf Rahiche

Reputation: 31356

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")) 
              ],
            ),
          )
        ],
      ),
    )

Upvotes: 25

Sami Kanafani
Sami Kanafani

Reputation: 15741

your second row should be in Expanded, since you need to give it a width. And for this reason you are getting width constraints are unbounded error. Your code should be 

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

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

                  ],),
              )

            ],),

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

Upvotes: 5

Related Questions