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

Taio picture Taio · Aug 12, 2018 · Viewed 47.8k times · Source

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(),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    ));
    }
     }

Answer

German Saprykin picture German Saprykin · Aug 12, 2018

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