How to align button in onboarding screen flutter - flutter

Question

I wanted to add a login button below the onboarding screen: how could I do that? Below I have provided the picture of the screen and the code I have implemented so far. Appreciate your help on this.
class OnBoardingScreen extends StatefulWidget {
const OnBoardingScreen({Key? key}) : super(key: key);
#override
_OnBoardingScreenState createState() => _OnBoardingScreenState();
}
class _OnBoardingScreenState extends State<OnBoardingScreen> {
PageController _controller = PageController();
//keep track of if we are on the last page or not
bool onLastPage = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
PageView(
onPageChanged: (index) {
setState(() {
onLastPage = (index == 2);
});
},
controller: _controller,
children: [
IntroPageOne(),
IntroPageTwo(),
IntroPageThree(),
],
),
//dot indicators
Container(
alignment: Alignment(0, 0.6),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//skip
GestureDetector(
onTap: () {
_controller.jumpTo(2);
},
child: Text('Skip', style: TextStyle(
height: 1.2,
fontFamily: "Roboto",
fontSize: 15,
color: MainGreen,
fontWeight: FontWeight.w500,
// fontWeight: FontWeight.w100,
))),
SmoothPageIndicator(
controller: _controller,
count: 3,
effect: WormEffect(
dotColor: Colors.grey,
activeDotColor: MainGreen,
),
),
//next or done
onLastPage
? GestureDetector(
onTap: () {
Get.to(() => const LoginScreen());
},
child: Text('Done',
style: TextStyle(
height: 1.2,
fontFamily: "Roboto",
fontSize: 15,
color: MainGreen,
fontWeight: FontWeight.w500,
// fontWeight: FontWeight.w100,
)),
)
: GestureDetector(
onTap: () {
_controller.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
);
},
child: Text('Next', style: TextStyle(
height: 1.2,
fontFamily: "Roboto",
fontSize: 15,
color: MainGreen,
fontWeight: FontWeight.w500,
// fontWeight: FontWeight.w100,
)),
)
],
)),
MainButton("Login")
],
));
}
}

Answer 1

Step by step:
Wrap your Stack by Expanded.
Wrap Expanded by Column.
Move MainButton("Login") from Stack children to Column children.
Like this:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: Stack(...)),
MainButton("Login"),
]
),
);
}

Answer 2

Since your goal is to have 2 widgets displayed in a vertical way, then you should use a Column instead of stacking everything.
Something like this
import 'package:flutter/material.dart';
class OnBoardingScreen extends StatefulWidget {
const OnBoardingScreen({Key? key}) : super(key: key);
#override
_OnBoardingScreenState createState() => _OnBoardingScreenState();
}
class _OnBoardingScreenState extends State<OnBoardingScreen> {
PageController _controller = PageController();
//keep track of if we are on the last page or not
bool onLastPage = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
children: [
PageView(
onPageChanged: (index) {
setState(() {
onLastPage = (index == 2);
});
},
controller: _controller,
children: [
IntroPageOne(),
IntroPageTwo(),
IntroPageThree(),
],
),
//dot indicators
Container(
alignment: Alignment(0, 0.6),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//skip
GestureDetector(
onTap: () {
_controller.jumpTo(2);
},
child: Text(
'Skip',
style: TextStyle(
height: 1.2,
fontFamily: "Roboto",
fontSize: 15,
color: MainGreen,
fontWeight: FontWeight.w500,
// fontWeight: FontWeight.w100,
),
),
),
SmoothPageIndicator(
controller: _controller,
count: 3,
effect: WormEffect(
dotColor: Colors.grey,
activeDotColor: MainGreen,
),
),
//next or done
onLastPage
? GestureDetector(
onTap: () {
Get.to(() => const LoginScreen());
},
child: Text('Done',
style: TextStyle(
height: 1.2,
fontFamily: "Roboto",
fontSize: 15,
color: MainGreen,
fontWeight: FontWeight.w500,
// fontWeight: FontWeight.w100,
)),
)
: GestureDetector(
onTap: () {
_controller.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
);
},
child: Text(
'Next',
style: TextStyle(
height: 1.2,
fontFamily: "Roboto",
fontSize: 15,
color: MainGreen,
fontWeight: FontWeight.w500,
// fontWeight: FontWeight.w100,
),
),
)
],
),
),
],
),
MainButton("Login"),
],
),
),
);
}
}

Answer 3

Try below code hope its helpful to you. I have try without Stack widget Wrap your Button inside Expanded and give its to alignment
Column(
children: <Widget>[
Text('All Leads'),
Text('Widget 2'),
Text('Widget 3'),
Text('Widget 4'),
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: ElevatedButton(
onPressed: () {},
child: Text('Login'),
),
),
),
],
),
Result Screen->