This is the current alignment of two buttons
Code:
Widget build(BuildContext context) {
return Scaffold(
body: Align(
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
child: const Text('Button 1'),
onPressed: () {},
),
TextButton(
onPressed: () {},
child: const Text('Button 2'),
),
],
),
),
);
}
How can I place Button 2 at the very bottom of the page while keeping Button 1 at the center? Like this:
>Solution :
Try this code:
Widget build(BuildContext context) {
return Scaffold(
body: Align(
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Spacer(),
ElevatedButton(
child: const Text('Button 1'),
onPressed: () {},
),
Spacer(),
TextButton(
onPressed: () {},
child: const Text('Button 2'),
),
],
),
),
);
}

