Flutter Dart: Allign Row Widgets at bottom - flutter

Question

I am new to Flutter, I am trying to show two buttons in a row at the bottom,
I have tried all possible solutions, including Align, Expanded etc but it didn't work..
Please if someone can help, as my buttons don't go at the bottom of screen
Here's my code:
return Scaffold(
body: SingleChildScrollView(
child: Column(children: [
Container(
//code
),
Container(
//code
),
Row(
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
],
),
]),
),
);

Answer 1

Here is a solution involving the bottomNavigationBar property of the Scaffold widget where you can put any Widget? (here, we're using your Row):
You can play around with the provided code on this dartpad.
Here's the result:
return Scaffold(
bottomNavigationBar: Padding(
padding: EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {},
),
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {},
),
),
],
),
),
body: SingleChildScrollView(
child: Column(children: [
Container(
//code
),
Container(
//code
),
]),
),
);

Answer 2

Here is your updated code, Please check
Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
SingleChildScrollView(
child: Column(
children: [
Container(
//code
),
Container(
//code
),
],
),
),
Row(
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
],
),
]),
),
OR
You can use bottomSheet method of scaffold
Scaffold(
bottomSheet: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
SizedBox(width: 50),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100, height: 80),
child: ElevatedButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
),
style: ElevatedButton.styleFrom(
primary: Colors.blue.shade900,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Intro()),
);
},
),
),
],
),
),
body: SingleChildScrollView(
child: Column(children: [
Column(
children: [
Container(
//code
),
Container(
//code
),
],
),
]),
),
),

Answer 3

The row will match its childrens height so because all buttons have the same height your final row is 80 (px) in height and therefore it doesnt matter where to align buttons. You can wrap your row in a container with color to see it.
The corruct solution would be to give the row height by wrapping it in a diffrent widget (like column) and stretch it to available space. Then inside the row you just need CrossAxisAlignment.end. But this depends on your layout.
For example:
Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
row: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
/* Buttons here **/
]),
)
]
)
You can also refer to the flutter layout guide and CSS Flexbox as it almost translates 1-1 to flutter and