How to use ScrollView without messing the order of the actual layout?

Question

I'm making a login screen, and from what I learned, I need to use SingleChildScrollView in order to prevent 'yellow-stripes' issues when TextFields are focused.

Whenever I add SingleChildScrollView, perhaps I lose any kind of widget alignment as MainAxisAlignment is not working anymore:

How is it looking like with SignleChildScrollView: Screenshot with SingleChildScrollView

How it should be looking like: Screenshot without SingleChildScrollView

I've tried anything but just can't figured it out.

      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.only(bottom: 50),
                child: TypeScript(textTypeScript: tsLogin),
              ),
              Container(
                width: MediaQuery.of(context).size.width / 1.2,
                child: Column(
                  children: [
                    emailField,
                    SizedBox(height: 20),
                    passwordField,
                    Container(
                      height: 80,
                      padding: EdgeInsets.only(top: 10),
                      alignment: Alignment.topRight,
                      //child: passwordRecovery,
                    ),
                    Container(
                      child: loginButton,
                    ),
                    SizedBox(
                      height: 52,
                      width: MediaQuery.of(context).size.height; / 2,
                      child: orStripe,
                    ),
                    Container(
                      padding: EdgeInsets.only(bottom: 10),
                      child: signButton,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

score 2 · Accepted Answer · answered Nov 02 '20 at 19:38

2

Try to replace the SingleChildscrollview with the following:

CustomScrollView(
  slivers[
    SliverFillRemaining(
      hasScrollBody: false,
      child: YourChildWidget(),
    ),
  ),
)

answered Nov 02 '20 at 19:38

Pieter van Loon

5,318
1
6
15

littleironical · Answer 2 · 2020-11-02T17:27:49.080

I would suggest two things to you:

1 In Line4, try to change mainAxisAlignment.end inside Column to MainAxisAlignment.start

2 There's an error that i've pointed out in the code below.

Check these out and tell me if this resolves your problem?

body: SafeArea(
    child: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            padding: EdgeInsets.only(bottom: 50),
            child: TypeScript(textTypeScript: tsLogin),
          ),
          Container(
            width: MediaQuery.of(context).size.width / 1.2,
            child: Column(
              children: [
                emailField,
                SizedBox(height: 20),
                passwordField,
                Container(
                  height: 80,
                  padding: EdgeInsets.only(top: 10),
                  alignment: Alignment.topRight,
                  //child: passwordRecovery,
                ),
                Container(
                  child: loginButton,
                ),
                SizedBox(
                  height: 52,
                  width: MediaQuery.of(context).size.height / 2, //ERROR
                  child: orStripe,
                ),
                Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: signButton,
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),

It doesn't change. Seems like it does not take any alignment methods. — Daniel, Nov 02 '20 at 17:10
the error is fixed, ty. how about the main issue, it still doesn't take any alignment input when I use SingleChildScrollView with a Column.. — Daniel, Nov 02 '20 at 17:38
I didn't find anything wrong in this code. The problem is not with `SingleChildScrollView`. I tried your code, it's working fine in my pc. Try `flutter upgrade`, then run your code, it'll not change anything but just try it once. — littleironical, Nov 02 '20 at 17:57
thank you for the feedback, I will check the rest of the code. — Daniel, Nov 02 '20 at 18:16

How to use ScrollView without messing the order of the actual layout?

2 Answers2