How to Expand Single Child Scroll View in Flutter

Question

I am attempting to expand a single child scroll view, but not having any luck. I have tried expanding the single child scroll view, wrapping in a container, and / or expanding children widgets and either I get an error or it does not expand. I am not sure what I am doing wrong, or how to expand a single child scroll view.

The ideal result would be in the image shown that the white container expand to the bottom of the device, but the result i am currently getting is leaving a gap and showing the purple background.

Current Result:

Code:

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: cPrimaryColor,
      body: SafeArea(
        child: Container(
          height: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                VerticalWidetSpacer(height: 40.0),
                Padding(
                  padding: kLoginMargin,
                  child: Text('Create Better',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: tHeader,
                    fontWeight: FontWeight.bold
                  ),),
                ),
                VerticalWidetSpacer(height: 20.0),
                Padding(
                  padding: kLoginMargin,
                  child: Text('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum',
                  style: TextStyle(
                    fontSize: tBody,
                    color: Colors.white
                  ),),
                ),
                VerticalWidetSpacer(height: 60.0),
                Column(
                  children: [
                    Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          topRight: Radius.circular(20.0)
                        ),
                      ),
                      child: Column(
                        children: [
                          VerticalWidetSpacer(height: 30.0),
                          Text('Sign in',
                          style: TextStyle(
                            fontSize: tBodyHeader,
                            color: Colors.black,
                            fontWeight: FontWeight.bold
                          ),),
                          VerticalWidetSpacer(height: 40.0,),
                          LoginTextField(
                            fieldLabel: 'Email',
                            prefixIcon: Icon(FontAwesomeIcons.envelope),
                            hintText: 'example@gmail.com',
                          ),
                          VerticalWidetSpacer(height: 20.0),
                          LoginTextField(
                            fieldLabel: 'Password',
                            suffixIcon: Icon(FontAwesomeIcons.eyeSlash),
                            hintText: '●●●●●●●●',
                          ),
                          VerticalWidetSpacer(height: 20.0),
                          LoginButton(),
                          NewTextButton(
                            buttonText: 'Forgot Password',
                            onPressed: () {

                            },
                            textColor: Color(0xFF6E6E6E),
                            textFontSize: 18.0,
                          ),
                          VerticalWidetSpacer(height: 40.0),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              NewTextButton(
                                buttonText: 'Create a new account',
                                onPressed: () {

                                },
                                textColor: cButtonColor,
                                textFontSize: 18.0,
                                useFontWeight: true,
                                fontWeight: FontWeight.bold,
                              )
                            ],
                          )
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Have you tried using the `Align` widget and setting it to `bottomCenter`? — Stefan Galler, Dec 24 '21 at 07:00
Using the Align widget it pushes the entire column down, while it does push the container so that it expands to the bottom of the screen, but it also adjusts the top headers ("create better", etc.) which is not ideal — bensmith87, Dec 24 '21 at 07:31

score 1 · Accepted Answer · answered Dec 24 '21 at 09:04

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.purple,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.0),
              child: Text('Create Better',
              style: TextStyle(
                color: Colors.white,
                fontSize: 38,
                fontWeight: FontWeight.bold
              ),),
            ),
            const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.0),
              child: Text(
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum',
                style: TextStyle(
                  fontSize: 18,
                  color: Colors.white
                ),
              ),
            ),
            const Padding(padding: EdgeInsets.symmetric(vertical: 25.0)),
            Expanded(
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0)
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
                      const Text(
                        'Sign in',
                        style: TextStyle(
                          fontSize: 24,
                          color: Colors.black,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                      const Padding(padding: EdgeInsets.symmetric(vertical: 20.0)),
                      const Text(
                        "Email",
                        style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.black
                        ),
                      ),
                      TextFormField(
                        decoration: const InputDecoration(
                          filled: true,
                          fillColor: Colors.white,
                          contentPadding: EdgeInsets.all(10),
                          hintText: "Example.mail.com",
                          hintStyle: TextStyle(
                            color: Colors.black26,
                            fontSize: 16.0,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ),
                      const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
                      const Text(
                        "Password",
                        style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.black
                        ),
                      ),
                      TextFormField(
                        decoration: const InputDecoration(
                          filled: true,
                          fillColor: Colors.white,
                          contentPadding: EdgeInsets.all(10),
                          hintText: "",
                          hintStyle: TextStyle(
                            color: Colors.black26,
                            fontSize: 16.0,
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ),
                      const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
                      MaterialButton(
                        onPressed: () {

                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "LOGIN",
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                        color: Colors.black,
                      ),
                      const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)),
                      const Center(child: Text("Forgot Password")),
                      const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
                      const Spacer(),
                      const Center(child: Text("Create new account")),
                      const Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

try this, should look like this, still don't know why you use SingleChildScrollView

This works in terms extending the white container to the bottom of the screen, but it does not account for when a user taps a text field and opens the keyboard All the content below the field cannot be seen since there is no scroll view that would allow the user to see beneath it such as the login button, etc. — bensmith87, Dec 26 '21 at 04:43

score 1 · Answer 2 · answered Mar 22 '23 at 09:42

1

Use this CustomScrollView

CustomScrollView(
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Column[..Expand..]

answered Mar 22 '23 at 09:42

Lukas Marik

119
1
4

This code still leaves the scrolling effect. I added another answer where it scrolls only when needed. – Lukas Marik May 26 '23 at 10:02

score -1 · Answer 3 · answered Dec 24 '21 at 06:48

-1

I think it come from the column size, put it into a container and try again!

answered Dec 24 '21 at 06:48

Thanh Tung

1

I assume you are suggesting wrapping the single child scroll view with a container? If so, the result is the same. To clarify, i am only using the scroll view to avoid render errors when a user clicks on a text field and the device keyboard opens that cuts off the content – bensmith87 Dec 24 '21 at 06:59
how about `mainAxisSize: MainAxisSize.max` in the column – Thanh Tung Dec 24 '21 at 07:58
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 24 '21 at 08:26

score -1 · Answer 4 · answered May 26 '23 at 09:49

Tested also on smaller displays and when the keyboard is moving out. Works great without overflow errors.

LayoutBuilder(
    builder: (context, constraint) {
      return Form(
        child: SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(minHeight: constraint.maxHeight),
            child: IntrinsicHeight(
              child: Column([...Spacer()..])

How to Expand Single Child Scroll View in Flutter

4 Answers4