Flutter screen overflow from bottom and not scrolling - flutter

Question

I have a simple form screen issue is it just sticks and showing overflow on the bottom and not scrolling. I have added SingleChildScrollView but it's not working. Try to remove and added Expanded also Try to give height also cant divided height so give first contact full height but not working.
My code
body: 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(
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'),
),
),
),
),
),
],
),
),
),
),
),
],
),
),
),

Answer 1

There are few things wrong with the code.
Using a Container for spacing is heavy. Use SizedBox with height instead.
Don't limit the height of SingleChildScrollView, when you want infinite height.
Since the Expanded widget takes up infinite space available, wrapping a widget in it will make that widget take up an infinite size, which Flutter will not allow. So, avoid using any flex widget inside scroll views.
Spacer is an expanded widget. This implies it follows point 3.
There are few code styling tips:
Use the const keyword with a constant constructor wherever possible.
Variables in Flutter follow the camelCase convention.
Here's the code I edited and it worked. I have changed some variables and properties to reproduce the working code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
final _formKey = GlobalKey();
final textGreyColor = Colors.grey;
final kPrimaryColor = Colors.teal;
final userName = TextEditingController();
final userEmail = TextEditingController();
final userPassword = TextEditingController();
#override
Widget build(BuildContext context) {
// not optimal, but will do
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
var status = height / 10;
return SingleChildScrollView(
// sized box nullifies the usage of scroll view
child: Column(
children: <Widget>[
Container(
color: kPrimaryColor,
child: Column(
children: [
SizedBox(
height: status * 1,
),
SizedBox(
height: height * 0.065,
),
const Padding(
padding: 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'),
),
),
),
const Padding(
padding: 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,
),
],
),
),
// don's use Expanded in scrollable views
Container(
color: kPrimaryColor,
child: Container(
decoration: const 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: const Color(0xffE6E6E6),
),
SizedBox(
height: height * 0.03,
),
SizedBox(
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: SizedBox(
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: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle:
TextStyle(color: textGreyColor, fontSize: 15),
hintText: "Enter Name",
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
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: SizedBox(
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: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle:
TextStyle(color: textGreyColor, fontSize: 15),
hintText: "Enter Email Address",
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
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: SizedBox(
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: const ValueKey('name'),
style: TextStyle(
color: textGreyColor, fontFamily: 'SegoeUI'),
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle:
TextStyle(color: textGreyColor, fontSize: 15),
hintText: "Enter Password",
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
),
SizedBox(
height: height * 0.02,
),
// const Spacer(), // --> this is an expanded widget
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: width * 0.9,
height: height * 0.06,
decoration: BoxDecoration(
color: const 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: const Center(
child: Text(
'CREATE ACCOUNT',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: 'SegoeUI'),
),
),
),
),
),
],
),
),
),
),
],
),
);
}
}

Answer 2

body: SingleChildScrollView(
child: Container(
height: Height * 1,
I think height wents wrong
because
double Height = 500.0;
double Width = 300.0;
final kPrimaryColor = Colors.blue;
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Container(
height: Height * 1.3,
It's working
But I know this is not a proper answer but you have to work in height. and keep move your project