Flutter Layout: How can I put a Row inside a Flex (or another Row) in Flutter? Also using Stack widget
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,
),),
],
),
));
The problem is that your Container is relying on its parent to decide its width. Since it has no parent, it is infinitely wide.
To fix the problem, give it a parent who tells its child how to handle width. A Flexible or Expanded does that. Expanded tells its child to be as big as possible (to expand) and a Flexible tells its child to be as small as possible (to shrink).
It sounds to me like an Expanded would be your best bet:
Change your code:
// Composed Widget
Widget boxText = new Container(
decoration: new BoxDecoration(
// all your other code here
);
to
// Composed Widget
Widget boxText = Expanded( // <-- Add this Expanded widget
child: new Container(
decoration: new BoxDecoration(
// all your other code here
),
);