Flutter: Bottom sheet with TextField/TextFormField
Solution 1
You will have to provide a specific width to the TextField
, simply provide width
in your Container
or wrap your Column
in Expanded
.
Solution 1
Container(
width: 100, // do it in both Container
child: TextField(),
),
Solution 2
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded( // wrap your Column in Expanded
child: Column(
children: <Widget>[
Text('item 1'),
Container(child: TextField()),
],
),
),
Expanded( // wrap your Column in Expanded
child: Column(
children: <Widget>[
Text('item 2'),
Container(child: TextField()),
],
),
),
],
),
Solution 2
In the above Question, the Column
tries to be wider than the space the Row
(its parent) can allocate to it, causing an overflow error. Why does the Column
try to do that? To understand this layout behavior, you need to know how Flutter framework performs layout:
“To perform layout, Flutter walks the render tree in a depth-first traversal and passes down size constraints from parent to child… Children respond by passing up a size to their parent object within the constraints the parent established.”
In this case, the Row
widget doesn’t constrain the size of its children, nor does the Column
widget. Lacking constraints from its parent widget, the second Text widget tries to be as wide as all the characters it needs to display. The self-determined width of the Text widget then gets adopted by the Column
which clashes with the maximum amount of horizontal space its parent the Row
widget can provide.
How to fix it?
Well, you need to make sure the Column
won’t attempt to be wider than it can be. To achieve this, you need to constrain its width. One way to do it is to wrap the Column
in an Expanded
widget:
The error can be avoided by wrapping the TextField in an Expanded or Flexible widget. So believe the column should be Expanded
:
Row(
children: [
Expanded(
child: Column(
children: [
Text('This is the text and there enough to wrap'),
TextField()
]
))
]
);
DolDurma
Updated on January 26, 2022Comments
-
DolDurma over 2 years
In part of our application, I would like to have a simple form in
BottomSheet
like with the below code. unfortunately when i put into that, I get an errorThe following assertion was thrown during performLayout(): An InputDecorator, which is typically created by a TextField, cannot have an unbounded width. This happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it. 'package:flutter/src/material/input_decorator.dart': Failed assertion: line 881 pos 7: 'layoutConstraints.maxWidth < double.infinity'
my implemented code:
void _settingModalBottomSheet(context){ showModalBottomSheet( context: context, elevation: 8.0, builder: (BuildContext bc){ return Directionality( textDirection: TextDirection.rtl, child: ConstrainedBox( constraints: BoxConstraints( minHeight: 250.0 ), child: Container( padding: EdgeInsets.fromLTRB(0.0,10.0,0.0,10.0), child: new Wrap( children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: Center( child: Text( 'please fill this form', style: TextStyle( fontSize: 13.0, ), ), ), ), Divider(), Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Column( children: <Widget>[ Text('item 1'), Container( child: TextField(), ) ], ), Column( children: <Widget>[ Text('item 2'), Container( child: TextField(), ) ], ), ], ), ], ), ), ), ); } ); }