flutter layout rows to have columns inside - flutter

Question

i have a layout which i am working on but i am very new to flutter what i would like to do is
have a layout as such:
but what i have managed to do so far is this
the code for what i have managed to do is here:
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(20.0),
color: Colors.cyan,
child: Row(
children: <Widget>[
Checkbox(
value: false,
onChanged: (bool? value) {
setState(() {
print(value!);
});
}, //onChanged
),
Text("Enable 1"),
new Flexible(
child: new TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'username',
),
), //textfield
), //flexible
new Flexible(
child: new TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'password',
),
), //textfield
), //flexible
],
),
) //Container
), //Expanded
Expanded(
flex: 1,
child: Container(
child: ElevatedButton.icon(
icon: Icon(
Icons.save_alt,
color: Colors.green,
size: 24.0,
),
label: Text('Save'),
onPressed: () {
print('pressed');
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.greenAccent),
),
),
),
)
]
)//end of body,
i have no idea on how to achieve my desired output any help would be appreciated

Answer 1

You should use a Column instead of the Row.
Then a Row for the text and the checkbox to be aligned.
Here's an example:
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(20.0),
color: Colors.cyan,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Checkbox(
value: false,
onChanged: (bool value) {
setState(() {
print(value);
});
}, //onChanged
),
Text("Enable 1"),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: new TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'username',
),
),
), //flexible
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: new TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'password',
),
),
), //flexible
],
),
) //Container
), //Expanded
Expanded(
flex: 1,
child: Container(
child: ElevatedButton.icon(
icon: Icon(
Icons.save_alt,
color: Colors.green,
size: 24.0,
),
label: Text('Save'),
onPressed: () {
print('pressed');
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.greenAccent),
),
),
),
)
])