Flutter Annoying Black Stripe at the bottom of screen - flutter

Question

I have made a Login Screen, the problem is I am getting a black stripe at the end of my screen, while in my code I have'nt added any color at the end, moreover I thought that this might because of sizebox, but even if I remove it, nothing really happens. Moreover at first when I was creating and debugging this code, there was no such line and once everything is done, it started appearing at the bottom..
Here's the output picture:
Here's my UI code:
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(vertical: 40),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(begin: Alignment.topCenter, colors: [
Colors.black,
Colors.black87,
Color(0xff0a0b0d),
])),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 70,
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Login",
style: TextStyle(color: Colors.white, fontSize: 30,fontFamily: 'Signatra'),
),
SizedBox(
height: 10,
),
Text(
"Welcome to T Post",
style: TextStyle(color: Colors.white, fontSize: 30, fontFamily: 'Signatra'),
),
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
)),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Color.fromARGB(220, 90, 30, 10),
blurRadius: 20,
offset: Offset(0, 10),
)
]),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey.shade200))),
child: TextField(
decoration: InputDecoration(
hintText: "Phone Number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey.shade200))),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
)
],
),
),
SizedBox(
height: 40,
),
Text(
"Forget Password",
style: TextStyle(color: Colors.grey),
),
SizedBox(
height: 40,
),
Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Color(0xff0a0b0d),
),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
),
SizedBox(
height: 60,
),
Text(
"Continue with social media",
style: TextStyle(
color: Colors.grey,
),
),
SizedBox(
height: 20,
),
Row(
children: <Widget>[
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blueAccent,
),
child: Center(
child: Text(
"Twitter",
style: TextStyle(color: Colors.white),
),
),
),
),
SizedBox(
width: 30,
),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.deepPurpleAccent,
),
child: Center(
child: Text(
"Skype",
style: TextStyle(color: Colors.white),
),
),
),
),
SizedBox(
width: 30,
),
],
)
],
),
),
)
],
),
),
),
),
);
}

Answer 1

It looks like you have containers wrapping their content, so it appears like a stripe. Try having one of the containers filling the screen instead of wrapping the content. What happens when you make the following change to the SingleChildScrollView?
Container(
padding: EdgeInsets.symmetric(vertical: 40),
width: double.infinity,
height: MediaQuery.of(context).size.height, // <<<<<< Add this line.
decoration: BoxDecoration(
gradient: LinearGradient(begin: Alignment.topCenter, colors: [
Colors.black,
Colors.black87,
Color(0xff0a0b0d),
]))