Tried to make a sign up screen with a column and a form, but the page is displaying errors due to it overflowing. Checked on how to solve this and all sources say I should enclose the Container in a 'SingleChildScrollView' widget, but this doesn't seem to fix the problem for me.
Here's my code:
class RegisterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// code for the register layout
return Scaffold(
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.fromLTRB(47, 106, 47, 0),
height: MediaQuery.of(context).size.height,
child: Column(
children: [
Row(
children: [
Text(
'Create account',
style: TextStyle(color: Color(0xFFFD007C),
fontFamily: 'MontBlanc',
fontSize: 28,
),
),
],
),
SizedBox(height: 19),
Row(
children: [
Text(
'Or sign in with',
style: TextStyle(
fontFamily: 'TisaSansPro',
color: Color(0xFFACACAC),
),
),
SizedBox(width: 10),
ClipRect(
child: Container(
height: 20,
width: 20,
child: Image.asset('assets/icons8-google-48.png'),
),
),
SizedBox(width: 10),
Icon(
Icons.facebook,
color: Color(0xFF4267B2),
),
SizedBox(width: 10),
Icon(
Icons.apple,
color: Color(0xFF555555),
),
],
),
SizedBox(height: 39),
Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Email address',
floatingLabelBehavior: FloatingLabelBehavior.always,
hintText: '[email protected]',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Color(0xFFECC2D6)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Color(0xFFFD007C)),
),
),
),
SizedBox(height: 36),
TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
floatingLabelBehavior: FloatingLabelBehavior.always,
hintText: 'Input your password',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Color(0xFFECC2D6)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Color(0xFFFD007C)),
),
),
),
SizedBox(height: 82),
Container(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
onPressed: () => Navigator.pushNamed(context, route.loginPage),
style: ElevatedButton.styleFrom(primary: Color(0xFFFD007C), elevation: 4.0),
child: Text(
'Register',
style: TextStyle(
color: Colors.white,
fontFamily: 'TisaSansPro',
),
),
),
),
],
),
),
],
),
),
),
);
}
}
I have looked at the code for any issues but cant see any, I also tried using the widget to wrap around the columns. I made a shorter form on another page that didn't overflow and that worked, but this doesn't.
CodePudding user response：
Just remove your Container widget inside SingleChildScrollView like this :
class RegisterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 47),
child: Column(
children: [
Row(
children: const [
Text(
'Create account',
style: TextStyle(
color: Color(0xFFFD007C),
fontFamily: 'MontBlanc',
fontSize: 28,
),
),
],
),
const SizedBox(height: 19),
Row(
children: const [
Text(
'Or sign in with',
style: TextStyle(
color: Color(0xFFACACAC),
),
),
SizedBox(width: 10),
Icon(
Icons.facebook,
color: Color(0xFF4267B2),
),
SizedBox(width: 10),
Icon(
Icons.apple,
color: Color(0xFF555555),
),
],
),
const SizedBox(height: 39),
Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Email address',
floatingLabelBehavior: FloatingLabelBehavior.always,
hintText: '[email protected]',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
const BorderSide(color: Color(0xFFECC2D6)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
const BorderSide(color: Color(0xFFFD007C)),
),
),
),
const SizedBox(height: 36),
TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
floatingLabelBehavior: FloatingLabelBehavior.always,
hintText: 'Input your password',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
const BorderSide(color: Color(0xFFECC2D6)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: Color(0xFFFD007C),
),
),
),
),
const SizedBox(height: 82),
SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
onPressed: () =>
Navigator.pushNamed(context, 'route.loginPage'),
style: ElevatedButton.styleFrom(
primary: const Color(0xFFFD007C),
elevation: 4.0,
),
child: const Text(
'Register',
style: TextStyle(
color: Colors.white,
fontFamily: 'TisaSansPro',
),
),
),
),
],
),
),
],
),
),
),
);
}
}
So whenever your screen is not big enough, it will enable scroll to your register screen.
CodePudding user response：
seems There is no issue in your code. maybe Your testing device screen is not adequate to display all the content here. Try to use more screen adaptive methods.
This occurs may be your some fixed height amounts are overflowing the screen.Like sized box height amounts you defined.as follows
SizedBox(height: 36)
To fix this issue, try to remove fixed height amount.You can use media query for adaptive screen or you can user more screen adaptive packages,widgets.
@override
Widget build(BuildContext context) {
double _height=MediaQuery.of(context).size.height;
after define this variable use it for fixed heights like this.
SizedBox(height: _height/50),
Othwise you can use Padding, Exapanded widgets.