Flutter: Flexible column children inside a SingleChildScrollView - flutter

Question

I have an app screen with a title on the top, a few buttons on the bottom, and an input form in the rest of the center.
What I'm trying to achieve: I want the input form children (i.e. the different input fields) to be spread out on the vertical axis to fill the available space.
When a the keyboard is open and occupies ~40% of the screen, I want all the flexible space between the input fields to shrink, and if thats not enough to show everything, I want the "center" part to be scrollable, so users can find the rest of the input fields, now hiding 'below'.
I'm using a combination of SingleChildScrollView with a child Column.
The widget tree (simplified..) looks like this:
return Scaffold(
body: SafeArea(
child: Column(
children: [
Text('Title',style: TextStyle(fontSize: 32),),
Expanded(
child: Container(
color: Colors.redAccent,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
],),),),),
ElevatedButton(onPressed: () => null, child: Text('Next')),
],),),);
When the keyboard is open, the above code results in this, which shrinks the Expanded red container, and is scrollable, so it is the desired result:
However, when the keyboard is closed I get this:
So in the non-keyboard layout, I want the input fields to be spread out evenly and take the entire red space.
I've tried all sorts of combinations by wrapping the children with Expanded and Flexible, add Flexible children in between the input fields, and what not.
Could not achieve the desired state. only getting Layout errors.

Answer 1

I would like to suggest you to use an AppBar, this way you already have the height to subtract!
Your mistake derives from not setting a Container with a fixed height.
That's my solution:
#override
Widget build(BuildContext context) {
var deviceHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
backgroundColor: Colors.white,
title: Text(
'Title',
style: TextStyle(fontSize: 32, color: Colors.black87),
),
),
body: SingleChildScrollView(
child: Container(
height: deviceHeight - (kToolbarHeight + 32), // 32 => Button height
child: Column(
children: [
Expanded(
child: Container(
color: Colors.redAccent,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Firstname'),
),
],
),
),
),
),
ElevatedButton(onPressed: () => null, child: Text('Next')),
],
),
),
),
);
}