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(), ), ], ) ], ), ), ], ), ), )); } }
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).
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.
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.
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.
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()), ], )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With