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

Question

I have a card that has three containers. The first two have text and the last one is supposed to hold a TextFormField alongside some text. So i have a row to hold the two along one another. Only thing is when i add the TextFormField widget it does not appear and the console throws shows an error

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY 
    ╞═════════════════════════════════════════════════════════
    I/flutter (14101): The following assertion was thrown during 
    performLayout():
    I/flutter (14101): BoxConstraints forces an infinite width.
    I/flutter (14101): These invalid constraints were provided to 
    RenderRepaintBoundary's layout() function by the
    I/flutter (14101): following function, which probably computed the invalid 
    constraints in question:
    I/flutter (14101):   _RenderDecoration._layout.layoutLineBox 
    (package:flutter/src/material/input_decorator.dart:750:11)
    I/flutter (14101): The offending constraints were:
    I/flutter (14101):   BoxConstraints(w=Infinity, 0.0<=h<=100.0)



    I/flutter (14101): Another exception was thrown: RenderBox was not laid out: 
    RenderPadding#150b0 relayoutBoundary=up3 NEEDS-PAINT
    I/flutter (14101): Another exception was thrown: 
    'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 
    pos 12: 'child.hasSize': is not true.
    I/flutter (14101): Another exception was thrown: RenderBox was not laid out: 
    RenderPhysicalShape#1d998 relayoutBoundary=up4

The code looks like

    import 'package:flutter/material.dart';

    class Home extends StatefulWidget {
    @override
    _HomeState createState() => _HomeState();
    }

    class _HomeState extends State<Home> {
    @override
    Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: Card(
        elevation: 2.0,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              height: 100.0,
              color: Colors.purple,
            ),
            Container(
              height: 200.0,
              color: Colors.pink,
              child: Column(
                children: <Widget>[
                  new RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      text: 'Some Text',
                      style: TextStyle(
                          color: Colors.grey[800],
                          fontWeight: FontWeight.bold,
                          fontSize: 17.0),
                    ),
                  ),
                  new RichText(
                    softWrap: true,
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      text:
                          'Some other text',
                      style: TextStyle(
                          color: Colors.black54,
                          fontWeight: FontWeight.normal,
                          fontSize: 17.0),
                      ),
                        ),
                      Row(
                    children: <Widget>[
                      Text('adfa'),
                      Text('data'),
                      Form(
                        child: TextFormField(),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ));
    }
     }

score 70 · Accepted Answer · edited Nov 18 '20 at 13:32

70

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

edited Nov 18 '20 at 13:32

CopsOnRoad

237,138
77
654
440

answered Aug 12 '18 at 16:13

German Saprykin

6,631
2
29
26

2

In my case the Expanded is the one causing the error – Michael T Jul 02 '20 at 11:45

score 41 · Answer 2 · answered Feb 29 '20 at 12:46

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.

Use Expanded

 Row(
  children: <Widget>[
    Expanded(child: TextField()),
  ],
)

Use Flexible

Row(
  children: <Widget>[
    Flexible(child: TextField()),
  ],
)

Wrap it in Container or SizedBox and provide width

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

score 32 · Answer 3 · edited Apr 04 '20 at 07:14

32

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

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

It helped me.

edited Apr 04 '20 at 07:14

סטנלי גרונן

2,917
23
46
68

answered Apr 04 '20 at 02:51

Mukund Murari Pradhan Maku

339
3
4

6

Although this solution may help in regard to having a ListView, OP does not have one in the posted code. – Sludge Apr 06 '20 at 21:22

score 7 · Answer 4 · answered Sep 14 '19 at 14:04

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.

score 4 · Answer 5 · answered Mar 18 '21 at 13:46

4

if You Using ListView.builder And get this error then this is the solution

Use in builder== shrinkWrap: true,

ListView.builder(
   itemCount: historyList.length,
   shrinkWrap: true, ///////////////////////Use This Line 
   itemBuilder: (BuildContext context, int index) {
        return historyListItem(historyList[index]['text'], 60, () {}, false, size);
    },
 )

answered Mar 18 '21 at 13:46

Sumit

480
4
8

This answer is already mentioned [here](https://stackoverflow.com/a/61023212/12483095). Can you delete your post? – iDecode Apr 05 '21 at 11:32

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

5 Answers5

Linked