CODEWITHSUNDEEP
flutterdartalignment
Hasen
Hasen

Reputation: 12324

Flutter Row with CrossAxisAlignment.stretch throws error BoxConstraints forces an infinite height

Not sure why this throws the error BoxConstraints forces an infinite height

 return Scaffold(
  body: Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
           Text('OK'),
           Text('Then')
       ],
      )
    ],
  ),
);

Without the CrossAxisAlignment.stretch there's no problem but I need the element in the row to stretch from the top of the screen all the way to the bottom.

I get the same error when trying to use Expanded around either the individual text widgets or around a Column containing the text widgets.

Upvotes: 5

Views: 10860

Answers (3)

Giraldi
Giraldi

Reputation: 17311

You wrap your Row in IntrinsicHeight first.

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[Text('OK'), Text('Then')],
  ),
),

Upvotes: 7

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

This doesn't throw an error

return Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[Text('OK'), Text('Then')],
      ))
    ],
  ),
);

UPD: If you want to stretch your Texts - I think, you don't need Column

return Scaffold(
  body: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        alignment: Alignment.center,
        child: Text('OK'),
      ),
      Container(
        alignment: Alignment.center,
        child: Text('Then'),
      ),
    ],
  ),
);

Upvotes: 1

LarssonK
LarssonK

Reputation: 3043

Move CrossAxisAlignment.stretch to the column.

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('OK'), Text('Then')],
      )
    ],
  ),

to have the elements stretch top to bottom reorganise everything

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            color: Colors.amber,
            child: Align(child: Text('OK')),
          ),
          Container(
              color: Colors.amberAccent, 
              child: Align(child: Text('Then')))
        ],
      ))
    ],
  ),

Just saw Andrey's answer and realised you don't even need the CrossAxisAlignment.stretch

  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: double.infinity,
            color: Colors.amber,
            child: Align(child: Text('OK')),
          ),
          Container(
              height: double.infinity,
              color: Colors.amberAccent,
              child: Align(child: Text('Then')))
        ],
      ))
    ],
  ),

Upvotes: 0

Related Questions