Issue with Aligning or Positioning Flutter Widgets - flutter

Question

I want the Container attached to the body of the Scaffold to occupy the space of it's child, which is the Padding widget in this case.
return Scaffold(
backgroundColor: Colors.lightBlue,
appBar: AppBar(
// backgroundColor: AppColors.grey,
elevation: 0.0,
backgroundColor: Colors.transparent,
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () => Navigator.pushReplacementNamed(context, '/'),
),
),
body: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
boxShadow: kBoxShadow,
),
child: Padding(
padding: EdgeInsets.all(kSpacingUnit * 3.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
EmailSignInForm(),
SizedBox(height: kSpacingUnit * 4.0),
SocialMediaLoginWidget(),
],
),
),
),
);
Below is the screenshot for the above code:
But I also want the padding widget to be pushed to the bottom of the screen. To achieve this I wrapped the Padding widget with the Expanded widget, and later wrapped the Expanded widget with a Column widget, as shown below:
return Scaffold(
backgroundColor: Colors.lightBlue,
appBar: AppBar(
// backgroundColor: AppColors.grey,
elevation: 0.0,
backgroundColor: Colors.transparent,
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () => Navigator.pushReplacementNamed(context, '/'),
),
),
body: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
boxShadow: kBoxShadow,
),
child: Column(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.all(kSpacingUnit * 3.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
EmailSignInForm(),
SizedBox(height: kSpacingUnit * 4.0),
SocialMediaLoginWidget(),
],
),
),
),
],
),
),
);
Now that the contents of the Padding widget have got pushed to the bottom of the screen, but the Expanded widget, tries to occupy all the available space. I don't want this to happen.
I don't want the height of the Padding widget to increase. Below is the screenshot after updating the code:
Another issue that's concerning me is, where should I be adding the SingleChildScrollView, as I would experience the "Bottom overflowed by -- px" error when the user would tap on the TextFormFields to input the email and password.
I did raise this issue earlier as well but wasn't much luck, so thought would organize the code and explain it in detail so that it would be easy for others to understand and help.
Thank you so much for your help in advance.
AFTER APPLYING SOLUTION SUGGESTED BY #SoundConception

Answer 1

try adding this to your Column widget :
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,

Answer 2

In your first code example you have:
...
body: Container(
...
child: Padding(
padding: EdgeInsets.all(kSpacingUnit * 3.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
...
],
),
),
),
The mainAxisSize: MainAxisSize.min specifies that the Column should be as small as possible in height, effectively shrink wrapping it to the height of its children.
The Padding just adds the specified dp of padding around Column widget.
This means the child of the Container has a fixed height equal to the sum of the Column children heights plus (kSpacingUnit * 3.0) dp of padding top and bottom.
Since the Container child height is fixed, the Container will size itself to the height of it's child.
In your second code example you have:
body: Container(
...
child: Column(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.all(kSpacingUnit * 3.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
...
],
),
),
),
],
),
),
Here the outermost Column has a single child that is an Expanded which means this will take up all the available room in the Column.
The innermost Column has mainAxisAlignment: MainAxisAlignment.end meaning its children will align to the bottom of the Column. The height of your Padding has not expanded.
You ask about using a SingleChildScrollView. I assume you want the white background decoration to remain stationary, and only the contents of the Column should be able to scroll.
Try something like the following:
return Scaffold(
...
body: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
boxShadow: kBoxShadow,
),
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(kSpacingUnit * 3.0),
child: Column(
children: <Widget>[
EmailSignInForm(),
SizedBox(height: kSpacingUnit * 4.0),
SocialMediaLoginWidget(),
],
),
),
),
),
);
Note: You'll need to make sure your EmailSignInForm() and SocialMediaLoginWidget() do not have unbound height.
My guess is your EmailSignInForm() probably utilises a Column. If so set it's mainAxisSize to min.