My SingleChildScrollView does not work on Container what is wrong?

Issue

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.

Solution

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.

Answered By - Alann Maulana