'An InputDecorator, which is typically created by a TextField, cannot have an unbounded width
Not sure how to get rid of this error (An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.), but also make the two inner textfields take up the entire width of the column.
Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: const EdgeInsets.only(left: 50, right: 50),
child: AutoCompleteTextView(
suggestionsApiFetchDelay: 300,
focusGained: () {},
onTapCallback: (_) async {
},
focusLost: () {
},
onValueChanged: (String text) {
},
controller: startEditingController,
suggestionStyle:
Theme.of(context).textTheme.bodyText2,
getSuggestionsMethod: getLocationSuggestionsList,
tfTextAlign: TextAlign.left,
tfStyle: TextStyle(
fontSize: 16,
color: Theme.of(context).textTheme.bodyText2.color,
),
tfTextDecoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 0, left: 8.0),
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey[800], width: 1.0),
borderRadius: BorderRadius.zero,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.deepPurple[600], width: 1.0),
borderRadius: BorderRadius.zero,
),
hintText: "Current Location",
labelText: 'Start',
labelStyle: kcarPurpleLabelStyle,
),
),
),
Container(
margin:
const EdgeInsets.only(top: 5, left: 50, right: 50),
child: AutoCompleteTextView(
suggestionsApiFetchDelay: 300,
focusGained: () {},
onTapCallback: (_) async {
},
focusLost: () {
},
onValueChanged: (String text) {
},
controller: startEditingController,
suggestionStyle:
Theme.of(context).textTheme.bodyText2,
getSuggestionsMethod: getLocationSuggestionsList,
tfTextAlign: TextAlign.left,
tfStyle: TextStyle(
fontSize: 16,
color: Theme.of(context).textTheme.bodyText2.color,
),
tfTextDecoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 0, left: 8.0),
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey[800], width: 1.0),
borderRadius: BorderRadius.zero,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.deepPurple[600], width: 1.0),
borderRadius: BorderRadius.zero,
),
hintText: "Current Location",
labelText: 'Destination',
labelStyle: kcarPurpleLabelStyle,
),
),
)
]),
Solution 1:[1]
Keep your column, but wrap each of your text field in the Expanded widget. The reasoning is given from the official docs:
A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
Source: Expanded Class
Solution 2:[2]
The accepted answer will solve your problem but the documentation for the Column widget provides some more insight into why the issue is occurring.
When a Column lays out its non-flex children (those that have neither Expanded or Flexible around them), it gives them unbounded constraints so that they can determine their own dimensions (passing unbounded constraints usually signals to the child that it should shrink-wrap its contents). The solution in this case is typically to just wrap the inner column in an Expanded to indicate that it should take the remaining space of the outer column, rather than being allowed to take any amount of room it desires.
This is an issue for variations of the TextField widget since they don't intrinsically have a defined width.
Wrapping the TextField in an Expanded or Flexible widget will take care of the error:
Expanded(
child: TextField(
keyboardType: TextInputType.number,
),
)
Solution 3:[3]
I got the same error when I had too many nested columns with TextField. I got around the problem by using SizedBox, like this:
SizedBox(
width: 60,
height: 60,
child:
TextField(),
);
From the docs for SizedBox:
A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will try to size itself to match the child's size in that dimension.
Solution 4:[4]
In case of a complex row-column-structure, additional rows and columns will need an Expanded(). Otherwise, the error will persist.
return Row(
children: [
Expanded(child: // HERE ALSO
Column(children: [
Expanded( // NOT ONLY HERE
child:TextField()
)
])
)
]
);
Same holds true for a TabView under certain conditions:
Expanded(child: TabBarView(children: []))
Solution 5:[5]
Try removing the margins in your code. And if you could be more clear or show an image of what you want.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mohammad Assad Arshad |
| Solution 2 | Joe Muller |
| Solution 3 | dKen |
| Solution 4 | Dabbel |
| Solution 5 | NILOTPAL GHOSH |