Flutter screen overflow from bottom - flutter

Question

I have a simple page in which I am using SingleChildScrollView to scroll the page so it will not show overflow and show the content of the bottom.
But it's showing an error also the page is not scrollable due to which I can't see the bottom 2 buttons
My code
SingleChildScrollView(
child: Container(
height: Height * 1,
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
child: Column(
children: [
SizedBox(
height: Status * 1,
),
SizedBox(
height: Height * 0.065,
),
Padding(
padding: const EdgeInsets.only(left: 13, bottom: 13),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Create Account',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'SegoeUI-SemiBold'),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 13),
child: Text(
"Please create an account in order to start using your StalkMe Profile.",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
SizedBox(
height: Height * 0.04,
),
],
),
),
Expanded(
child: Container(
color: kPrimaryColor,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Form(
key: _formKey,
child: Column(
children: [
GestureDetector(
onTap: () {
print('Login print');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LoginScreen()),
);
},
child: Padding(
padding: const EdgeInsets.only(
top: 17, right: 17, bottom: 17),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'LOGIN',
style: TextStyle(
color: kPrimaryColor,
fontSize: 16,
fontFamily: 'SegoeUI-SemiBold',
),
)),
),
),
Container(
height: 1,
width: double.infinity,
color: Color(0xffE6E6E6),
),
SizedBox(
height: Height * 0.03,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Name',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userName,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a name';
}
return null;
},
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Name",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Email Address',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userEmail,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Please enter a valid email address';
}
return null;
},
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Email Address",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Container(
width: Width * 0.9,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Password',
style: TextStyle(
color: textGreyColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 11),
child: Container(
width: Width * 0.9,
child: TextFormField(
controller: userPassword,
validator: (value) {
if (value!.isEmpty || value.length < 6) {
return 'Please enter a 6 digit password';
}
return null;
},
obscureText: true,
key: ValueKey('name'),
style: TextStyle(
color: textGreyColor,
fontFamily: 'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15),
hintText: "Enter Password",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: Height * 0.02,
),
Spacer(),
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: Width * 0.9,
height: Height * 0.06,
decoration: BoxDecoration(
color: Color(0xffebf7f7),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
'GO BACK',
style: TextStyle(
color: kPrimaryColor,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
GestureDetector(
child: Padding(
padding:
const EdgeInsets.only(top: 8, bottom: 18),
child: Container(
width: Width * 0.9,
height: Height * 0.06,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
'CREATE ACCOUNT',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
),
],
),
),
),
),
),
],
),
),
),
On small devices, it's not scrollable I try everything to try to give full height but now nothing works for me.

Answer 1

Try putting the Column directly below the SingleChildScrollView.
Like this:
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
height: Height * 1, // if its still needed
child: Column(

Answer 2

Remove the first container(Wrapped by SingleChildScrollView with height, "height: Height * 1")
Remove the Expanded widget.
Give required size to enbounded Container(
Container with color: kPrimaryColor,)