Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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(),                       ),                     ],                   )                 ],               ),             ),           ],         ),       ),     ));     }      } 
like image 514
Taio Avatar asked Aug 12 '18 13:08

Taio


People also ask

What is render box in flutter?

A render object in a 2D Cartesian coordinate system. The size of each box is expressed as a width and a height. Each box has its own coordinate system in which its upper left corner is placed at (0, 0). The lower right corner of the box is therefore at (width, height).

How do you add a row to a column in flutter?

To create a row or column in Flutter, you add a list of children widgets to a Row or Column widget. In turn, each child can itself be a row or column, and so on. The following example shows how it is possible to nest rows or columns inside of rows or columns. The left column's widget tree nests rows and columns.

What is ListView builder in flutter?

ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView. builder is used instead of ListView. ListView. builder creates a scrollable, linear array of widgets.


2 Answers

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

like image 114
German Saprykin Avatar answered Oct 08 '22 18:10

German Saprykin


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()),   ], )        
like image 36
CopsOnRoad Avatar answered Oct 08 '22 18:10

CopsOnRoad