how do i represent two text fields in row
1,774
You have to use an Expanded
widget .
Replace your Row
widget with the one below:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
// optional flex property if flex is 1 because the default flex is 1
flex: 1,
child: TextField(
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.grey[400]
)
),
),
),
SizedBox(width: 10.0),
Expanded(
// optional flex property if flex is 1 because the default flex is 1
flex: 1,
child: TextField(
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.grey[400]
)
),
),
),
],
),
Author by
Aditya Pandey
Updated on December 21, 2022Comments
-
Aditya Pandey over 1 year
So I am trying to create a layout like this. Where I have 2 text fields horizontally but upon wrapping it in a row. However upon reloading no text field shows up:
Through this code however upon reloading the none of this appears:
Column( children: <Widget>[ SizedBox(height: 10.0), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ TextField( decoration: InputDecoration( labelText: 'Name', labelStyle: TextStyle( color: Colors.grey[400] ) ), ), SizedBox(width: 10.0), TextField( decoration: InputDecoration( labelText: 'Name', labelStyle: TextStyle( color: Colors.grey[400] ) ), ), ], ), SizedBox(height: 10.0), TextField( decoration: InputDecoration( labelText: 'Email/Mobile Number', labelStyle: TextStyle( color: Colors.grey[400], ) ), ), SizedBox(height: 10.0), TextField( decoration: InputDecoration( labelText: 'Password', labelStyle: TextStyle( color: Colors.grey[400], ) ), ), ], )
-
void almost 4 yearsWrap the two
TextFields
in anExpanded
widget
-