The column's MainAxisAlignment does not work inside a SingleChildScollView

Question

I have a simple Form inside a Scaffold. The LoginPage widget is a direct child of app's scaffold:

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

  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final _userCtl = TextEditingController();
  final _passCtl = TextEditingController();
  @override
  Widget build(BuildContext context) {
    var h = MediaQuery.of(context).size.height;
    var w = MediaQuery.of(context).size.width;

    return Column(
      children: [
        Expanded(
          flex: 1,
          child: Container(),
        ),
        Expanded(
          flex: 2,
          child: Container(
            padding: const EdgeInsets.all(15),
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.grey),
                borderRadius: const BorderRadius.all(Radius.circular(30))),
            width: w > breakPoint800 ? 0.5 * w : w,
            height: 0.5 * h,
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        const Text('Login',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 24)),
                        UsernameInput(_userCtl), // TextFormField 
                        PasswordInput(_passCtl), // Row of TextFormField and IconButton
                      ],
                    ),
                    ElevatedButton(
                      autofocus: true,
                      onPressed: () {
                        // Some logic here
                        }
                      },
                      child: const Text('Submit'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(),
        )
      ],
    );
  }
}

The reason that I've wrapped the Column inside a SingleChildScrollView is to make it scrollable and get rid of the out of RenderBox error in narrow screen heights.

Scrolling problem is now solved but the mainAxisAlignment: MainAxisAlignment.spaceBetween does not work. i.e. all the column's children stick together. It seems that the SingleChildScrollView does not occupy its parent's available space. When I remove the SingleChildScrollView, the layout will be OK but the out of RenderBox error occurs.

How should I solve this problem?

Answer 1

Try below code hope its helpful to you. Used CustomScrollView instead of SingleChildScrollView just change your textfields instead of my textfields. you also used SizedBox(height:20,), also refer CustomScrollView here

return Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(),
    ),
    Expanded(
      flex: 2,
      child: Container(
        padding: const EdgeInsets.all(15),
        decoration: BoxDecoration(
            border: Border.all(width: 1, color: Colors.grey),
            borderRadius: const BorderRadius.all(Radius.circular(30))),
        child: CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: [
            SliverFillRemaining(
              child: Form(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        const Text('Login',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 24)),
                        TextField(),
                        TextField(), // Row of TextFormField and IconButton
                      ],
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text('Submit'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(),
    )
  ],
);

Your result screen->