I need to put 2 composed widgets in one Row
:
The composed widget is named "boxText". I need it twice, each inside a Border with two Texts
and a TextFormField
like:
Stack
Image and others
Form
Row or Flex or Whatever:
+------------------------------+ +------------------------------+
| Text Text TextFormField | | Text Text TextFormField |
+------------------------------+ +------------------------------+
My code (and tears):
IMPORTANT: Exception occurs only when TextFormField
is added.
@override
Widget build(BuildContext context) {
// Composed Widget
Widget boxText = new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.cyan[100],
width: 3.0,
style: BorderStyle.solid,
),
),
margin: new EdgeInsets.all(5.0),
padding: new EdgeInsets.all(8.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Text',
style: null,
),
new Text(
'Text',
style: null,
),
new TextFormField(
decoration: const InputDecoration(
hintText: '',
labelText: 'label',
),
obscureText: true,
),
],
),
);
return new Scaffold(
key: _scaffoldKey,
body: new Stack(
alignment: AlignmentDirectional.topStart,
textDirection: TextDirection.ltr,
fit: StackFit.loose,
overflow: Overflow.clip,
children: <Widget>[
new Container(
color: Colors.red[200],
margin: new EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.05,
right: MediaQuery.of(context).size.width * 0.05,
top: MediaQuery.of(context).size.height * 0.4,
bottom: MediaQuery.of(context).size.height * 0.1,
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: new Form(
key: _formKey,
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
new Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
boxText,
boxText,
],
),
],
),
),
),
],
),
);
}
How, if possible, can put this widgets to work without:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══
The 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 945 pos 7: 'layoutConstraints.maxWidth <
double.infinity'
Wrap BOTH your Container
and TextFormField
inside a Flexible
widget.
Widget boxText = new Flexible(child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.cyan[100],
width: 3.0,
style: BorderStyle.solid,
),
),
margin: new EdgeInsets.all(5.0),
padding: new EdgeInsets.all(8.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
'Text',
style: null,
),
new Text(
'Text',
style: null,
),
new Flexible (child: new TextFormField(
decoration: const InputDecoration(
hintText: '',
labelText: 'label',
),
obscureText: true,
),),
],
),
));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With