Add special options to layout Flutter - user-interface

Question

I have this Code:
new Container(
padding: new EdgeInsets.only(
top: 20.0,
),
alignment: FractionalOffset.centerRight,
child: new GestureDetector(
child: new Text('Forgot password?', style: new TextStyle(color: Color(0xFF2E3233))),
),
),
new Container(
width: 300.0,
height: 45.0,
alignment: FractionalOffset.center,
decoration: new BoxDecoration(
color: const Color(0xFF2E3233),
borderRadius: new BorderRadius.all(const Radius.circular(30.0)),
),
child: new Text("Sign in",style: new TextStyle(color: Colors.white,fontWeight: FontWeight.bold,letterSpacing: 0.3,),),
),
new Container(
padding: new EdgeInsets.only(
top: 20.0,
),
alignment: FractionalOffset.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new GestureDetector(
child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
),
new GestureDetector(
child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
onTap: moveToRegister,
),
],
),
),
Thats the result:
https://www.dropbox.com/s/bqu2tv6rej0ejlt/Screenshot_20181104-171155.png?dl=0
But I want to achieve this:
https://www.dropbox.com/s/754hempszq8xw5k/Screenshot_20181104-171202.png?dl=0
EDIT:
build method:
#override
Widget build(BuildContext context) {
return new Stack(
children: <Widget>[
// The containers in the background
new Column(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height * .44,
color: const Color(0xFF84A2AF),
padding: new EdgeInsets.only(
top: 50.0,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new Image.asset('assets/app_logo_transparent_bg.png',
height: 100.0,
width: 100.0,
),
],
),
),
new Container(
height: MediaQuery.of(context).size.height * .56,
color: Colors.white,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Align(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildSubmitButtons(),
),
),
],
)
/*child: new Align(
alignment: Alignment.bottomCenter,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildSubmitButtons(),
),
),*/
),
],
),
// The card widget with top padding,
// incase if you wanted bottom padding to work,
// set the `alignment` of container to Alignment.bottomCenter
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .33,
right: 15.0,
left: 15.0),
child: new Container(
height: 130.0,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 2.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: buildInputs(),
),
),
),
)
],
);
}
I tried so much but nothing seems to help? How I can align the Layout to the bottom...

Answer 1

Just a few changes on your container (.56) , remove the Align widget, stretch your Column and add an Expanded item inside your Column to fill the space available.
new Container(
height: MediaQuery.of(context).size.height * .56,
color: Colors.white,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: buildSubmitButtons(),
),
),
],
)
/*child: new Align(
alignment: Alignment.bottomCenter,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: buildSubmitButtons(),
),
),*/
),
Probably you will need to move your 'Forgot password' above the Expanded widget inside your Column.