Check the Bottom White space
This below is the code of the Root widget. How to remove the empty area by default, and make this adaptable to every device?
@override
Widget build(BuildContext context) {
var padding = MediaQuery.of(context).padding;
var height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: MediaQuery.of(context).size.height),
// height: height,
child: Stack(
children: <Widget>[
Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(
height: padding.top,
),
Container(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 20, top: 20),
child: GestureDetector(
onTap: () {
print("Trouble Logging in?");
},
child: Text(
"Trouble logging in?",
style: TextStyle(
fontSize: 15,
color: Color.fromRGBO(8, 199, 68, 1),
),
),
),
),
),
Container(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(top: 30, left: 50),
child: Text(
"Login",
style: TextStyle(
fontSize: 50,
color: Color.fromRGBO(69, 69, 69, 1),
),
),
),
),
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding:
const EdgeInsets.only(top: 50, left: 60, right: 40),
child: Row(
children: <Widget>[
Text(
"Email",
style: TextStyle(
fontSize: 18,
color: Color.fromRGBO(82, 93, 92, 1),
),
),
Expanded(
child: Container(),
),
Visibility(
visible: emailError,
child: Text(
"Invalid Email",
style: TextStyle(
color: Colors.red[400],
),
),
)
],
),
),
),
Container(
alignment: Alignment.center,
child: Padding(
padding:
const EdgeInsets.only(top: 10, left: 40, right: 40),
child: TextFormField(
validator: (_input) {
if (_input.isEmpty ||
!_input.contains("@") ||
!_input.contains(".")) {
return "Invalid Email";
}
return null;
},
controller: emailcontroller,
onChanged: (value) => {
setState(() {
email = value;
})
},
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 13),
filled: true,
fillColor: emailError
? Colors.red[100]
: Color.fromRGBO(246, 246, 246, 1),
prefixIcon: Icon(Icons.alternate_email),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30)),
),
),
),
),
Container(
alignment: Alignment.centerLeft,
child: Padding(
padding:
const EdgeInsets.only(top: 30, left: 60, right: 40),
child: Row(
children: <Widget>[
Text("Password",
style: TextStyle(
fontSize: 18,
color: Color.fromRGBO(82, 93, 92, 1))),
Expanded(
child: Container(),
),
Visibility(
visible: passwordError,
child: Text("Incorrect Password",
style: TextStyle(color: Colors.red[400])),
)
],
),
),
),
Container(
alignment: Alignment.center,
child: Padding(
padding:
const EdgeInsets.only(top: 10, left: 40, right: 40),
child: TextFormField(
validator: (_input) {
if (_input.isEmpty || _input.length < 8) {
return "Invalid Password";
}
return null;
},
controller: passwordcontroller,
onChanged: (value) => {
setState(
() {
password = value;
},
)
},
obscureText: true,
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 13),
filled: true,
fillColor: passwordError
? Colors.red[100]
: Color.fromRGBO(246, 246, 246, 1),
prefixIcon: Icon(Icons.lock_outline),
suffixIcon: GestureDetector(
onTap: () => {
setState(() {
hide = !hide;
})
},
child: Icon(
hide
? Icons.visibility_off
: Icons.visibility,
color: Colors.black),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
),
Container(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 60, top: 20),
child: GestureDetector(
onTap: null,
child: Text(
"Forgot password?",
style: TextStyle(
fontSize: 16,
color: Color.fromRGBO(8, 199, 68, 1),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Container(
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(
colors: [
Color.fromRGBO(3, 163, 99, 1),
Color.fromRGBO(8, 199, 68, 1)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight)),
alignment: Alignment.center,
child: MaterialButton(
onPressed: () {
if (_formKey.currentState.validate()) {
signin();
}
},
// signin,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Log In",
style: TextStyle(
color: Colors.white, fontSize: 18)),
),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(Icons.exit_to_app,
color: Colors.white),
)
],
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Don't have an account? ",
style: TextStyle(
fontSize: 15, fontFamily: 'Mulish-Reg')),
GestureDetector(
onTap: () =>
Navigator.of(context).push(register()),
child: Text("Sign up",
style: TextStyle(fontSize: 15)))
],
)),
Padding(
padding: EdgeInsets.only(top: 30, left: 30, right: 30),
child: Image.asset('assets/or.png')),
Padding(
padding: EdgeInsets.only(top: 30, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: GestureDetector(
onTap: () => facebook(),
child: Image.asset(
'assets/fb.png',
scale: 2.5,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: GestureDetector(
onTap: () => google(),
child: Image.asset(
'assets/google.png',
scale: 2.5,
),
),
),
],
),
),
// SizedBox(
// height: padding.top,
// ),
Container(
width: double.maxFinite,
alignment: Alignment.bottomCenter,
child: Image.asset('assets/bottom.png'),
),
],
),
),
loading
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.black26,
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Color.fromRGBO(3, 163, 99, 1),
),
),
),
)
: Positioned(
bottom: 0,
height: 0,
width: 0,
child: Container(),
),
],
),
),
),
);
}
}
The bottom.png in the Container() in Stack is to be fixed at the bottom of the screen
Container(
width: double.maxFinite,
alignment: Alignment.bottomCenter,
child: Image.asset('assets/bottom.png'),
),
this container I want to be at the bottom of the screen removing the white space at the end
