flutter pin a widget relative to another widget - flutter

Question

I am trying to create a form that has a card and a login button:
I have tried the following code:
import 'package:flutter/material.dart';
class LoginScreenDemo extends StatefulWidget {
#override
_LoginScreenState createState() => new _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreenDemo> {
#override
Widget build(BuildContext context) {
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
style: TextStyle(fontSize: 25.0),
decoration: InputDecoration(
labelText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
),
);
final password = TextFormField(
obscureText: true,
autofocus: false,
style: TextStyle(fontSize: 25.0),
decoration: InputDecoration(
labelText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
),
);
final loginButton = Padding(
padding: EdgeInsets.only(top: 10.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
onPressed: () {},
padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 30.0),
color: Colors.lightBlueAccent,
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
),
);
final goToSignUpScreen = Padding(
padding: EdgeInsets.only(top: 5.0),
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
onPressed: () {
Navigator.of(context).pushNamed('/signup');
},
child: Text(
"New account? Sign Up",
style: TextStyle(
fontSize: 15.0,
),
),
),
);
final loginCard = Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
color: Colors.white,
elevation: 4.0,
child: ListView(
shrinkWrap: true,
padding:
EdgeInsets.only(top: 100.0, left: 50.0, right: 50.0, bottom: 75.0),
children: <Widget>[
email,
SizedBox(height: 15.0),
password,
],
),
);
final buttonsContainer = Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(
top: MediaQuery.of(context).orientation == Orientation.landscape
? MediaQuery.of(context).size.height * 0.35
: MediaQuery.of(context).size.height * 0.26,
),
child: Column(
children: <Widget>[
loginButton,
goToSignUpScreen,
],
),
);
final backgroundContainer = Container(
height: MediaQuery.of(context).size.height * 0.40,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background_golf_course.jpeg'),
fit: BoxFit.cover,
),
),
);
final formContainer = Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.25,
right: 20.0,
left: 20.0,
),
child: Container(
width: MediaQuery.of(context).size.width * 0.75,
child: Stack(
children: <Widget>[
loginCard,
buttonsContainer,
],
),
),
);
return SafeArea(
child: Container(
color: Color(0xFFEEEEEE),
child: Stack(
children: <Widget>[
backgroundContainer,
formContainer,
],
),
),
);
}
}
I have placed the card and buttons in a stack widget and tried to place the buttons (as seen in buttonsContainer) above the card by defining their height and padding.
As, can be seen, I need to define different padding for portrait and landscape modes and also, it breaks if the screen size changes.
Is there a neater way to implement this?
Thanks

Answer 1

Container does have a property transform. Usage of this is an alternative to the top padding. Then buttonsContainer is placed relative to loginCard but is overlapping.
Widget buttonsContainer has a translation to the top.
final buttonsContainer = Container(
transform: Matrix4.translationValues(0.0, -34.0, 0.0),
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
loginButton,
goToSignUpScreen,
],
),
);
Widget formContainer then uses Column instead of Stack.
final formContainer = Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.25,
right: 20.0,
left: 20.0,
),
child: Container(
width: MediaQuery.of(context).size.width * 0.75,
child: Column(
children: <Widget>[
loginCard,
buttonsContainer,
],
),
),
);