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.
How TextField inside of Row causes layout exception: Unable to calculate size Error occurs?
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)
How to solve TextField inside of Row causes layout exception: Unable to calculate size?
- How to solve TextField inside of Row causes layout exception: Unable to calculate size?
to solve TextField inside of Row causes layout exception: Unable to calculate size This error occurs due to TextField expands in horizontal direction and so does the Row , so we need to constrain the width of the TextField , there are many ways of doing it. you should use Flexible to use a Textfield inside a row.
- TextField inside of Row causes layout exception: Unable to calculate size
to solve TextField inside of Row causes layout exception: Unable to calculate size This error occurs due to TextField expands in horizontal direction and so does the Row , so we need to constrain the width of the TextField , there are many ways of doing it. you should use Flexible to use a Textfield inside a row.
Solution 1: Use Expanded
Use Expanded
Row(
children: <Widget>[
Expanded(child: TextField()),
OtherWidget(),
],
)
Solution 2: Use Flexible
Use Flexible
Row(
children: <Widget>[
Flexible(child: TextField()),
OtherWidget(),
],
)
Solution 3: Wrap with Container
or SizedBox
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
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: Use Expanded
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)
),
),
),
Summery
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 Check Out Below Tutorials
- Undefined class ‘FirebaseUser’
- error: could not find included file ‘Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig’ in search paths (in target ‘Runner’)
- type ‘int’ is not a subtype of type ‘String’ error in Dart
- CocoaPods not installed or not in valid state
- Error: Null safety features are disabled for this library
Leave a Reply