Unable to build center () and text() widget - flutter

Question

I am working on my new app. While creating the login page, i faced some issue. My code works fine till a point and after that point or line, it stops building more widgets.
My code(working portion):
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner:false,
home: Background1(),
),
);
class Background1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold( //Whole screen
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Colors.purple.shade700,
Colors.purple.shade500,
Colors.purple.shade300,
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox (height: 80),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Text("LOGIN", style: TextStyle(color: Colors.white,fontSize: 40,fontWeight: FontWeight.bold)),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20),bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20)),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [BoxShadow(
color: Color.fromRGBO(225, 95, 27, 0.3),
blurRadius: 20,
offset: Offset(0,10),
)],
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Email or phone number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
),
),
SizedBox(height: 40),
Text("Forgot Password?", style: TextStyle(color: Colors.white)),
SizedBox(height: 40),
Container(
height: 40,
margin: EdgeInsets.symmetric(horizontal: 50),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.purple.shade800,
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text("LOGIN", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
),
),
],
),
),
),
),
],
),
),
),
);
}
}
Couldn't able to create center() and Text() widget, which is at the end of the code.
child: Text("LOGIN", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
),
),
And also it doesn't build widgets as i write further. I've attached an image showing my emulator where it doesn't show LOGIN in white color on the purple button. enter image description here

Answer 1

just remove the padding of the container and it will work fine.
code after removing the container padding:
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Background1(),
),
);
class Background1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
//Whole screen
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Colors.purple.shade700,
Colors.purple.shade500,
Colors.purple.shade300,
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 80),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Text("LOGIN",
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold)),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(225, 95, 27, 0.3),
blurRadius: 20,
offset: Offset(0, 10),
)
],
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Email or phone number",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey[200])),
),
child: TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
),
),
SizedBox(height: 40),
Text("Forgot Password?",
style: TextStyle(color: Colors.white)),
SizedBox(height: 40),
Container(
height: 40,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
color: Colors.purple.shade800,
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text("LOGIN",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold)),
),
),
],
),
),
),
),
],
),
),
),
);
}
}

Answer 2

You might be using all of the space on the screen, rather then using a column use a listview, this will allow you to scroll. Additionally Listview.builder will allow you to build the children of the list view dynamically.
checkout https://api.flutter.dev/flutter/widgets/ListView-class.html for info on the listview class