Hello Guys How are you all ? Hope You all Are fine. In todays tutorial we are going to solve TextField inside of Row causes layout exception: Unable to calculate size error in flutter.
I’m attempting to create a column that has 3 rows. First children is Row [Image] Second Children in Row [TextField] and Third Children is Row [Buttons]. When I run I get the following exception:
I/flutter ( 7674): BoxConstraints forces an infinite width. I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following I/flutter ( 7674): function, which probably computed the invalid constraints in question: I/flutter ( 7674): RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13) I/flutter ( 7674): The offending constraints were: I/flutter ( 7674): BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
Question: How to solve TextField inside of Row causes layout exception: Unable to calculate size ?
Answer: I got this error because of TextField expands in Horizontal direction and so does the Row, so we need to contain the width of the TextField. So We have to Use Expand. Like Below.
Row( children: <Widget>[ Expanded(child: TextField()), OtherWidget(), ], )
Row( children: <Widget>[ Flexible(child: TextField()), OtherWidget(), ], )
Wrap it in
SizedBox and provide
Row( children: <Widget>[ SizedBox(width: 100, child: TextField()), OtherWidget(), ],
use Flexible to use a Textfield inside a row.
Row( children: <Widget>[ new Text("hi there"), new Container( child:new Flexible( child: new TextField( ), ),//flexible ),//container ],//widget ),//row
Expanded( child: TextField( decoration: InputDecoration( hintText: "Demo Text", hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red) ), ), ),
This Above 5 Solution Is Worked For Me. Hope it work for you too.
So it’s all About this error. Hope this tutorial helped you a lot. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.
- How to make a blur Background Image effect in Flutter using BackdropFilter.
- Create Rounded Corners Image in Flutter.