BoxConstraints forces an infinite height

Question

child:Column(
children: <Widget>[
  Container(
    height: double.infinity,
    width: 100.0,
    color: Colors.red,
    child: Text('hello'),
  ),)

in this,when i make height: double.infinity,it gives error in run saying BoxConstraints forces an infinite height. but when i give height manually it work fine. can anyone explain me why this happening.

Answer 1

BoxConstraints forces an infinite height

Why This Happens

You're asking to render an infinite height object without a height constraint... Flutter can't do that.

---

Column lays out children in two phases:

• Phase 1: non-Flex items (anything not Expanded, Flexible or Spacer)
  • done in unconstrained space
• Phase 2: Flex items (Expanded,Flexible, Spacer only)
  • done with remaining space

Phase 1

• Column's phase 1 vertical layout is done in unbounded space. That means:
  • no vertical constraint → no height limit
  • any widget with infinite height will throw the above error
  • you can't render an infinite height object in an infinite height constraint... that's goes on forever

Phase 2

• after Phase 1 widgets have taken as much space as they intrinsically need, phase 2 Flex items share the remaining/leftover space
  • the remaining space is calculated from incoming constraints minus Phase 1 widgets dimensions
  • double.infinity height will expand to use up the remaining space

Infinite Height is OK

Here's an example of using infinite height on a Container inside a Column, which is fine:

class ColumnInfiniteChildPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Flexible(
              child: Container(
                height: double.infinity, // ← perfectly fine
                  child: Text('Column > Container > Text')),
            ),
            Text('Column > Text')
          ],
        ),
      ),
    );
  }
}

Remove the Flexible and the error will be thrown.

Answer 2

How about this one.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
//                height: double.infinity,
                width: 100.0,
                color: Colors.red,
                child: Text('hello'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}