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)
Solution 1
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.
Use Expanded
Row(
children: <Widget>[
Expanded(child: TextField()),
OtherWidget(),
],
)
Solution 2
Use Flexible
Row(
children: <Widget>[
Flexible(child: TextField()),
OtherWidget(),
],
)
Solution 3
Wrap it in Container
or SizedBox
and provide width
Row(
children: <Widget>[
SizedBox(width: 100, child: TextField()),
OtherWidget(),
],
Solution 4
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
Solution 5
The solution is to wrap your Text()
inside one of the following widgets: Either Expanded
or Flexible
. So, your code using Expanded will be like:
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.
Also Read
- How to make a blur Background Image effect in Flutter using BackdropFilter.
- Create Rounded Corners Image in Flutter.