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:
1 2 3 4 5 6 | 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) |
Table of Contents
Solution 1
Question: How to solve TextField inside of Row causes layout exception: Unable to calculate size ?
Answer: 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.
Use Expanded
1 2 3 4 5 6 | Row( children: <Widget>[ Expanded(child: TextField()), OtherWidget(), ], ) |
Solution 2
Use Flexible
1 2 3 4 5 6 | Row( children: <Widget>[ Flexible(child: TextField()), OtherWidget(), ], ) |
Solution 3
Wrap it in Container or SizedBox and provide width
1 2 3 4 5 | Row( children: <Widget>[ SizedBox(width: 100, child: TextField()), OtherWidget(), ], |
Solution 4
use Flexible to use a Textfield inside a row.
1 2 3 4 5 6 7 8 9 10 11 12 | 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:
1 2 3 4 5 6 7 8 | 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.