How to solve ' RenderBox was not laid out:' in flutter in a card widget

I am replying in enhancement of German Saprykin post, I was also getting the same below error

════════ (2) Exception caught by rendering library ══════════════════════════ An InputDecorator, which is typically created by a TextField, cannot have an unbounded width. This happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it. 'package:flutter/src/material/input_decorator.dart': Failed assertion: line 910 pos 7: 'layoutConstraints.maxWidth < double.infinity' User-created ancestor of the error-causing widget was: TextField file:///C:/CommBack/My_Workplace/Flutter/wiremusic/wiremusic_dev/lib/wire/widgets/searchfield.dart:15:14 ══════════════════════════════════════════════════════════

════════ (3) Exception caught by rendering library ══════════════════════════ RenderBox was not laid out: _RenderDecoration#b1ce0 relayoutBoundary=up26 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1681 pos 12: 'hasSize' User-created ancestor of the error-causing widget was: TextField file:///C:/CommBack/My_Workplace/Flutter/wiremusic/wiremusic_dev/lib/wire/widgets/searchfield.dart:15:14 ══════════════════════════════════════════════════════════

because of this below earlier source lines.

return Container(
  color: Colors.yellow,
  constraints: BoxConstraints(minWidth: 230.0, minHeight: 25.0),
  child: TextField(),
);

because the TextField requires the ancestor hasSize explicitly and after mentioning the width explicitly to Container, the error disappeared like Thanos

return Container(
  color: Colors.yellow,
  width: 230,
  constraints: BoxConstraints(minWidth: 230.0, minHeight: 25.0),
  child: TextField(),
);

Hope this would help someone.


After spending much time, I found the solution as below:

Please add shrinkWrap: true inside ListView.builder().

It helped me.


TextFormField causes the issue. It needs constraints for width. E.g. wrap it into Expanded widget or Container with width.


Error reason:

Row expands in horizontal direction and so does the TextField, so we need to constrain the width of the TextField, you can try any of following to do so.

  1. Use Expanded

     Row(
      children: <Widget>[
        Expanded(child: TextField()),
      ],
    )
    
  2. Use Flexible

    Row(
      children: <Widget>[
        Flexible(child: TextField()),
      ],
    )
    
  3. Wrap it in Container or SizedBox and provide width

    Row(
      children: <Widget>[
        SizedBox(width: 100, child: TextField()),
      ],
    )