MainAxisAlignment under SingleChildScrollView is not working - flutter

Question

I developed a login screen in which first i get the render flex error when i open the keyboard so for that i wrap my widgets in SingleChildScrollView, but after that mainAxisAlignment of Column is not working but when i removed SingleChildScrollView then everything working fine except render flex error. i don't know what to do kindly help please.
Following is the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 70, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.keyboard_arrow_up,
size: 30,
color: Colors.white,
),
Text(
"Login Screen",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
],
),
),
),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Text(
"Welcome",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
hintText: "Enter User Name"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.vpn_key),
hintText: "Enter Password"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(width: 2, color: Colors.blue)),
textColor: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
onPressed: () {},
),
),
),
Center(
child: Text(
"Forgot Password",
style: TextStyle(color: Colors.grey),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Text("Create Account"),
color: Colors.blue,
onPressed: () {},
),
),
)
],
),
)
],
),
),
],
),
));
}
}

Answer 1

You can try this code blocks
CustomScrollView(
scrollDirection: Axis.vertical,
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('test'),
for (int i = 0; i < 10; i++) const FlutterLogo(size: 80)
],
),
),
],
),

Answer 2

After wrapping Column with SingleChildScrollView wrap it with Center widget.

Answer 3

Set the alignment of the outer container, then wrap the column with singleChildScrollView.
Container(
alignment: Alignment.center, //Set container alignment then wrap the column with singleChildScrollView
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: []
),
);

Answer 4

Yeah MainAxisAlignment' property of a 'Column' does not work when you wrap the 'Column' in 'SingleChildScrollView'. I dont know the reason, but thats how it is.
I use 'SizedBox(height: xx)' to give space between widgets inside the 'Column' when i absolutely need a scroll view, otherwise i tend not to use the 'SingleChildScrollView'.

Answer 5

you can Column wrap with a Container...
full code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
),
SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 70, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.keyboard_arrow_up,
size: 30,
color: Colors.white,
),
Text(
"Login Screen",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
],
),
),
),
),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Text(
"Welcome",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
hintText: "Enter User Name"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.vpn_key),
hintText: "Enter Password"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(width: 2, color: Colors.blue)),
textColor: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
onPressed: () {},
),
),
),
Center(
child: Text(
"Forgot Password",
style: TextStyle(color: Colors.grey),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Text("Create Account"),
color: Colors.blue,
onPressed: () {},
),
),
)
],
),
)
],
),
),
],
),
));
}
}

Answer 6

This will work...
Set the alignment of the outer container as alignment.bottomCenter, then wrap the column with singleChildScrollView. It will definitely works. Thankyou.