How to position the child views in multiple positions in flutter? - flutter

Question

I have a login page which has three fields and a button at the center of the page. At the Bottom of the same page, I need to display a three buttons in a vertically. How can I do this in Flutter? Any suggestions would be really helpful.Thanks in advance.

Answer 1

Your question is not clear, I think you need to place 3 buttons at the bottom of a column.
return Scaffold(
appBar: AppBar(),
body: Container(
padding:
EdgeInsets.only(left: 20.0, right: 20.0, top: 25.0, bottom: 25.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: 'Text Field 1'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 2'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 3'),
),
SizedBox(
height: 25.0,
),
MaterialButton(
onPressed: () {},
child: Text('Button'),
color: Colors.blue,
minWidth: double.infinity,
),
Expanded(
child: SizedBox(),
),
MaterialButton(
onPressed: () {},
child: Text('Button 1'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 2'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 3'),
color: Colors.blue,
minWidth: double.infinity,
),
],
),
),
);
Expanded will fill the empty space
result will be like,
If your question is different, give me more details

Answer 2

You must use Stack and Positioned to achieve what you want, Check the example below
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
padding:
EdgeInsets.only(left: 20.0, right: 20.0, top: 25.0, bottom: 25.0),
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: 'Text Field 1'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 2'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 3'),
),
SizedBox(
height: 25.0,
),
MaterialButton(
onPressed: () {},
child: Text('Button'),
color: Colors.blue,
minWidth: double.infinity,
),
],
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Column(
children: <Widget>[
MaterialButton(
onPressed: () {},
child: Text('Button 1'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 2'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 3'),
color: Colors.blue,
minWidth: double.infinity,
),
],
),
),
],
),
),
);
}