flutter - when wrapped my Column widget with SingleChildScrollView, it does not fill full height

Question

After wrapping my Column widget with SingleChildScrollView widget, my screen got cut like this:

I could not find fill max height or something as a parameter for the SingleChildScrolledView. The reason for adding the SingleChild is because when I open tap on the TextField widget and the keyboard pops up, the last TextField says it's 'overflowed' and as a solution, I found that TextField should be added. Thanks in advance :)

class _RegisterScreenState extends State<RegisterScreen> {

  // TextFields controllers
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
        width: double.infinity,
        color: const Color(0xFF26243C),
        child: SingleChildScrollView(
          reverse: true,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              
              const SizedBox(height: 72),
          
              const Text("Get Started",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: 'Chalet',
                fontSize: 48,
                fontWeight: FontWeight.w100,
                color: Color(0xFFDF862D),
                height: 1.0
              ),),
          
               Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
              const Text('Already have an account?',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Color(0xFFF6F9F8))),
          
                TextButton(
                  onPressed: () {
                    // take you to login page
                    Navigator.push(context, MaterialPageRoute(builder: (context) => const RegisterScreen()));
                  },
                    child: const Text(
                  'Sign In!',
                  style: TextStyle(
                      color: Color(0xFFF6F9F8), fontWeight: FontWeight.bold)
                ))
              ],
            ),
          
            const SizedBox(height: 65),
          
            const Text("Your e-mail",
            style: TextStyle(
              fontSize: 16,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
              color: Color(0xFFF6F9F8)
            ),),
          
            const SizedBox(height: 12),
          
            // email textField  
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.85,
              child: TextField(
                controller: _emailController,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color(0xFFF6F9F8),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide.none
                  ),
                  hintText: 'Enter your e-mail',
                  hintStyle: const TextStyle(
                    color:Color.fromARGB(255, 174, 173, 173)
                  )
                ),
              ),
            ),
          
            const SizedBox(height: 12),
          
            const Text("Your password",
            style: TextStyle(
              fontSize: 16,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
              color: Color(0xFFF6F9F8)
            ),),
          
            const SizedBox(height: 12),
          
            // password textField  
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.85,
              child: TextField(
                controller: _passwordController,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color(0xFFF6F9F8),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide.none
                  ),
                  hintText: 'Enter your password',
                  hintStyle: const TextStyle(
                    color:Color.fromARGB(255, 174, 173, 173)
                  )
                ),
              ),
            ),
          
            const SizedBox(height: 12),
          
            const Text("Confirm your password",
            style: TextStyle(
              fontSize: 16,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
              color: Color(0xFFF6F9F8)
            ),),
          
            const SizedBox(height: 12),
          
            // confirm password textField  
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.85,
              child: TextField(
                controller: _confirmPasswordController,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: const Color(0xFFF6F9F8),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide.none
                  ),
                  hintText: 'Confirm your password',
                  hintStyle: const TextStyle(
                    color:Color.fromARGB(255, 174, 173, 173)
                  )
                ),
              ),
            ),
          
            ],
          ),
        ),
      ),
    );
  }
}

after adding BoxConstrains.expand() to my Container constraints, this happened:

Scaffold(
  body: Container(
    // ...
    constraints: BoxConstraints.expand(), // Added this
    child: SingleChildScrollView(
      // ...
    ),
  ),
)

Answer 1

The Container that wraps the SingleChildScrollView is constrained to match its child's requested height. To make the Container with its child expand to the body of Scaffold, use constraints: BoxConstraints.expand().

Scaffold(
  body: Container(
    // ...
    constraints: BoxConstraints.expand(), // Add this constraint
    child: SingleChildScrollView(
      // ...
    ),
  ),
)

See also: Understanding constraints

---

EDIT: You also have reverse: true set, which reverses the scroll direction and cause the remaining space to fill up on the top. Remove that line.